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