🚀

【Next.js和訳】Going to Production

2021/10/02に公開約5,000字

この記事について

この記事は、Going to Productionの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

本番環境への移行

Next.js アプリケーションを本番環境に移行する前に、最高のユーザーエクスペリエンスを実現するための推奨事項をご紹介します。

一般的に

キャッシング

キャッシングは、レスポンスタイムを改善し、外部サービスへのリクエスト数を減らします。Next.js では、JavaScript、CSS、静止画像、その他のメディアを含む、/_next/staticから提供される immutable アセットに、キャッシングヘッダーを自動的に追加します。

Cache-Control: public, max-age=31536000, immutable

next.config.jsで設定されたCache-Controlヘッダーは、運用時には上書きされ、静的資産が効果的にキャッシュされるようになります。静的に生成されたページのキャッシュを再検証する必要がある場合は、ページのgetStaticProps関数でrevalidateを設定することで可能になります。next/image を使用している場合は、デフォルトの Image Optimization ローダー用の特定のキャッシングルールもあります。

Cache-Control: no-cache, no-store, max-age=0, must-revalidate

また、getServerSidePropsや API Routes の中にキャッシュ用のヘッダーを使用して、動的なレスポンスを得ることもできます。例えば、stale-while-revalidateを使用すると、次のようになります。

// この値は10秒間は新鮮であるとみなされます(s-maxage=10)。
// 次の10秒以内にリクエストが繰り返された場合、以前にキャッシュされた
// キャッシュされた値は新鮮なままです。59秒前にリクエストが繰り返された場合
// キャッシュされた値は古くなりますが、レンダリングは行われます(stale-while-revalidate=59)。
//
// バックグラウンドでは、キャッシュに新しい値を追加するための再検証リクエストが行われます。
// 新しい値をキャッシュに追加します。ページを更新すると、新しい値が表示されます。
export async function getServerSideProps({ req, res }) {
  res.setHeader("Cache-Control", "public, s-maxage=10, stale-while-revalidate=59")
  return {
    props: {},
  }
}

JavaScript のサイズ縮小

ブラウザに送信される JavaScript の量を減らすために、以下のツールを使って各 JavaScript バンドル内に何が含まれているかを把握することができます。

  • Import Cost - VSCode 内のインポートされたパッケージのサイズを表示します。
  • Package Phobia - あなたのプロジェクトに新しい dev の依存関係を追加するためのコストを見つけます。
  • Bundle Phobia - 依存関係がどれだけバンドルサイズを増加させるかを分析します。
  • Webpack Bundle Analyzer - Webpack の出力ファイルのサイズを、インタラクティブでズーム可能なツリーマップで視覚化します。

pages/ ディレクトリ内の各ファイルは、next build時に自動的に独自の JavaScript バンドルにコード分割されます。また、ダイナミックインポートを使用して、コンポーネントやライブラリをレイジーロードすることもできます。例えば、ユーザーが開くボタンをクリックするまでモーダルコードのロードを延期することができます。

ロギング

Next.js はクライアントとサーバーの両方で動作するため、複数の形式のロギングがサポートされています。

  • ブラウザ上でのconsole.log
  • サーバー上のstdout
    構造化されたロギングパッケージが必要であれば、Pinoをお勧めします。Vercel をお使いの場合は、Next.js と互換性のあるpre-built ロギングの統合機能が用意されています。

エラー処理

ハンドリングされない例外が発生した場合、500 ページでユーザーの体験をコントロールすることができます。Next.js のデフォルトテーマではなく、あなたのブランドに合わせてカスタマイズすることをお勧めします。

また、Sentry のようなツールを使って例外を記録し、追跡することもできます。この例では、Sentry SDK for Next.js を使って、クライアントサイドとサーバーサイドの両方でエラーをキャッチして報告する方法を紹介しています。また、Sentry は Vercel にも統合されています。

関連記事

次に何をすべきかの詳細については、以下のセクションをお勧めします。

https://nextjs.org/docs/deployment

Discussion

ログインするとコメントできます