![見出し画像](https://assets.st-note.com/production/uploads/images/135065409/rectangle_large_type_2_ef4050907c07b7db8f6e0b5d26c0ca70.png?width=1200)
【Next.js】メタデータをクライアント・コンポーネントに設定する方法
Next.jsのメタデータはサーバー・コンポーネントにしか設定できない
メタデータとはブラウザのタブに表示されるページ名や、ページ概要の書かれたdescriptionのことで、SEOには非常に重要なデータです。
このメタデータ設定のため、Next.js(Appルーター)にはgenerateMetadataやmetadataといった専用タグが用意されていますが、制限がひとつあります。
これらのタグがサーバー・コンポーネントでしか使えないことです。
しかし実は使えるようにする方法もあるので、本記事ではクライアント・コンポーネントにメタデータを設定する下記2つの方法を紹介します。
1 ― タグを使う
2 ― クライアント・コンポーネントをサーバー・コンポーネントにする
なおNext.jsについてくわしく知りたい方は、下記教本を参考にしてください。
最新のNext.js(Appルータ)をフロントエンドとバックエンドに使った、本格的なアプリケーションを開発します。
クライアント・コンポーネントにメタデータを設定する方法 1
最初に簡単な方法からです。
<title>タグや<meta>タグを直接書き込みます。
"use client"
import { useState } from "react"
const App = () => {
const [data, setData] = useState("")
return (
<div> // ↓追加
<title>トップページ</title> // ↓追加
<meta name="description" content="会社案内のページです"/>
<h1>会社案内</h1>
<p>{data}</p>
</div>
)
}
export default App
ブログ記事などの、データによって表示の変わるダイナミックページでは次のように書けます。
"use client"
import { useEffect } from "react"
const Blog = (props) => {
return (
<div> // ↓追加
<title>{props.title}</title> // ↓追加
<meta name="description" content={props.description}/>
<h1>最新記事:{props.title}</h1>
<p>{props.text}</p>
</div>
)
}
export default Blog
クライアント・コンポーネントにメタデータを設定する方法 2
2つ目の方法は、「クライアント・コンポーネントをサーバー・コンポーネントに読み込む」という方法です。
たとえば下記のようなログインページがあったとします。
![](https://assets.st-note.com/img/1711355524671-SHOkpS2ppF.jpg?width=1200)
中のコードは次のようになっています。
// app/login/page.js
"use client"
import { useState } from "react"
const Login = () => {
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
return (
<div>
<h1>ログイン</h1>
<form>
<input onChange={(e) => setEmail(e.target.value)}/>
<input onChange={(e) => setPassword(e.target.value)}/>
<button>ログイン</button>
</form>
</div>
)
}
export default Login
Next.jsの用意しているgenerateMetadataやmetadataはサーバー・コンポーネントでしか使えないので、このコンポーネントをサーバー・コンポーネントにしましょう。
新しいファイルを作ってください。ここではmyPage.jsとしていますが、名前はなんでも大丈夫です。
![](https://assets.st-note.com/img/1711355541087-jkEabrgiRT.jpg?width=1200)
myPage.jsには、「app/login/page.js」のコードを丸ごとコピー&ペーストします。
![](https://assets.st-note.com/img/1711355549325-yxsJO2CtUH.jpg?width=1200)
「app/login/page.js」に戻ります。
myPage.jsにコピー&ペーストしたコードはすべて消し、次のコードを書きましょう。
// app/login/page.js
import MyPage from "./myPage"
const Login = () => {
return <MyPage/>
}
export default Login
クライアント・コンポーネントであるmyPage.jsを読み込み、そのままreturnしているだけですが、これでこのファイルはサーバー・コンポーネントになりました。
なので、ここにメタデータを設定するコードを追加しましょう。
// app/login/page.js
import MyPage from "./myPage"
// ↓追加
export const metadata = {
title: "ログインページ",
description: "これはログインページです",
}
// ↑追加
const Login = () => {
return <MyPage/>
}
export default Login
データによって表示が異なるページには、次のコードを使います。
import MyPage from "./myPage"
// ↓追加
export async function generateMetadata(){
// データ取得のコード
return {
title: data.title,
description: data.description
}
}
// ↑追加
const Blog = () => {
return <MyPage/>
}
export default Blog
これがクライアント・コンポーネントにメタデータを設定する2つの方法です。
Next.jsについてもっとくわしく知りたい方は、下記教本を参考にしてください。
最新のNext.js Appルータを使ってフルスタックアプリを開発します。
この記事の著者については下記リンクをチェック
◆ Amazon著者ページ:https://www.amazon.co.jp/stores/author/B099Z51QF2
公式サイト:https://monotein.com
Twitter:https://twitter.com/monotein_
◆ React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。メルマガ登録はこちらから → https://monotein.com/register-newsletter
この記事が気に入ったらサポートをしてみませんか?