shipkit は何をしますか?
Next.js と React Native のフルスタックアプリを、認証・データベース・AIチャット・テストを統合したプロダクション対応のスターターキットで構築します。
概要
s shipkit コマンドは、ユーザーがプロダクション品質のフルスタックアプリケーションを迅速に立ち上げるためのスキルです。Next.js(Web)と React Native(モバイル)の両方をカバーし、以下の主要機能を最初から含んでいます。
- 認証: Auth.js を使用した安全なサインイン/サインアップ
- データベース: Prisma + PostgreSQL(または SQLite)による柔軟なデータ管理
- AIチャット: OpenAI 互換の API を使用したリアルタイムチャット機能
- テスト: Vitest によるユニットテストと Playwright による E2E テスト
- モノレポ: Turborepo を使用した効率的なコード管理
使用方法
shipkit を起動するには、以下の手順に従ってください。
-
リポジトリをクローンします。
git clone https://github.com/DjFikie25/shipkit.git cd shipkit -
依存関係をインストールします。
pnpm install -
環境変数を設定します。
.env.exampleファイルをコピーして.envを作成し、必要な値を入力します。cp .env.example .env -
データベースをセットアップします。
pnpm db:push -
開発サーバーを起動します。
pnpm dev
これで、Web アプリケーション(http://localhost:3000)とモバイルアプリケーション(Expo Go など)の両方が利用可能になります。
アーキテクチャ
apps/web: Next.js アプリケーション(App Router)apps/mobile: React Native(Expo)アプリケーションpackages/db: Prisma スキーマとデータベースロジックpackages/auth: 認証関連の共有コードpackages/ai: AI チャットの共有コードpackages/ui: 共通の UI コンポーネントpackages/validators: Zod を使用したバリデーションスキーマ
主な機能の詳細
認証
Auth.js を使用しており、メール/パスワード認証、GitHub や Google などの OAuth プロバイダをサポートしています。設定は packages/auth で管理し、セッション管理は JWT を使用します。
AI チャット
OpenAI 互換の API エンドポイントを使用するように設計されています。packages/ai にクライアントとサーバーサイドのロジックが含まれており、Vercel AI SDK を使用してストリーミング応答を実装しています。
テスト
- ユニットテスト: Vitest(
packages/*とapps/*に分散) - E2E テスト: Playwright(
apps/webに統合)
テストの実行方法:
pnpm test
Docker サポート
プロダクションビルド用の Dockerfile が用意されています。
pnpm docker:build
pnpm docker:up
環境変数
.env ファイルに以下の変数を設定する必要があります(詳細は .env.example を参照):
DATABASE_URL: データベース接続文字列AUTH_SECRET: 認証用のシークレットキーAUTH_GITHUB_ID,AUTH_GITHUB_SECRET: GitHub OAuth 認証(使用する場合)OPENAI_API_KEY: AI チャット機能を使用する場合の OpenAI API キー
カスタマイズ
- スキーマの変更:
packages/db/prisma/schema.prismaを編集し、pnpm db:pushを実行します。 - UI コンポーネント:
packages/uiでコンポーネントを追加・変更します。 - ルーティング: Web は
apps/web/app、モバイルはapps/mobile/appで管理します。
トラブルシューティング
- ポートの競合: Next.js サーバーがポート 3000 を使用できない場合は、
apps/webのdevスクリプトで-pフラグを使用してポートを変更してください。 - Prisma クライアントのエラー:
pnpm db:generateを実行して Prisma クライアントを再生成してみてください。 - 認証が機能しない:
.envの設定が正しいか確認し、OAuth プロバイダのコールバック URL が適切に設定されているか確認してください。