generateMetadata

Next.js允许你使用 generateMetadata 生成metadata，以提高 SEO。

app/layout.tsx|page.tsx

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
    title: '...',
    description: '...',
}

export default function Page() {}

动态 metadata

有时候，我们希望 metadata 根据当前页面的特定信息来动态生成，例如当前路由参数、外部数据等信息，通过 generateMetadata 函数即可实现。

app/[id]/layout.tsx|page.tsx

export async function generateMetadata({ params }) {
    const id = params.id

    const product = await fetch(`https://.../${id}`).then((res) => res.json())

    return {
        title: product.title,
        description: product.description
    }
}

export default function Page({ params }) {}