小编点评

**页面元数据配置** **根页面** 在根页面 (`app/layout.tsx`) 中，您可以使用 `export const metadata: Metadata = {...}``声明一个元数据对象，其中包含标题和描述等关键信息。例如： ```tsx export const metadata: Metadata = { title: "defaultTitle", description: "I am description", }; ``` **特定页面** 如果您需要为特定页面设置独特的标题或描述，您可以使用以下语法在 `metadata` 对象中定义它们： ```tsx export const metadata: Metadata = { title: "xxxxdetails", description: " 我是 xxxx 详情描述", }; ``` **优先级设置** 在配置元数据时，遵循页面层级深度原则，即页面最深层级的设置将具有最高的优先级，而位于 `app/layout` 下的设置则享有最低的优先级。例如： ```tsx export const metadata: Metadata = { title: "子页面 title", }; ``` **异步更新** 为了确保在服务器端进行页面渲染时能够正确应用元数据，请使用 `async` 关键字声明一个异步函数并返回一个 `Metadata` 对象。例如： ```tsx export const generateMetadata = async ({ params, searchParams }): Promise => { // 处理异步请求 return { title: "staticTitle" }; }; ``` **示例** ```tsx // app/layout.tsx export const metadata: Metadata = { title: "defaultTitle", description: "I am description", }; // app/about/details.tsx export const metadata: Metadata = { title: "xxxxdetails", description: " 我是 xxxx 详情描述", }; ```

正文

在创建Next.js项目时，根页面会自动生成一个metadata对象，其中包含标题和描述等关键信息。每当页面被访问时，这个metadata对象会被读取并应用到HTML的默认配置中，确保页面的基本信息得以正确展示。在存在单独页面需要采用独特的标题或描述时，这些特定页面的元数据将优先于根元素所设定的全局元数据，从而进行替换操作。通过为这些页面设置独特的元数据，我们可以确保访问者或搜索引擎在访问这些页面时能够获取到最准确、最相关的信息。因此，在设计和开发网站或应用程序时，我们需要考虑如何为每个页面设置独特的元数据，并在需要时优先使用这些元数据，以提供最佳的用户体验和搜索引擎优化效果。

• 支持对title和description进行独立的配置，以灵活满足各类页面需求。
• 在配置优先级方面，我们遵循页面层级深度原则，即页面最深层级的设置将具有最高的优先级，而位于app/layout下的设置则享有最低的优先级。这一规则设计旨在确保页面级别的特定设置能够覆盖全局或布局级别的通用设置，从而更加精确地控制页面的标题和描述内容。
• 仅适用于服务端渲染场景，以确保在服务器端进行页面渲染时能够正确应用优先级设置。

//app/layout.tsx 根元素中默认生成的
export const metadata: Metadata = {
  title: "defaultTitle",
  description: "I am description",
};


//app/about/details.tsx  在指定页面设置metadata
export const metadata: Metadata = {
  title: "xxxxdetails", //可以单独修改
  description: " 我是 xxxx 详情描述",//可以单独修改 ⚠️该字段只会进行合并不会进行替换
};

个性化 metadata

export const metadata: Metadata = {
    title: {
        default:'', //默认的
        absolute:'', //绝对的
        template:'%s | test' //使用模板符 进行替换
    },
}

//当前页面需要更新 title 的时候，可以根据根元素配置的 title 类型来进行个性化展示
//示例：
    // app/layout.tsx
    export const metadata: Metadata = {
        title: '子页面 title', //最终会跟页面配置的template(%s)，进行替换
    }
    
    //app/about/details.tsx
    export const metadata: Metadata = {
        title: {
            absolute: '绝对子页面 title', //最终会替换跟页面的 title 直接展示
        },
    }

异步更新 metadata

import {Metadata} from "next";

//上级路由携带进来的参数
type Props = {
    params: { id: string }
    searchParams: { [key: string]: string | string[] | undefined }
}

//改函数支持异步请求
export const generateMetadata = async ({params, searchParams}: Props): Promise<Metadata> => {
    const title: string = await new Promise(resolve => {
        setTimeout(() => {
            resolve(`async title ${params.id}`)
        }, 200)
    }) 
    return {
        title: 'staticTitle' || title || params.id //取决于父级传递过来的参数
    }
}
export default function Page() {
    return <>
        示例 code
    </>
}