Next.js 应用程序目录的动态元数据配置以匹配状态值

Question

在Next.js 13的app目录中，我在官方文档中看到他们已经放弃了旧的head方法而转而使用元数据，我认为它只能在页面或布局上使用。

我想根据状态值更改标题，我该怎么做？ 元数据中的对象位于组件外部，因此我无法引用它。

import type { Metadata } from 'next';
 
export const metadata: Metadata = {
  title: 'Home',
  description: 'Welcome to Next.js',
};
 
export default function Page() {
  return '...';
}

Answer 1

如果您所说的“状态”是指与“useState”类似的东西，那么这是不可能的。因为metadata仅适用于服务器组件，而useState只能在客户端组件中使用。文档说：

对于普通页面，您通常知道要返回哪些元数据，因此 元数据对象应该足够了。如果页面是动态的，则有 generateMetadata ：

下面是动态设置标题的示例：

// app/products/[id]/page.tsx

export async function generateMetadata({ params, searchParams }) {
  // read route params
  const id = params.id;

  // fetch data
  const product = await fetch(`/api/products/${id}`).then((res) => res.json());

  // return a dynamic title
  return {
    title: product.title,
  };
}

export default function Page() {
  return '...';
}