【Next.js】メタデータをクライアント・コンポーネントに設定する方法

Next.jsのメタデータはサーバー・コンポーネントにしか設定できない

メタデータとはブラウザのタブに表示されるページ名や、ページ概要の書かれたdescriptionのことで、SEOには非常に重要なデータです。

このメタデータ設定のため、Next.js（Appルーター）にはgenerateMetadataやmetadataといった専用タグが用意されていますが、制限がひとつあります。

これらのタグがサーバー・コンポーネントでしか使えないことです。

しかし実は使えるようにする方法もあるので、本記事ではクライアント・コンポーネントにメタデータを設定する下記2つの方法を紹介します。

---

1 ― タグを使う

2 ― クライアント・コンポーネントをサーバー・コンポーネントにする

---

なおNext.jsについてくわしく知りたい方は、下記教本を参考にしてください。

最新のNext.js（Appルータ）をフロントエンドとバックエンドに使った、本格的なアプリケーションを開発します。

Amazon.co.jp: Next.jsでつくるフルスタックアプリ　前編（バックエンド開発）: 自分ひとりだけで本格アプリを開発できるようになる本 Next.jsフルスタック eBook : 三好アキ: Kindleストア

クライアント・コンポーネントにメタデータを設定する方法　１

最初に簡単な方法からです。

<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 Login

Next.jsの用意しているgenerateMetadataやmetadataはサーバー・コンポーネントでしか使えないので、このコンポーネントをサーバー・コンポーネントにしましょう。

新しいファイルを作ってください。ここではmyPage.jsとしていますが、名前はなんでも大丈夫です。

myPage.jsには、「app/login/page.js」のコードを丸ごとコピー＆ペーストします。

「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.co.jp: Next.jsでつくるフルスタックアプリ　前編（バックエンド開発）: 自分ひとりだけで本格アプリを開発できるようになる本 Next.jsフルスタック eBook : 三好アキ: Kindleストア

この記事の著者については下記リンクをチェック

◆ 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