チャプター13

Metadata

ページのメタデータを変更したい場合はどうすればよいでしょうか？例えば、<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 ファイルを開き、ファイルの先頭に Head のインポートを next/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>
    </>
  );
}

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

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

<html> タグをカスタマイズしたい場合、例えば lang 属性を追加したい場合は、pages/_document.js ファイルを作成することで実現できます。詳細については、カスタム Document のドキュメントを参照してください。

Metadata

first-post.js に Head を追加

チャプターを完了しました。13

`first-post.js` に `Head` を追加