📄

Next.js(App Router) ページタイトルをURLパラメータに基づいて動的に設定する

2023/12/16に公開

Next.js

App Router

tech

Next.js(App Router) で動的な値に基づいてメタデータを生成するための'generateMetadata'関数を使用します。
▼ドキュメント

実装例

import IconCustomizer from '@/app/components/IconCustomizer';

type PageProps = { 
  params: { id: string }
};

export function generateMetadata({ params }: PageProps) {
  const id = params.id;
  return {
    title: `アイコンページ：${id}`,
  }
}

const Page = ({ params }: PageProps) => {
  return <IconCustomizer params={params}/>
}

export default Page;

generateMetadata関数の引数で、URLパラメータを指定しそれをtitleに設定しています。

実装例

Discussion