【備忘録】Next.js（App Router）でメタデータを設定する

環境

next: v14.2.3

設定方法

Next.js（App Router）では、メタデータを設定する方法として静的および動的な設定方法が用意されている。
これら実装方法について、簡単な例を交えて残す。

1. 静的な設定（オブジェクトmetadata）

Pageファイル、またはRoot Layoutファイルにて、オブジェクトmetadataをエクスポートすることで、簡単に静的なメタデータを設定可能。
下記例は、ページのタイトルを設定している。

page.tsx

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Qiita',
};

export default function Page() {
  return (
    // 省略
  );
}

2. 動的な設定（関数generateMetadata）

動的な情報（現在のルートパラメータや外部情報、親セグメントのmetadataなど）を利用して、Metadataオブジェクトをエクスポートすることで、メタデータを動的に設定可能。
下記例は外部から取得したタイトルを設定している。

page.tsx

import type { Metadata } from 'next';

export async function generateMetadata(): Promise<Metadata> {
  const fetchedTitle = await fetch('https://...')
    .then((res) => res.json())
    .then((json: { title: string }) => json.title);

  return {
    title: fetchedTitle,
  };
}

export default function Page() {
  return (
    // 省略
  );
}

3. 実装時の注意

• オブジェクトmetadata と関数generateMetadata はサーバーコンポーネントのみサポートされている。
• 一つのRoute Segmentでオブジェクトmetadata と関数generateMetadata を両方エクスポートできない。どちらか一方のみ実装する必要がある。

参考文献