"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { blockquote: "blockquote", code: "code", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Vercelは、Next.jsの開発元であるVercel社が提供するフロントエンド特化のホスティングプラットフォームです。GitリポジトリをつなぐだけでCI/CDが自動構築され、CDN・サーバーレス関数・Edge Networkが統合された環境をすぐに使えます。この記事では、Vercelを使ったNext.jsアプリ開発を最大限に活かすベストプラクティスを体系的に解説します。" }), "\n", _jsx(_components.h2, { children: "1. レンダリング戦略の選び方" }), "\n", _jsx(_components.p, { children: "Next.jsはページごとにレンダリング方式を選択できます。Vercelの性能を最大限引き出すには、各ページの特性に合った方式を選ぶことが重要です。" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "レンダリング方式" }), _jsx(_components.th, { children: "ビルド時/リクエスト時" }), _jsx(_components.th, { children: "適したコンテンツ" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "SSG" }) }), _jsx(_components.td, { children: "ビルド時に静的生成" }), _jsx(_components.td, { children: "更新頻度の低いページ（About、LP）" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "ISR" }) }), _jsx(_components.td, { children: "ビルド後も定期再生成" }), _jsx(_components.td, { children: "ブログ、商品ページ" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "SSR" }) }), _jsx(_components.td, { children: "リクエストごとに生成" }), _jsx(_components.td, { children: "ユーザー固有のデータ" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "CSR" }) }), _jsx(_components.td, { children: "クライアントで動的取得" }), _jsx(_components.td, { children: "認証後のダッシュボード" })] })] })] }), "\n", _jsx(_components.h3, { children: "SSG（静的生成）— 最速の選択肢" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// app/about/page.tsx\n// デフォルトでSSG。データ取得もビルド時に実行される。\nexport default async function AboutPage() {\n const data = await fetch('https://api.example.com/about', {\n cache: 'force-cache', // キャッシュを強制（デフォルト動作）\n });\n const content = await data.json();\n\n return

{content.body}

;\n}\n" }) }), "\n", _jsx(_components.h3, { children: "ISR（インクリメンタル静的再生成）" }), "\n", _jsxs(_components.p, { children: ["更新頻度はあるが、リアルタイム性が必須でないコンテンツに最適です。VercelのCDNにキャッシュされ、", _jsx(_components.code, { children: "revalidate" }), " 秒ごとにバックグラウンドで再生成されます。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// app/blog/[slug]/page.tsx\nexport const revalidate = 60; // 60秒ごとに再検証\n\nexport default async function BlogPost({ params }: { params: { slug: string } }) {\n const post = await fetch(`https://api.example.com/posts/${params.slug}`, {\n next: { revalidate: 60 },\n });\n const data = await post.json();\n\n return (\n

{data.title}

{data.body}

\n );\n}\n\n// ビルド時に生成するパスを指定\nexport async function generateStaticParams() {\n const posts = await fetch('https://api.example.com/posts').then(r => r.json());\n return posts.map((post: { slug: string }) => ({ slug: post.slug }));\n}\n" }) }), "\n", _jsx(_components.h3, { children: "On-demand Revalidation — 任意のタイミングで更新" }), "\n", _jsx(_components.p, { children: "CMSのWebhookと組み合わせることで、記事が更新されたタイミングだけキャッシュを破棄できます。" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// app/api/revalidate/route.ts\nimport { revalidatePath, revalidateTag } from 'next/cache';\nimport { NextRequest } from 'next/server';\n\nexport async function POST(req: NextRequest) {\n const secret = req.headers.get('x-revalidate-secret');\n\n // シークレットキーで不正なリクエストを弾く\n if (secret !== process.env.REVALIDATE_SECRET) {\n return Response.json({ error: 'Unauthorized' }, { status: 401 });\n }\n\n const { path, tag } = await req.json();\n\n if (path) revalidatePath(path); // 特定パスを再検証\n if (tag) revalidateTag(tag); // タグで管理されたキャッシュを再検証\n\n return Response.json({ revalidated: true });\n}\n" }) }), "\n", _jsx(_components.h3, { children: "SSR — リクエスト時に動的生成" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// app/dashboard/page.tsx\nimport { auth } from '@/lib/auth';\n\n// force-dynamic でSSRを強制\nexport const dynamic = 'force-dynamic';\n\nexport default async function DashboardPage() {\n const session = await auth();\n if (!session) redirect('/login');\n\n const data = await fetch(`https://api.example.com/users/${session.userId}/stats`, {\n cache: 'no-store', // キャッシュしない（毎回最新を取得）\n });\n const stats = await data.json();\n\n return ;\n}\n" }) }), "\n", _jsx(_components.h2, { children: "2. パフォーマンス最適化" }), "\n", _jsx(_components.h3, { children: "Edge Functionsの活用" }), "\n", _jsx(_components.p, { children: "Vercel Edge Functionsは、世界中のエッジノードで実行されるため、通常のサーバーレス関数より低レイテンシで動作します。認証チェックやA/Bテスト、リダイレクトなどに適しています。" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// middleware.ts（Edgeランタイムで動作）\nimport { NextResponse } from 'next/server';\nimport type { NextRequest } from 'next/server';\n\nexport function middleware(req: NextRequest) {\n const { pathname } = req.nextUrl;\n\n // 認証チェック\n const token = req.cookies.get('session-token');\n if (pathname.startsWith('/dashboard') && !token) {\n return NextResponse.redirect(new URL('/login', req.url));\n }\n\n // A/Bテスト\n const bucket = req.cookies.get('ab-bucket')?.value ?? (Math.random() > 0.5 ? 'a' : 'b');\n const res = NextResponse.next();\n res.cookies.set('ab-bucket', bucket);\n res.headers.set('x-ab-bucket', bucket);\n\n return res;\n}\n\nexport const config = {\n matcher: ['/dashboard/:path*', '/pricing'],\n};\n" }) }), "\n", _jsx(_components.h3, { children: "画像最適化" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "next/image" }), " を使うと、WebP変換・遅延読み込み・適切なサイズの配信をVercelが自動で行います。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import Image from 'next/image';\n\n// 固定サイズの画像\n\n\n// レスポンシブ画像（fill + sizes を組み合わせる）\n

