web-nextjs

web-nextjs

目的

このスキルは、App Router、サーバーアクション、最適化されたレンダリング戦略などの最新機能に焦点を当て、Next.js 15 での Web アプリケーションの構築とデプロイに関する専門知識を提供します。

使用する場面

サーバーサイドのロジックを備えた、高速で SEO に適した React アプリが必要なプロジェクトに使用します。SSR が必要な E コマースサイト、SSG を使うブログ、ISR を使う動的アプリに最適です。プレーンな React で十分なシンプルな静的サイトには適していません。

主な機能

• App Router：/app ディレクトリでファイルベースのルーティングを可能にし、構成を改善します。例：app/about/page.jsx でルートを作成します。
• サーバーアクション：API ルートを使わずにサーバー上で変更処理を実行します。フォーム内で非同期関数として定義します。例：コンポーネント内で 'use server' ディレクティブを使用します。
• ISR/SSG/SSR：サーバーアクション内で revalidatePath() を使って ISR を設定します。SSG には getStaticProps、動的なデータ取得には getServerSideProps を使って SSR を設定します。
• ミドルウェア：middleware.js にエッジ関数を記述して、認証やリダイレクトを処理します。例：ページの読み込み前にユーザーセッションを確認します。
• Turbopack：インクリメンタルバンドリングで開発を高速化します。next.config.js で experimental: { turbopack: true } を指定して有効にします。
• Vercel へのデプロイ：Vercel CLI を使い、設定不要でアプリをデプロイできます。Webhook による ISR の自動無効化に対応しています。

使用パターン

Next.js アプリを構築するには、まずプロジェクトを作成します。npx create-next-app@latest my-app --typescript を実行し、ルーティング用に /app ディレクトリへ移動します。サーバーアクションを使うには、フォームにインポートして使用します。例：コンポーネント内に async function addItem() { 'use server'; await db.insert(item); } を追加します。SSR を実装するには、ページから getServerSideProps をエクスポートします。例：export async function getServerSideProps() { const data = await fetchData(); return { props: { data } }; }。ISR には、アクション内で revalidate を使用します。例：コンテンツの更新後に revalidatePath('/posts') を呼び出します。例 1：SSG でブログを構築します。app/posts/[id]/page.jsx を作成して getStaticProps で投稿を取得し、next build を実行して静的出力を生成します。例 2：認証ミドルウェアを追加します。middleware.js を作成して export function middleware(request) { if (!request.cookies.token) return NextResponse.redirect('/login'); } を記述し、next dev でテストします。

主なコマンド/API

• プロジェクトの作成：App Router を使うには npx create-next-app@latest my-app --app を実行します。TypeScript のサポートを追加するには --typescript を指定します。
• 開発サーバー：next dev --port 3001 を実行すると、ホットリロードに対応した状態で指定したポートを使って起動します。
• ビルドとデプロイ：本番用に next build を実行し、その後 vercel --prod でデプロイします。Vercel API エンドポイントとして、JSON ボディ { "name": "my-app" } を指定して POST https://api.vercel.com/v13/now/deployments?teamId=$VERCEL_TEAM_ID のように呼び出します。
• API ルート：app/api/route.js で定義します。例：export async function GET(request) { const data = await fetch('https://api.example.com'); return Response.json(data); }。
• 設定形式：カスタム設定は next.config.js で編集します。例：module.exports = { images: { domains: ['example.com'] }, experimental: { appDir: true } };。.env.local には NEXT_PUBLIC_API_URL="https://api.example.com" などの環境変数を記述します。
• Turbopack コマンド：next.config.js で有効にし、next dev を実行するとイテレーションが高速化します。

統合に関する注意

Prisma を介して PostgreSQL などのデータベースを統合します。@prisma/client をインストールし、npx prisma migrate dev を実行してから、接続文字列用の環境変数 $DATABASE_URL を使ってサーバーアクション内で使用します。認証には NextAuth.js を使います。next-auth をインストールして [...nextauth].js で設定し、.env に $NEXTAUTH_SECRET を設定します。例：import NextAuth from 'next-auth'; export default NextAuth({ providers: [] })。vercel.json に { "routes": [{ "src": "/api/(.*)", "dest": "/api/$1" }] } を追加して、Vercel と連携し CI/CD を設定します。API キーが必要な場合は、$STRIKE_API_KEY などの環境変数として保存し、コンポーネント内で process.env.STRIKE_API_KEY を使ってアクセスします。

エラー処理

404 エラーを処理するには、カスタムページとして app/404.js を作成します。例：export default function NotFound() { return

404 - Page Not Found