NextJSにおけるコンテンツからの静的メタデータの受け渡し

それでは、各URLに対して独自のメタデータを設定する方法を学びましょう。 そのためには、サイトのコンテンツファイルからメタデータオブジェクトをエクスポートする必要があります。

どのように行われるか見てみましょう。 サイトコンテンツを持つコンポーネントがあるとします：

src/app/test/page.jsxexport default function Test() {
  return <h1>test component</h1>;
}

コンテンツファイルに対応するURLのメタデータを設定しましょう：

src/app/test/page.jsxexport const metadata = {
  title: 'My Test page',
  description: 'Description for test page.',
}

export default function Test() {
  return <h1>test component</h1>;
}