相关疑难解决方法(0)

动态设置元数据而无需重复请求 - NextJS 13

考虑以下服务器端组件,它是应用程序目录中某个页面 (page.js) 的一部分,代表一个人:

export default async function Person({ params }) {
    const person = await getPerson(params.id);
    
    return (
        <h1> {person.name} </h1>
        <p> {person.bio} </p>
    )
}
Run Code Online (Sandbox Code Playgroud)

显然,这里的目的是动态呈现新页面,其想法是 URL 看起来像/person/{id},其中 ID 是每个人的唯一 ID。

我遇到的问题是我需要为页面设置元数据。例如,我希望标题为person.name,描述为person.description。根据我所读到的内容,在 NextJS 13 中使用 app 目录执行此操作的唯一方法是使用generateMetadata,它看起来像这样:

export async function generateMetadata({ params }) {
    const person = await getPerson(params.id);

    return {
        title: person.name,
        description: person.description
    }
}
Run Code Online (Sandbox Code Playgroud)

我相信您现在可以看到这个问题:我需要getPerson在同一页面中发出完全相同的请求 ( ) 两次。据我所知,没有办法在generateMetadata页面组件之间传递数据。

<Head>组件next/head似乎是理想的解决方案,但它似乎不适用于 NextJS …

node.js reactjs next.js nextjs-dynamic-routing next.js13

15
推荐指数
1
解决办法
3223
查看次数