Next.jsでhead内に記述するタグを検証した話。

投稿日：2025年7月30日

Reactもこなれてきたので次のステップとしてNext.js を習得し始めました。
Next.js とはVercel社が開発したReactのフレームワークです。
Reactとは異なり、
・複数ページを持つこと（ルーティング）が簡単。
・SSR(Server-side rendering) や、SSG(Static site generation) などのレンダリング方式がある。
・SEO対策が簡単。
などの特徴があります。
まだ仕事ではNext.js を使ったことはありませんが、勉強も含め、以下のようなサイトを作ってみました。

▲クリックで遷移します。
グローバルナビゲーションはレスポンシブに対応してます。
プルダウン式のメインメニュー、サブメニュー。ハンバーガーメニューを含め、全てフルスクラッチで作成しました。

技術的なことなど色々と紹介したいのですが、今回はhead内に記述したタグを取り上げてみたいと思います。

Next.jsをインストールするとsrc > app に、layout.tsxという各ページ共通のjsが作成されます。
ReactでいうApp.jsみたいなものです。
.tsxはTypeScriptの拡張子になります。
Next.jsインストール時「TypeScriptを使用する」を選択した場合.tsxのファイルが作成されます。
以下がインストールしたてのlayout.tsxになります。

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${geistSans.variable} ${geistMono.variable}`}>
        {children}
      </body>
    </html>
  );
}

▲2行目、Google Fontsをインポート。Geist, Geist_Mono の2つのフォントが設定されています。
5〜13行目でオブジェクトとして変数を設定し、27行目でクラス値として代入しています。
15〜18行目でmetadataを設定します。

カスタマイズします。

import type {Metadata} from "next";
import {Noto_Sans_JP} from "next/font/google";
import {GoogleTagManager} from "@next/third-parties/google";

const notoSansJP = Noto_Sans_JP({subsets: ["latin"], weight: ["400"]});

export const metadata: Metadata = {
  title: "大澤デザイン事務所",
  description:
    "大澤デザイン事務所では、Web制作や動画作成を行ってます。Chiba WordPress Meetup 共同オーガナイザー保有資格はDTPエキスパート、クロスメディア・エキスパート、ウェブ解析士趣味はWordPress、写真、カメラ、お酒、星が好き。たまに山登ってます。",
  openGraph: {
    title: "大澤デザイン事務所",
    description:
      "大澤デザイン事務所では、Web制作や動画作成を行ってます。Chiba WordPress Meetup 共同オーガナイザー保有資格はDTPエキスパート、クロスメディア・エキスパート、ウェブ解析士趣味はWordPress、写真、カメラ、お酒、星が好き。たまに山登ってます。",
    url: "https://onebitious.net/next_test",
    siteName: "大澤デザイン事務所",
    images: [
      {
        url: "https://onebitious.net/next_test/images/ogp.webp",
        width: 1200,
        height: 630,
      },
    ],
    locale: "ja_JP",
    type: "website",
  },
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ja">
      <body className={notoSansJP.className}>
        <GoogleTagManager gtmId="GTM-XXXXXXX" />
        {children}
      </body>
    </html>
  );
}

▲2行目でNoto Sans Japaneseをインポートします。
3行目。Googleタグマネージャーをインポートします。
Googleタグマネージャーを使用する場合、

npm install @next/third-parties@latest next@latest

上記npmコマンドで@next/third-partiesパッケージをインストール必要があります。

37行目、タグマネージャーのIDを記述しコンポーネントとして配置します。
7〜27行目がmetadata。その内の11〜26行目がOGP設定になります。

buildし本番環境にデプロイしたものが以下になります。
Meta(旧Facebook)だけではなく、X(旧Twitter)のOGP設定も出力されます。

▲想定通りのmetaタグが出力されました。

▲Google Fonts(Noto Sans Japanese)も適用されています。

▲GoogleタグマネージャーでAnalyticsを設定したので、こちらも取得できています。

まとめ

Next.js
書籍やオンラインスクール、ブログなどを参考に独学しました。
頑張った結果、思ったよりも簡単に作ることができました。

ただ、フルスクラッチで作ったグローバルナビゲーションのロジックにはかなり苦労しました。
PCサイズではhoverでのプルダウン展開。
スマホサイズではhoverを無効化し、クリックするとページ遷移するのではなく、プルダウン展開するロジック。
などなど、ロジック分のstateを準備し、各メニューへの三項演算子の実装などなど。。。
メンドくさっ！

この辺は次回以降に取り上げたいと思います。

最後まで読んでいただき、ありがとうございました。

Reactの記事