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で環境変数を設定します。SKIP_ENV_VALIDATIONの外部ではフォールバックを使用しないでください。- サーバー側で認証と認可を実装します。
- サーバー側で Zod を使用してすべての入力をバリデーションします。
- レート制限、ログ、バックアップ、監視可能性を追加します。
- その後に管理パネルの UI を構築します。
セキュリティルール
DATABASE_URL、BETTER_AUTH_SECRET、RESEND_API_KEY、TURNSTILE_SECRET_KEYを公開しないでください。- 保護された Server Component では
auth.api.getSession({ headers: await headers() })を使用します。 - Route Handler と Server Action も保護します。
- クライアント側のバリデーションに依存しないでください。
- 認証、データベース、またはミューテーションがある場合は
output: "export"を使用しないでください。 - 本番環境では、メール確認、レート制限、パスワードリセットを有効にします。
VPS へのデプロイ
pnpm buildでビルドし、出力は.next/standaloneです。- マルチステージ Dockerfile が含まれています。
- バージョンを切り替える前にマイグレーションを適用します。
- HTTPS、リバースプロキシ、プロセス管理を使用します。
- 破壊的なマイグレーションの前に PostgreSQL のバックアップを取得します。
チェックリスト
- env が検証済み
- マイグレーションが適用済み
- ログイン、ログアウト、セッションがテスト済み
- 保護されたルートがセッションなしでリダイレクトする
- 保護された API がセッションなしで拒否する
- 二重バリデーション付きのフォーム
-
pnpm lint、pnpm typecheck、pnpm build - 公開ページで Lighthouse ≥ 95
- バックアップとレート制限が定義済み