Configuration dynamique des métadonnées du répertoire d'application Next.js pour correspondre aux valeurs d'état

Question

Dans le répertoire Next.js 13的app, j'ai vu dans la documentation officielle qu'ils avaient abandonné l'ancienne méthode head au profit de l'utilisation de métadonnées, qui, je pense, ne peuvent être utilisées que sur des pages ou des mises en page.

Je souhaite modifier le titre en fonction de la valeur du statut, comment puis-je le faire ? L'objet dans les métadonnées se trouve en dehors du composant, je ne peux donc pas le référencer.

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

Answer 1

Si par « état » vous entendez quelque chose de similaire à « useState », alors ce n'est pas possible. Parce que metadata仅适用于服务器组件，而useState ne peut être utilisé que dans les composants clients. Le document dit  :  p>

Pour les pages normales, vous savez généralement quelles métadonnées vous souhaitez renvoyer, donc un objet metadata元数据对象应该足够了。如果页面是动态的，则有 generateMetadata devrait suffire. Si la page est dynamique, il y a generateMetadata ：

Voici un exemple de définition dynamique du titre :

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