\n \n

\n" }) }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "ポイント:" }), " ", _jsx(_components.code, { children: "sizes" }), " 属性を正しく指定することで、必要以上に大きな画像を配信しないようになります。LCPに影響する画像には ", _jsx(_components.code, { children: "priority" }), " を必ず付けましょう。"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "キャッシュ制御" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// app/api/products/route.ts\nexport async function GET() {\n const products = await db.product.findMany();\n\n return Response.json(products, {\n headers: {\n // 10分間CDNキャッシュ、その後60秒間はstale-while-revalidate\n 'Cache-Control': 'public, s-maxage=600, stale-while-revalidate=60',\n },\n });\n}\n" }) }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "ディレクティブ" }), _jsx(_components.th, { children: "説明" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "public" }) }), _jsx(_components.td, { children: "CDNキャッシュを許可" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "s-maxage=N" }) }), _jsx(_components.td, { children: "CDNのキャッシュ有効期間（秒）" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "max-age=N" }) }), _jsx(_components.td, { children: "ブラウザのキャッシュ有効期間（秒）" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "stale-while-revalidate=N" }) }), _jsx(_components.td, { children: "期限切れ後もN秒間は古いキャッシュを返しながらバックグラウンドで更新" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "no-store" }) }), _jsx(_components.td, { children: "キャッシュを一切しない" })] })] })] }), "\n", _jsx(_components.h3, { children: "Vercel Speed Insights" }), "\n", _jsx(_components.p, { children: "VercelはCore Web Vitalsをリアルユーザーのデータで収集できます。" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// app/layout.tsx\nimport { SpeedInsights } from '@vercel/speed-insights/next';\nimport { Analytics } from '@vercel/analytics/react';\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n \n \n {children}\n \n \n \n \n );\n}\n" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm install @vercel/speed-insights @vercel/analytics\n" }) }), "\n", _jsx(_components.p, { children: "監視すべき主要指標:" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "指標" }), _jsx(_components.th, { children: "意味" }), _jsx(_components.th, { children: "目標値" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "LCP" }) }), _jsx(_components.td, { children: "Largest Contentful Paint（主要コンテンツの表示速度）" }), _jsx(_components.td, { children: "2.5秒以下" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "CLS" }) }), _jsx(_components.td, { children: "Cumulative Layout Shift（レイアウトのずれ）" }), _jsx(_components.td, { children: "0.1以下" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "INP" }) }), _jsx(_components.td, { children: "Interaction to Next Paint（操作の応答速度）" }), _jsx(_components.td, { children: "200ms以下" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: "TTFB" }) }), _jsx(_components.td, { children: "Time to First Byte（サーバー応答速度）" }), _jsx(_components.td, { children: "800ms以下" })] })] })] }), "\n", _jsx(_components.h2, { children: "3. デプロイ戦略" }), "\n", _jsx(_components.h3, { children: "ブランチとデプロイ環境のマッピング" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "main → production（本番） https://myapp.com\nstaging → preview（ステージング） https://staging.myapp.com\nfeature/* → preview（PR確認用） https://myapp-git-feature-xxx.vercel.app\n" }) }), "\n", _jsxs(_components.p, { children: ["Vercelのダッシュボードで「Production Branch」を ", _jsx(_components.code, { children: "main" }), " に設定し、それ以外のブランチはすべてPreview Deploymentとして扱います。"] }), "\n", _jsx(_components.h3, { children: "Preview Deploymentsの活用" }), "\n", _jsx(_components.p, { children: "PRを出すたびに自動でプレビューURLが生成されます。GitHub ActionsでPRコメントにURLを投稿する設定を組み合わせると、レビュワーがすぐに動作確認できます。" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-yaml", children: "# .github/workflows/preview-comment.yml\nname: Comment Preview URL\n\non:\n pull_request:\n types: [opened, synchronize]\n\njobs:\n comment:\n runs-on: ubuntu-latest\n steps:\n - name: Wait for Vercel deployment\n uses: patrickedqvist/wait-for-vercel-preview@v1.3.1\n id: vercel-preview\n with:\n token: ${{ secrets.GITHUB_TOKEN }}\n max_timeout: 120\n\n - name: Comment on PR\n uses: actions/github-script@v7\n with:\n script: |\n github.rest.issues.createComment({\n issue_number: context.issue.number,\n owner: context.repo.owner,\n repo: context.repo.repo,\n body: `✅ プレビューURL: ${{ steps.vercel-preview.outputs.url }}`\n })\n" }) }), "\n", _jsx(_components.h3, { children: "ロールバック戦略" }), "\n", _jsx(_components.p, { children: "問題が発生した場合、Vercelダッシュボードから数クリックで前バージョンに戻せます。" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Vercelダッシュボード → プロジェクト → ", _jsx(_components.code, { children: "Deployments" }), " タブ"] }), "\n", _jsxs(_components.li, { children: ["戻したいデプロイメントの ", _jsx(_components.code, { children: "..." }), " メニューを開く"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "Redeploy" }), " を選択"] }), "\n"] }), "\n", _jsx(_components.p, { children: "CLIからも可能です:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx vercel rollback [deployment-url]\n" }) }), "\n", _jsx(_components.h3, { children: "Vercel CLIによるデプロイ" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# インストール\nnpm install -g vercel\n\n# ログイン\nvercel login\n\n# プレビューデプロイ\nvercel\n\n# 本番デプロイ\nvercel --prod\n\n# 環境変数の確認\nvercel env ls\n\n# ローカルで本番環境をエミュレート\nvercel dev\n" }) }), "\n", _jsx(_components.h2, { children: "4. 環境変数の管理" }), "\n", _jsx(_components.h3, { children: "環境変数の種類と使い分け" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# サーバーサイドのみ（シークレット）\nDATABASE_URL=postgresql://...\nSTRIPE_SECRET_KEY=sk_live_...\nOPENAI_API_KEY=...\n\n# クライアントサイドでも使用可能（公開情報のみ）\nNEXT_PUBLIC_API_BASE_URL=https://api.myapp.com\nNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...\n" }) }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "注意:" }), " ", _jsx(_components.code, { children: "NEXT_PUBLIC_" }), " が付いた環境変数はブラウザのJavaScriptバンドルに含まれ、誰でも見られます。シークレットキーには絶対に使用しないでください。"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "ファイル構成" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: ".env # デフォルト（全環境共通・Gitに含めてOK）\n.env.local # ローカル開発用（Gitに含めない）\n.env.development # 開発環境用（Gitに含めてOK）\n.env.production # 本番環境用（Gitに含めない）\n.env.example # キー名のテンプレート（Gitに含める・値は空）\n" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# .env.example\nDATABASE_URL=\nSTRIPE_SECRET_KEY=\nNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=\nNEXT_PUBLIC_API_BASE_URL=\nREVALIDATE_SECRET=\n" }) }), "\n", _jsx(_components.h3, { children: "@t3-oss/env-nextjs による型安全な環境変数管理" }), "\n", _jsx(_components.p, { children: "環境変数の型チェックとバリデーションをビルド時に行います。" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// env.ts\nimport { createEnv } from '@t3-oss/env-nextjs';\nimport { z } from 'zod';\n\nexport const env = createEnv({\n server: {\n DATABASE_URL: z.string().url(),\n STRIPE_SECRET_KEY: z.string().min(1),\n REVALIDATE_SECRET: z.string().min(32),\n },\n client: {\n NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string().min(1),\n NEXT_PUBLIC_API_BASE_URL: z.string().url(),\n },\n runtimeEnv: {\n DATABASE_URL: process.env.DATABASE_URL,\n STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,\n REVALIDATE_SECRET: process.env.REVALIDATE_SECRET,\n NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,\n NEXT_PUBLIC_API_BASE_URL: process.env.NEXT_PUBLIC_API_BASE_URL,\n },\n});\n" }) }), "\n", _jsx(_components.h2, { children: "5. セキュリティ対策" }), "\n", _jsx(_components.h3, { children: "APIルートの保護" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// app/api/admin/route.ts\nimport { auth } from '@/lib/auth';\nimport { NextRequest } from 'next/server';\n\nexport async function GET(req: NextRequest) {\n // 認証チェック\n const session = await auth();\n if (!session || session.user.role !== 'admin') {\n return Response.json({ error: 'Forbidden' }, { status: 403 });\n }\n\n // 処理...\n}\n" }) }), "\n", _jsx(_components.h3, { children: "レートリミット" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// lib/rate-limit.ts\nimport { Ratelimit } from '@upstash/ratelimit';\nimport { Redis } from '@upstash/redis';\n\nexport const ratelimit = new Ratelimit({\n redis: Redis.fromEnv(),\n limiter: Ratelimit.slidingWindow(10, '10 s'), // 10秒で10リクエスト\n});\n\n// app/api/contact/route.ts\nimport { ratelimit } from '@/lib/rate-limit';\n\nexport async function POST(req: NextRequest) {\n const ip = req.headers.get('x-forwarded-for') ?? 'anonymous';\n const { success, remaining } = await ratelimit.limit(ip);\n\n if (!success) {\n return Response.json(\n { error: 'リクエストが多すぎます。しばらく待ってから再試行してください。' },\n { status: 429, headers: { 'X-RateLimit-Remaining': String(remaining) } }\n );\n }\n\n // 処理...\n}\n" }) }), "\n", _jsx(_components.h3, { children: "セキュリティヘッダーの設定" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// next.config.ts\nimport type { NextConfig } from 'next';\n\nconst securityHeaders = [\n { key: 'X-DNS-Prefetch-Control', value: 'on' },\n { key: 'X-Frame-Options', value: 'SAMEORIGIN' },\n { key: 'X-Content-Type-Options', value: 'nosniff' },\n { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },\n {\n key: 'Permissions-Policy',\n value: 'camera=(), microphone=(), geolocation=()',\n },\n {\n key: 'Content-Security-Policy',\n value: [\n \"default-src 'self'\",\n \"script-src 'self' 'unsafe-eval' 'unsafe-inline'\",\n \"style-src 'self' 'unsafe-inline'\",\n \"img-src 'self' data: https:\",\n \"font-src 'self'\",\n \"connect-src 'self' https://api.example.com\",\n ].join('; '),\n },\n];\n\nconst config: NextConfig = {\n async headers() {\n return [\n {\n source: '/:path*',\n headers: securityHeaders,\n },\n ];\n },\n};\n\nexport default config;\n" }) }), "\n", _jsx(_components.h3, { children: "CORS設定" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// app/api/public/route.ts\nconst allowedOrigins = [\n 'https://myapp.com',\n 'https://www.myapp.com',\n ...(process.env.NODE_ENV === 'development' ? ['http://localhost:3000'] : []),\n];\n\nexport async function GET(req: NextRequest) {\n const origin = req.headers.get('origin') ?? '';\n const isAllowed = allowedOrigins.includes(origin);\n\n const headers: HeadersInit = {\n 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',\n 'Access-Control-Allow-Headers': 'Content-Type, Authorization',\n ...(isAllowed && { 'Access-Control-Allow-Origin': origin }),\n };\n\n return Response.json({ data: '...' }, { headers });\n}\n\n// OPTIONSリクエスト（プリフライト）への対応\nexport async function OPTIONS(req: NextRequest) {\n return new Response(null, { status: 204, headers: { /* 上記と同じ */ } });\n}\n" }) }), "\n", _jsx(_components.h3, { children: "Vercelデフォルトドメインの無効化" }), "\n", _jsxs(_components.p, { children: ["本番環境では ", _jsx(_components.code, { children: "*.vercel.app" }), " のURLへのアクセスをブロックし、カスタムドメインのみ許可します。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// middleware.ts\nexport function middleware(req: NextRequest) {\n const host = req.headers.get('host') ?? '';\n\n // vercel.appドメインへのアクセスをカスタムドメインにリダイレクト\n if (host.endsWith('.vercel.app') && process.env.NODE_ENV === 'production') {\n return NextResponse.redirect(`https://myapp.com${req.nextUrl.pathname}`);\n }\n\n return NextResponse.next();\n}\n" }) }), "\n", _jsx(_components.h2, { children: "6. 開発フロー" }), "\n", _jsx(_components.h3, { children: "推奨ブランチ戦略" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "main ← 本番環境（直接pushしない）\n └─ staging ← ステージング（本番前の最終確認）\n └─ feature/xxx ← 機能開発\n └─ fix/xxx ← バグ修正\n" }) }), "\n", _jsx(_components.h3, { children: "GitHub Actions によるCI/CD" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-yaml", children: "# .github/workflows/ci.yml\nname: CI\n\non:\n push:\n branches: [main, staging]\n pull_request:\n branches: [main, staging]\n\njobs:\n lint-and-type-check:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: actions/setup-node@v4\n with:\n node-version: 22\n cache: 'npm'\n\n - run: npm ci\n - run: npm run lint\n - run: npx tsc --noEmit\n\n test:\n runs-on: ubuntu-latest\n needs: lint-and-type-check\n steps:\n - uses: actions/checkout@v4\n - uses: actions/setup-node@v4\n with:\n node-version: 22\n cache: 'npm'\n\n - run: npm ci\n - run: npm test -- --passWithNoTests\n" }) }), "\n", _jsx(_components.h3, { children: "ローカル開発の推奨設定" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# vercel dev でEdge Middlewareを含むローカル動作確認\nvercel dev\n\n# 型チェック（ウォッチモード）\nnpx tsc --noEmit --watch\n\n# Lint自動修正\nnpm run lint -- --fix\n" }) }), "\n", _jsx(_components.h2, { children: "まとめ" }), "\n", _jsx(_components.p, { children: "Vercelを最大限に活用するための要点をまとめます。" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "パフォーマンス:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "コンテンツの特性に合わせてSSG・ISR・SSRを使い分ける" }), "\n", _jsx(_components.li, { children: "On-demand Revalidationでキャッシュを柔軟に管理する" }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "next/image" }), " の ", _jsx(_components.code, { children: "sizes" }), " と ", _jsx(_components.code, { children: "priority" }), " を正しく設定する"] }), "\n", _jsx(_components.li, { children: "Speed InsightsでCore Web Vitalsを継続的に監視する" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "デプロイ:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "PRごとのPreview Deploymentでレビュー効率を上げる" }), "\n", _jsx(_components.li, { children: "ロールバックの手順をチームで共有しておく" }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "vercel dev" }), " でローカルとVercel環境の差異を最小化する"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "セキュリティ:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "NEXT_PUBLIC_" }), " はパブリックな値のみに使用する"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "@t3-oss/env-nextjs" }), " で環境変数を型安全に管理する"] }), "\n", _jsx(_components.li, { children: "セキュリティヘッダーとレートリミットを必ず設定する" }), "\n", _jsxs(_components.li, { children: ["本番では ", _jsx(_components.code, { children: "*.vercel.app" }), " をカスタムドメインにリダイレクトする"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["特に ", _jsx(_components.strong, { children: "ISR + On-demand Revalidation・Edge Middleware・Preview Deployments" }), " の組み合わせは、パフォーマンスと開発効率を同時に向上させる強力な手段です。"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Vercel を活用したアプリ開発のベストプラクティス