Dynamische Metadatenkonfiguration des Next.js-Anwendungsverzeichnisses zur Übereinstimmung mit Statuswerten

Question

Im Next.js 13的app-Verzeichnis habe ich in der offiziellen Dokumentation gesehen, dass sie die alte Head-Methode zugunsten der Verwendung von Metadaten aufgegeben haben, die meiner Meinung nach nur auf Seiten oder Layouts verwendet werden können.

Ich möchte den Titel basierend auf dem Statuswert ändern. Wie kann ich das tun? Das Objekt in den Metadaten liegt außerhalb der Komponente, daher kann ich nicht darauf verweisen.

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 '...';
}