【Next.js】App Routerでメタタグを設定する方法

2024年9月23日

Next.jsのApp Routerでメタタグを設定する方法を解説します。

新しいApp Routerは、従来のpagesディレクトリを使用する方法とはいくつか違いがあり、設定方法が少し変わっています。

旧`pages`ディレクトリでのメタタグ設定

以前のNext.js（pagesディレクトリを使う方法）では、各ページのメタタグは<Head>コンポーネントを使用して設定していました。pagesディレクトリの中のコンポーネントファイルに以下のように記述していました：

import Head from 'next/head';

function Home() {
  return (
    <>
      <Head>
        <title>My Page</title>
        <meta name="description" content="This is my homepage" />
      </Head>
      <h1>Welcome to My Page</h1>
    </>
  );
}

export default Home;

App Routerでのメタタグ設定

新しいApp Routerでは、メタタグの設定が「ページ単位」ではなく、「レイアウトファイル」で管理できるようになりました。具体的には、appディレクトリの中にあるlayout.jsやpage.jsで設定します。

`layout.js` での設定

App Routerでは、ページ全体に共通するメタタグはlayout.jsに設定します。例えば、全ページで共通のタイトルやメタ情報を設定したい場合は、次のように行います：

export const metadata = {
  title: 'My Awesome Website',
  description: 'This is a description for the entire site',
};

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <head />
      <body>{children}</body>
    </html>
  );
}

`page.js` での設定

特定のページに固有のメタタグを設定したい場合は、そのページのpage.jsファイル内にメタ情報を追加します。例えば、特定のページだけ違うタイトルにしたい場合は、以下のようにします：

export const metadata = {
  title: 'About Us - My Awesome Website',
  description: 'Learn more about us on this page.',
};

export default function AboutPage() {
  return <h1>About Us</h1>;
}