チャプター13

メタデータ

<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>を変更できます。

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

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

/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>
    </>
  );
}

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

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

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

メタデータ

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

チャプター完了13

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