<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>
</>
);
}
https://:3000/posts/first-postにアクセスしてみてください。ブラウザのタブに「First Post」と表示されるはずです。ブラウザの開発者ツールを使用すると、titleタグが<head>に追加されていることが確認できます。
Headコンポーネントの詳細については、next/headのAPIリファレンスを参照してください。
<html>タグをカスタマイズしたい場合（たとえば、lang属性を追加する場合など）、pages/_document.jsファイルを作成することで実行できます。詳細については、カスタムDocumentのドキュメントを参照してください。