Next.js里怎么动态设置页面的metadata？

开发者翌萌提问于 2026-03-19 10:04:20 阅读 21

框架

我在用Next.js 13+的App Router，想根据接口返回的数据动态设置页面标题和描述，但试了直接在组件里调用函数好像不行。文档说要用generateMetadata，但我这样写报错了：

export async function generateMetadata({ params }) {
  const post = await fetchPost(params.id);
  return {
    title: post.title,
    description: post.excerpt
  };
}

export default function PostPage({ params }) {
  // 页面内容...
}

控制台提示fetchPost不是函数或者返回undefined，是我用错地方了吗？

React框架服务端渲染

我来解答赞 4 收藏

反馈

1 条解答

轩辕静依 Lv1

问题很简单——你没有导入fetchPost函数，或者导入路径写错了。在PostPage.js文件顶部加上正确的import：

import { fetchPost } from '@/app/api/posts';



export async function generateMetadata({ params }) {

  const post = await fetchPost(params.id);

  return {

    title: post.title,

    description: post.excerpt

  };

}



export default function PostPage({ params }) {

  // 页面内容...

}

确认你的fetchPost函数路径和导出方式正确就行。

2026-03-19 10:05