英文:
How to set the metadata dynamically to match state values in the app directory of Next.js?
问题
In the app directory of Next.js 13, I saw in the official documentation that they've abandoned the old head method in favor of using metadata, and I thought it was only available on page or layout.
我在 Next.js 13 的 app 目录中看到官方文档中提到他们已经放弃了旧的 head 方法，而是推荐使用元数据（metadata），我以为它只能在页面或布局上使用。
I want to change the title based on the state value, how can I do that?
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 '...';
}
英文:
In the app directory of Next.js 13, I saw in the official documentation that they've abandoned the old head method in favor of using metadata, and I thought it was only available on page or layout.
I want to change the title based on the state value, how can I do that?
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 '...';
}
答案1
得分: 2
如果你所说的state类似于useState，那是不可能的。因为metadata仅适用于服务器组件，而useState只能在客户端组件中使用。文档指出：
metadata对象和generateMetadata函数仅在服务器组件中受支持。
对于普通页面，通常你知道要返回的元数据是什么，所以metadata对象应该足够了。如果页面是动态的，可以使用generateMetadata：
动态元数据依赖于动态信息，例如当前路由参数、外部数据或父段中的
metadata，可以通过导出一个返回元数据对象的generateMetadata函数来设置。
以下是动态设置标题的示例：
// app/products/[id]/page.tsx
export async function generateMetadata({ params, searchParams }) {
// 读取路由参数
const id = params.id;
// 获取数据
const product = await fetch(`/api/products/${id}`).then((res) => res.json());
// 返回动态标题
return {
title: product.title,
};
}
export default function Page() {
return '...';
}
英文:
If by state you mean something similar to useState, it's not possible. Because metadata is for Server Components only, whereas useState can only be used in Client Components. The doc says:
>The metadata object and generateMetadata function exports are only supported in Server Components.
For a normal page, you normally know what metadata to return, so the metadata object should be enough. If the page is dynamic, there is generateMetadata:
>Dynamic metadata depends on dynamic information, such as the current route parameters, external data, or metadata in parent segments, can be set by exporting a generateMetadata function that returns a Metadata object.
Find below an example of setting the title dynamically:
// 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 '...';
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论