Pages Router: メタデータ | Next.js

ページのメタデータ、例えば <title> HTMLタグを変更したい場合はどうすればよいでしょうか？

<title> は <head> HTMLタグの一部です。Next.jsページで <head> タグを変更する方法を見ていきましょう。

エディタで pages/index.js を開き、以下の行を見つけてください：

<Head>
  <title>Create Next App</title>
  <link rel="icon" href="/favicon.ico" />
</Head>

小文字の <head> ではなく <Head> が使用されていることに注意してください。<Head> はNext.jsに組み込まれたReactコンポーネントで、ページの <head> を変更することができます。

Head コンポーネントは next/head モジュールからインポートできます。

first-post.js に Head を追加する

/posts/first-post ルートにはまだ <title> を追加していません。追加してみましょう。

pages/posts/first-post.js ファイルを開き、ファイルの先頭で next/head から Head をインポートします：

import Head from 'next/head';

次に、エクスポートされている FirstPost コンポーネントを更新して Head コンポーネントを含めます。今のところは title タグだけを追加します：

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

http://localhost:3000/posts/first-post にアクセスしてみてください。ブラウザのタブに「First Post」と表示されるはずです。ブラウザの開発者ツールを使うと、<head> に title タグが追加されていることが確認できます。

Head コンポーネントについて詳しく知りたい場合は、next/head のAPIリファレンスを参照してください。

<html> タグをカスタマイズしたい場合（例えば lang 属性を追加するなど）は、pages/_document.js ファイルを作成することで可能です。詳しくはカスタム Document のドキュメントをご覧ください。

メタデータ

first-post.js に Head を追加する

On this page