nextjs-workshop

• 以下のワークショップを参考に環境構築

  • Next.js 14 アプリ開発のあらすじ
  • next-demo-app

External services

• Clerk
  • Developers > API Keys
    • Publishable key
    • Secret keys
  • Account Portal > Pages
    • User profile
• Cloudflare
  • R2 > Overview > Create Bucket
  • R2 > Overview > Manage R2 API Tokens > Create API Token
    • Use the following credentials for S3 clients:
      • Access Key ID
      • Secret Access Key
    • Use jurisdiction-specific endpoints for S3 clients:
      • Default
  • R2 > Overview > Buckets > YOUR-BUCKET > Public access > Public R2.dev Bucket URL
• Vercel
  • Create Project > YOUR-REPOSITORY
    • Project Name: Any
    • Framework Preset: Next.js
    • Root Directory: ./
    • Environment Variables:
      • NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
      • CLERK_SECRET_KEY
      • CLOUDFLARE_ACCESS_KEY_ID
      • CLOUDFLARE_ACCESS_KEY
      • CLOUDFLARE_ENDPOINT
      • IMAGE_HOST_URL
  • YOUR-PROJECT > Settings > Functions > Function Region
    • Tokyo, Japan (Notheast) - hnd1
  • YOUR-PROJECT > Storage > Create Database > Postgres
  • YOUR-PROJECT > Storage > YOUR-DATABASE > Project > Connect Project > YOUR-PROJECT

Packages

準備のために実行したコマンド（実行済み）

prisma

# dependencies
bun add @prisma/client @aws-sdk/client-s3

# devDependencies
bun add --dev prisma

shadcn-ui

bunx shadcn-ui@latest add button dropdown-menu

Environments

.env.local

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= # Publishable key
CLERK_SECRET_KEY=                  # Secret keys
CLERK_USER_PROFILE=                # User profile

# Cloudflare
CLOUDFLARE_ACCESS_KEY_ID=          # Use the following credentials for S3 clients: Access Key ID
CLOUDFLARE_ACCESS_KEY=             # Use the following credentials for S3 clients: Secret Access Key
CLOUDFLARE_ENDPOINT=               # Use jurisdiction-specific endpoints for S3 clients: Default
IMAGE_HOST_URL=                    # Public R2.dev Bucket URL

# Vercel Postgres
POSTGRES_DATABASE=
POSTGRES_HOST=
POSTGRES_PASSWORD=
POSTGRES_PRISMA_URL=
POSTGRES_URL=
POSTGRES_URL_NON_POOLING=
POSTGRES_URL_NO_SSL=
POSTGRES_USER=

Prepares

bun install

Migrate with prisma

dotenv -e .env.local -- bun prisma migrate dev --name init

Startup

bun debug

Open your Web browser http://localhost:3000/

Debug

• Client-Side
  • 実行とデバッグ > Debugging on Client-Side > デバッグの開始
• Server-Side
  • 実行とデバッグ > Debugging on Server-Side > デバッグの開始

その他

現在設定されているすべての環境変数を出力

bun --print process.env

Prisma

schema ファイルのバリデーションチェック

dotenv -e .env.local -- bun prisma validate

schema ファイル更新後のマイグレーション

dotenv -e .env.local -- bun prisma migrate dev

ブラウザでデータを確認

dotenv -e .env.local -- bun prisma studio