Sistema Full Stack Next.js
사용 시기
로그인, 회원가입, 패널, 사용자별 데이터, 업로드, 결제 또는 자체 API가 필요할 때 사용합니다. 랜딩 페이지 및 기업 사이트에는 site-estatico 스킬을 사용하세요.
프로젝트 생성
git clone https://github.com/guibean/nextjs-fullstack-template.git <slug>
cd <slug>
pnpm install
cp .env.example .env
BETTER_AUTH_SECRET을 openssl rand -base64 48로 생성하고, DATABASE_URL을 설정한 후 다음을 실행합니다:
pnpm db:migrate
pnpm dev
구현 순서
- 데이터, 관계, 권한 및 위협을 모델링합니다.
src/db/schema.ts를 수정하고pnpm db:generate를 실행합니다.pnpm db:migrate로 마이그레이션을 적용합니다.src/env.ts에서 env를 설정합니다.SKIP_ENV_VALIDATION외부에서는 폴백을 사용하지 마세요.- 서버에서 인증 및 권한 부여를 구현합니다.
- 서버에서 모든 입력을 Zod로 검증합니다.
- 속도 제한, 로그, 백업 및 관찰 가능성을 추가합니다.
- 그런 다음에만 패널 UI를 구축합니다.
보안 규칙
DATABASE_URL,BETTER_AUTH_SECRET,RESEND_API_KEY또는TURNSTILE_SECRET_KEY를 절대로 노출하지 마세요.- 보호된 Server Components에서는
auth.api.getSession({ headers: await headers() })를 사용하세요. - Route Handlers 및 Server Actions도 보호하세요.
- 클라이언트 측 유효성 검사에 의존하지 마세요.
- 인증, 데이터베이스 또는 변형이 있는 경우
output: "export"를 사용하지 마세요. - 프로덕션에서는 이메일 확인, 속도 제한 및 비밀번호 복구를 활성화하세요.
VPS 배포
pnpm build로 빌드하고.next/standalone출력물을 사용합니다.- 포함된 멀티 스테이지 Dockerfile을 사용하세요.
- 버전을 교체하기 전에 마이그레이션을 적용하세요.
- HTTPS, 리버스 프록시 및 관리 프로세스를 사용하세요.
- 파괴적인 마이그레이션 전에 PostgreSQL을 백업하세요.
체크리스트
- env 검증 완료
- 마이그레이션 적용 완료
- 로그인, 로그아웃 및 세션 테스트 완료
- 보호된 경로가 세션 없이 리디렉션됨
- 보호된 API가 세션 없이 거부됨
- 이중 검증이 있는 양식
-
pnpm lint,pnpm typecheck,pnpm build완료 - 공개 페이지에서 Lighthouse ≥ 95
- 백업 및 속도 제한 설정 완료