Next.js の Route Segment Config について

2023年12月22日 09:33

こんにちはフクロウラボでフロントエンドエンジニアをしている今泉です。

フクロウラボのフロントエンド開発では、Next.js を採用しており、Circuit X というインターネットにおける広告配信サービスの管理画面を開発しています。

最近 Next.js の app ディレクトリで使用可能な、Route Segment Config を使用する機会があり学びになったので、今回いくつかピックアップして記事にしようと思います。

Route Segment Configとは

まずは公式の引用から。

The Route Segment options allows you configure the behavior of a Page, Layout, or Route Handler by directly exporting the following variables:
> ルートセグメントオプションを使用すると、ページ、レイアウトの動作を構成できます。またはルートハンドラーを使用するには、次の変数を直接エクスポートします。

それぞれデフォルトの値は以下になっています。

export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'
export const maxDuration = 5

ページでこれらをエクスポートすることで、さまざまな挙動を制御することができる機能です。

dynamic

ページの動的動作を指定します。

auto: デフォルト値。コンポーネントが動的動作を選択することを妨げないと記載のある通りです。

force-dynamic: 動的レンダリングを強制しますと記載があるように、リクエスト時にサーバーサイドでのみページが生成されます。
このオプションは、getServerSideProps() と同等です。

error: ページが動的関数またはキャッシュされていないデータを使用している場合、エラーを発生させて静的レンダリングを強制し、データをキャッシュします。
従来の getStaticProps と同等と記載があるため、ビルド時に動的データを取得し静的にページを生成をし、リクエスト時にはキャッシュを返すという挙動になります。
fetch でデータを取得している場合、リクエストのオプションが { cache: 'force-cache' } になるようです。
また、fetchCache = 'only-cache', dynamicParams = false でオーバーライドすると記載があります。
このオーバーライドによって、リクエスト時にはビルド時のキャッシュを用い、ビルド時に静的に生成した動的なルートセグメントに含まれないパスは 404 を返すという挙動になります。

dynamicParams

generateStaticParams で生成されない動的なルートセグメントにアクセスする際の挙動を制御します。コードで例を書いてみました。

true: 動的なルートセグメントにアクセスした際はリクエスト時のオンデマンドでレンダリングされます。

export const dynamicParams = true;

export type PageProps = {
  params: {
    slug: string;
  };
};

export async function generateStaticParams() {
  // [{ slug: "1" }, { slug: "2" }];
  const posts = await fetch("https://xxx").then((res) => res.json());
  
  return posts.map(({ slug }) => ({slug}));
}

export default function Page({ params }: PageProps): JSX.Element {
  const { slug } = params;
  
  // /page/1 または /page/2 はビルド時に静的に生成される
  // /page/3 にアクセスした場合はリクエスト時に生成される
  return <>page</>;
}

false: ビルド時に生成されない動的なルートセグメントにアクセスした場合404を返します。

export const dynamicParams = false;

export type PageProps = {
  params: {
    slug: string;
  };
};

export async function generateStaticParams() {
  //[{ slug: "1" }, { slug: "2" }]
  const posts = await fetch("https://xxx").then((res) => res.json());
  
  return posts.map(({ slug }) => ({slug}));
}

export default function Page({ params }: PageProps): JSX.Element {
  const { slug } = params;
  
  // /page/3 にアクセスした場合は 404
  return <>page</>;
}

revalidate

ページの動的データの再検証を制御します。従来、ページを ISR で組みたい場合に getStaticProps でキャッシュの保持時間を設定していたと思いますが、app ディレクトリではこのオプションを使用できます。

false: デフォルト値。データはキャッシュされページは再検証されません。

0 : ページは常にリクエスト時に動的に生成され、ビルド時には生成されません。

number: 設定した再検証時間の間隔（秒単位）で、ページの動的データはキャッシュをリフレッシュします。

今回はページ単位で挙動を制御できる機能をピックアップして記事にしましたが、触れてない他のオプションについても機会があればまとめようと思います。
簡単な説明になりましたが、最後までお付き合いいただきありがとうございました。