🥷

nextjs/app routerのclient pageでmetadataを設定する

2023/06/15に公開

Next.js

tech

AppRouterまわり、ServerComponentの情報が多かったりして地味にハマったのでメモ.

下記のようなクライアントサイドレンダリングのページがあったときに、
/ と /sample の各ページに別々の <meta> タグを設定したい.

files

src/app/page.tsx
src/app/layout.tsx
src/app/sample/page.tsx
src/app/sample/layout.tsx
src/component/AppLayout.tsx

下記方法ではうまく行かなかった

<head/>に記載する (個別ページに適用できない)
next/headの<Head/> にかく (app routerでは利用できない)
page.tsxの中にmetadataを書く (ビルドで失敗する)

各ページのlayout.tsxにexport metadataを設定することでうまくいった.

src/component/AppLayout.tsx

import {Noto_Sans_JP} from "next/font/google";
import React from "react";

const font = Noto_Sans_JP({
  weight: '600',
  subsets: ['latin'],
})

export type AppLayoutProps = {
  children: React.ReactNode
}

export default function AppLayout({children}: AppLayoutProps) {
  return (
    <html lang="ja">
    <head />
    <body className={font.className}>{children}</body>
    </html>
  )
}

src/app/layout.tsx,src/app/sample/layout.tsx

import AppLayout from "@/app/common/componnet/global/AppLayout";
import React from "react";
import {Metadata} from "next";

export const metadata: Metadata = {
  title: "",
  description: "",
  keywords: "",
  openGraph: {
    type: "website",
    title: "",
    description: ",
    siteName: "",
    url: "",
    images: {
      url: "",
      type: "image/png",
      width: 1200,
      height: 630,
      alt: title,
    },
  },
  twitter: {
    title: "",
    description: "",
    images: {
      url: "",
      type: "image/png",
      width: 1200,
      height: 630,
      alt: title,
    },
  }
}

export default AppLayout;

こんな感じのlayout.tsxを各ページのlayout.tsxとして作成することでメタデータが分離できた.

Discussion