In theappdirectory of Next.js13, I saw in the official documentation that they have abandoned the old head method in favor of metadata, I think it Can only be used on pages or layouts.
I want to change the title based on the status value, how can I do it? The object in the metadata is outside the component, so I can't reference it.
import type { Metadata } from 'next'; export const metadata: Metadata = { title: 'Home', description: 'Welcome to Next.js', }; export default function Page() { return '...'; }
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
If by "state" you mean something similar to "useState", then this is not possible. Because
metadataonly applies to server components, anduseStatecan only be used in client components. Documentationsays: p>For normal pages, you usually know what metadata you want to return, so a
metadataobject should be sufficient. If the page is dynamic, there isgenerateMetadata:The following is an example of dynamically setting the title:
// 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 '...'; }