【Next.js Appフォルダ】メタデータをクライアント・コンポーネントに設定する方法
2024.3.18
2024.4.22
この記事は約2分で読めます
目次
この記事の筆者：三好アキ
🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。
🔹 自身のJavaScript挫折経験をもとに、HTMLとCSSの知識だけで本格的なアプリ開発を始められる入門書を多数執筆中。合計著作は22冊を超える。
🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。
Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2
React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。登録はこちらから → 無料メルマガ登録
Next.jsのメタデータはサーバー・コンポーネントにしか設定できない
メタデータとはブラウザのタブに表示されるページ名や、ページ概要の書かれたdescriptionのことで、SEOには非常に重要なデータです。
このメタデータ設定のため、Next.js（Appルーター）にはgenerateMetadataやmetadataといった専用タグが用意されていますが、制限がひとつあります。
これらのタグがサーバー・コンポーネントでしか使えないことです。
しかし実は使えるようにする方法もあるので、本記事ではクライアント・コンポーネントにメタデータを設定する下記2つの方法を紹介します。
1 ― タグを使う
2 ― クライアント・コンポーネントをサーバー・コンポーネントにする
Next.jsでつくるフルスタックアプリ
【最新バージョンのNext.jsとAppフォルダで、フルスタックアプリを自力で作る力を手にいれる】
1980円 → 0円
Amazonのページに移動する
クライアント・コンポーネントにメタデータを設定する方法 １
最初に簡単な方法からです。
<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つ目の方法は、「クライアント・コンポーネントをサーバー・コンポーネントに読み込む」という方法です。
たとえば下記のようなログインページがあったとします。
中のコードは次のようになっています。
// 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 LoginNext.jsの用意しているgenerateMetadataやmetadataはサーバー・コンポーネントでしか使えないので、このコンポーネントをサーバー・コンポーネントにしましょう。
新しいファイルを作ってください。ここではmyPage.jsとしていますが、名前はなんでも大丈夫です。
myPage.jsには、app/login/page.jsのコードを丸ごとコピー＆ペーストします。
次に、myPage.jsにコピー＆ペーストしたapp/login/page.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ルータを使ってフルスタックアプリを開発します。
Next.jsでつくるフルスタックアプリ
【最新バージョンのNext.jsとAppフォルダで、フルスタックアプリを自力で作る力を手にいれる】
1980円 → 0円
Amazonのページに移動する
メルマガ配信中
（from 三好アキ／エンジニア）
React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
（*配信はいつでも停止できます）
関連記事
