NextJS でコンテンツから動的にメタデータを渡す方法

前回のレッスンでは、サイトコンテンツでメタデータを設定する方法を学びました。この方法は優れていますが、常に適用できるわけではありません。ページのメタデータは、動的ルートのパラメータに応じて変化する可能性があるためです。

例を見てみましょう。ユーザーの id を表示するコンテンツファイルがあるとします。このファイルにはユーザーの配列があります：

let users = [
	'user1',
	'user2',
	'user3',
	'user4',
	'user5',
];

渡されたパラメータに対応するユーザーデータを表示してみましょう：

export default function User({ params }) {
	return <>
		<h1>user {params.id}</h1>
		<p>
			name: {users[params.id]}
		</p>
	</>;
}

さて、問題に戻りましょう。異なるユーザーを表示しているため、彼らのメタデータも異なる必要があります。パラメータの値に応じて、メタデータを動的に生成する必要があります。

これは、コンポーネントからエクスポートする必要がある特別な関数 generateMetadata を使用して行います：

export const generateMetadata = () => {
	return {
		title: '',
		description: '',
	};
};

この関数内では、ルートパラメータにアクセスできます：

export const generateMetadata = ({params}) => {
	console.log(params);
};

パラメータの値に基づいて適切なメタデータを返すようにしてみましょう：

export const generateMetadata = ({params}) => {
	return {
		title: `Page for user {params.id}`,
		description: `Description for user "{users[params.id]}"`,
	};
};

/post/:id という形式のアドレスを処理するルートを作成してください。ここで :id は任意の数値に置き換えることができます。

次の配列が与えられています：

let posts = [
	{
		id: '1',
		title: 'post 1',
		desc: 'description for post 1',
		text: 'text1 text1 text1 text1 text1 text1 text1 text1',
	},
	{
		id: '2',
		title: 'post 2',
		desc: 'description for post 2',
		text: 'text2 text2 text2 text2 text2 text2 text2 text2',
	},
	{
		id: '3',
		title: 'post 3',
		desc: 'description for post 3',
		text: 'text3 text3 text3 text3 text3 text3 text3 text3',
	},
];

export default function Post() {
	
}

指定されたIDに基づいて、対応する投稿のレイアウトが表示され、正しいタイトルとメタ説明が設定されるようにしてください。