nextjs starter kit

入門

先決條件

• Node.js和紗線/bun已安裝
• 帳戶和API鍵：
  • supabase
  • 條紋（如果使用付款）
  • 文員（如果使用身份驗證）

設定

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. 配置功能：在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：為文員設置Webhooks（如果使用auth）at /api/auth/webhook以及條紋（如果使用付款）at /api/payments/webhook 。
• 根據需要自定義著陸頁，儀表板和其他組件。
• 如果您需要更改數據庫結構，請在prisma/schema.prisma中修改Prisma架構。

重要的安全說明

• 在Supabase項目中啟用行級別安全性（RLS），以確保數據庫級別的數據保護。
• 始終在服務器端（在API路由或服務器組件中）進行Supabase調用，以確保您的服務密鑰安全。

了解更多

有關更多詳細信息，請參閱本項目中使用的各個技術的文檔：

• next.js文檔
• 尾風CSS文檔
• supabase文檔
• Prisma文檔
• 文員文檔（如果使用auth）
• 條紋文檔（如果使用付款）