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

"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

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

// app/login/page.js

import MyPage from "./myPage"

const Login = () => {
    return <MyPage/>
}

export default Login

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