Next.js 應用程式目錄的動態元資料配置以符合狀態值
P粉713866425
P粉713866425 2023-12-28 22:59:40
0
1
463

在Next.js 13app目錄中,我在官方文件中看到他們已經放棄了舊的head方法而轉而使用元數據,我認為它只能在頁面或佈局上使用。

我想根據狀態值更改標題,我該怎麼做? 元資料中的物件位於元件外部,因此我無法引用它。

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


#
P粉713866425
P粉713866425

全部回覆(1)
P粉025632437

如果您所說的「狀態」是指與「useState」類似的東西,那麼這是不可能的。因為metadata只適用於伺服器元件,而useState只能在客戶端元件中使用。文檔: p>

對於普通頁面,您通常知道要傳回哪些元數據,因此 元資料 物件應該足夠了。如果頁面是動態的,則有 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 '...';
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板