🥷
nextjs/app routerのclient pageでmetadataを設定する
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