nextjs starter kit

はじめる

前提条件

• node.jsおよびYarn/Bunがインストールされています
• アカウントとAPIキー：
  • サパバーズ
  • ストライプ（支払いを使用する場合）
  • 店員（認証を使用する場合）

設定

1. リポジトリをクローンします：

    git clone <repository-url>
   cd <project-directory>
   

2. 依存関係をインストールします：

    yarn
   

3. 環境変数の設定：次の変数を使用してルートディレクトリに.envファイルを作成します。

    SUPABASE_URL=<your-supabase-project-url>
   SUPABASE_SERVICE_KEY=<your-supabase-service-key>
   
   # If using Stripe
   STRIPE_SECRET_KEY=<your-stripe-secret-key>
   NEXT_PUBLIC_STRIPE_PRICE_ID=<your-stripe-price-id>
   
   # If using Clerk
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your-clerk-publishable-key>
   CLERK_SECRET_KEY=<your-clerk-secret-key>
   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
   NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
   NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
   

4. configure feature： config.tsで、目的の機能を設定します。

    const config = {
     auth : {
       enabled : true , // Set to false if not using Clerk
     } ,
     payments : {
       enabled : true , // Set to false if not using Stripe
     }
   } ;

5. データベースのセットアップ：Prismaの移行を実行します：

    npx prisma migrate dev
   

6. 開発サーバーを開始します。

    yarn dev
   

7. ブラウザを開き、 http://localhost:3000に移動して、アプリケーションが実行されています。

追加の構成

• WebHooks： /api/auth/webhookで書記（AUTHを使用する場合）およびSTRIPE（支払いを使用している場合）で/api/payments/webhookのWebHooksを設定します。
• 必要に応じて、ランディングページ、ダッシュボード、その他のコンポーネントをカスタマイズします。
• データベース構造を変更する必要がある場合はprisma/schema.prismaのPrismaスキーマを変更します。

重要なセキュリティノート

• Supabaseプロジェクトで行レベルのセキュリティ（RLS）を有効にして、データベースレベルでのデータ保護を確保します。
• サーバー側（APIルートまたはサーバーコンポーネント）で常にSupabase呼び出しを行い、サービスキーを安全に保ちます。

もっと詳しく知る

詳細については、このプロジェクトで使用されている個々のテクノロジーのドキュメントを参照してください。

• next.jsドキュメント
• Tailwind CSSドキュメント
• Supabaseドキュメント
• Prismaドキュメント
• 書記官のドキュメント（認証を使用している場合）
• ストライプドキュメント（支払いを使用している場合）