blog-hero-img

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

pen-icon2024.3.18

この記事は約2分で読めます

Profile Pic

この記事の筆者:三好アキ


🔹 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フォルダ)にはgenerateMetadatametadataといった専用のタグが用意されていますが、ひとつ制限があります。

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

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


1 ― タグを使う

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


Next.jsでつくるフルスタックアプリ

【最新バージョンのNext.jsとAppフォルダで、フルスタックアプリを自力で作る力を手にいれる】

1980円0円

Amazonのページに移動する

クライアント・コンポーネントにメタデータを設定する方法 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つ目の方法は、「クライアント・コンポーネントをサーバー・コンポーネントに読み込む」という方法です。

たとえば下記のようなログインページがあったとします。

image

中のコードは次のようになっています。

// 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の用意しているgenerateMetadatametadataはサーバー・コンポーネントでしか使えないので、このコンポーネントをサーバー・コンポーネントにしましょう。

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

image

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

image

次に、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のページに移動する

Profile Pic

メルマガ配信中
(from 三好アキ/エンジニア)


React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
(*配信はいつでも停止できます)