nextjs starter kit

시작하기

전제 조건

• node.js 및 yarn/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 : 서기 (인증을 사용하는 경우) /api/auth/webhook 및 stripe (결제를 사용하는 경우) AT /api/payments/webhook 용 webhooks를 설정하십시오.
• 필요에 따라 방문 페이지, 대시 보드 및 기타 구성 요소를 사용자 정의하십시오.
• 데이터베이스 구조를 변경 해야하는 경우 prisma/schema.prisma 에서 prisma 스키마를 수정하십시오.

중요한 보안 메모

• Supabase 프로젝트에서 RLS (Row Level Security)를 활성화하여 데이터베이스 수준에서 데이터 보호를 보장합니다.
• 서비스 키를 안전하게 유지하기 위해 항상 서버 측 (API 경로 또는 서버 구성 요소)에서 Supabase 호출을하십시오.

자세히 알아보십시오

자세한 내용은이 프로젝트에 사용 된 개별 기술의 문서를 참조하십시오.

• 다음 .js 문서
• 꼬리 바람 CSS 문서
• 과베이스 문서
• 프리즘 문서
• 서기 문서 (인증을 사용하는 경우)
• 스트라이프 문서 (지불을 사용하는 경우)