Next.jsでタイトルタグをページごとに変える方法

Next.js でページごとに <title> タグを変更するには、<Head> コンポーネントを使用します。

<Head> コンポーネントは、Next.js にデフォルトで組み込まれており、ページの <head> 要素内にコンテンツを追加するためのものです。

以下は、Next.js の <Head> コンポーネントを使用して、ページごとに <title> タグを変更する手順です。

  1. next/head から <Head> コンポーネントをインポートします。
  2. そのページのコンポーネント内で <Head> コンポーネントを使用し、<title> タグの内容を設定します。

// pages/index.js
import Head from 'next/head';

export default function HomePage() {
return (
<div>
  <Head>
    <title>ホームページのタイトル</title>
  </Head>
  <p>これはホームページです。</p>
</div>
);
}





// pages/about.js
import Head from 'next/head';

export default function AboutPage() {
  return (
    <div>
      <Head>
        <title>アバウトページのタイトル</title>
      </Head>
      <p>これはアバウトページです。</p>
    </div>
  );
}

上記の方法で、それぞれのページごとに <title> タグの内容をカスタマイズできます。

category cloud