nextjs starter kit

Начиная

Предварительные условия

• Node.js и пряжа/булочка установлены
• Счета и ключи 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 в prisma/schema.prisma если вам нужно изменить структуру базы данных.

Важные примечания безопасности

• Включите безопасность уровня строк (RLS) в вашем проекте Supabase, чтобы обеспечить защиту данных на уровне базы данных.
• Всегда делайте вызовы Supabase на стороне сервера (в маршрутах API или компонентах сервера), чтобы ваш сервисный ключ был в безопасности.

Узнать больше

Обратитесь к документации отдельных технологий, используемых в этом проекте для более подробной информации:

• Next.js документация
• Документация по ветру CSS
• Документация Supabase
• Документация PRISMA
• Документация клерка (при использовании AUTH)
• Документация полосы (при использовании платежей)