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

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

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

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

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

export const metadata = {
	title: 'My Test page',
	description: 'Description for test page.',
}

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

あなたのサイトに3つのページを作成してください： /about, /price, /contacts。これらのページに何らかのテキストを追加してください。各ページに対して独自のメタデータを作成してください。