Next.js 本番前チェックリスト

priority 属性を LCP 要素（ヒーロー画像など）に付ける。width/height を指定して CLS を防ぐ。

フォントのサブセット指定（subsets: ["latin", "latin-ext"]）でファイルサイズを削減。

データ取得・静的コンテンツは Server Component で。バンドルサイズに影響する。

import dynamic from "next/dynamic" を使い、loading プロパティでフォールバックを指定。

Chrome DevTools > Lighthouse タブ、または PageSpeed Insights で計測。

// next.config.ts
async headers() {
  return [{
    source: '/(.*)',
    headers: [
      { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
      { key: 'X-Content-Type-Options', value: 'nosniff' },
      { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
    ],
  }];
}

NEXT_PUBLIC_ がついた変数はバンドルに含まれブラウザで見えることを意識する。

zodのschema.parse() や schema.safeParse() で型と値の両方を検証する。

カスタム Route Handler でフォーム送信を受け取る場合は Origin ヘッダーの確認が必要。

どうしても必要な場合は dompurify でサニタイズしてから使う。

title は 50〜60文字、description は 150〜160文字が推奨。

og:image の推奨サイズは 1200×630px。

動的ルートは generateSitemaps() で全パスを列挙する。

<script type="application/ld+json"> タグで head に追加する。

next/image の alt は必須プロパティなので書き忘れない。

onClick のみのカスタム要素には role と onKeyDown も追加する。

カラーコントラスト比は WCAG AA 基準（4.5:1 以上）を満たす。

axe DevTools 拡張機能で詳細な問題点を特定できる。

"use client" が必須。reset() でリトライボタンも実装する。

notFound() 関数を呼ぶと not-found.tsx が表示される。

Server Actions のエラーは return { error: "..." } で伝える（throw は避ける）。

.env.local は Git に含めない（.gitignore に追加済みか確認）。

CI に npm run build を含めると自動で検出できる。

npm audit fix で修正可能なものは自動修正。

LCP ≤ 2.5s・INP ≤ 200ms・CLS ≤ 0.1 を目標にする。