Konfigurasi metadata dinamik direktori aplikasi Next.js untuk memadankan nilai status

Question

Dalam direktori Next.js 13的app, saya melihat dalam dokumentasi rasmi bahawa mereka telah meninggalkan kaedah kepala lama untuk menggunakan metadata, yang saya fikir hanya boleh digunakan pada halaman atau reka letak.

Saya ingin menukar tajuk berdasarkan nilai status, bagaimana saya boleh melakukannya? Objek dalam metadata berada di luar komponen, jadi saya tidak boleh merujuknya.

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

Answer 1

Jika mengikut "state" anda bermaksud sesuatu yang serupa dengan "useState", maka ini tidak mungkin. Kerana metadata仅适用于服务器组件，而useState hanya boleh digunakan dalam komponen pelanggan. Dokumen berkata :

Untuk halaman biasa, anda biasanya tahu metadata yang ingin anda pulangkan, jadi objek metadata元数据对象应该足够了。如果页面是动态的，则有 generateMetadata sepatutnya mencukupi. Jika halaman itu dinamik, terdapat < code>generateMetadata ：

Berikut ialah contoh penetapan tajuk secara dinamik:

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