generateStaticParams

通过该参数，在构建阶段就能直接生成对应的静态页面

// 这边返回长度为 3 的数组，那么就会生成 3 个静态页面（构建的时候，直接根据这个数组就能拿到对应 url，也就能生成对应的页面）
export async function generateStaticParams() {
    const posts = await fetch('https://.../posts').then((res) => res.json()) // [{slug: '1'}, {slug: '2'}, {slug: '3'}]

    return posts.map((post) => ({
        slug: post.slug,
    }))
}

// Multiple versions of this page will be statically generated
// using the `params` returned by `generateStaticParams`
export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
    const { slug } = await params
    // ...
}
// 设置这个的话，当超过预期的参数，页面将直接 404
export const dynamicParams = false

generateMetadata

设置媒体信息, 服务端渲染的时候至少会等待这个信息才返回页面数据

// page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
    title: '...',
    description: '...',
}

export default function Page() {}

// 方式二
import type { Metadata, ResolvingMetadata } from 'next'

export async function generateMetadata(
    { params, searchParams }: Props,
    parent: ResolvingMetadata
): Promise<Metadata> {
    // ...
    return {
        title: product.title,
        openGraph: {
            images: ['/some-specific-page-image.jpg', ...previousImages],
        },
    }
}