为什么我的动态元数据生成在 Next 14 中不起作用？

Question

在我的第一个 Next.js 14 网站上工作时，我已阅读了 动态元数据 的文档，但由于某种原因，当我在本地运行我的网站并访问该页面时，元数据没有生成。

结构：

[slug]/page.tsx

page.tsx

import type {Metadata} from 'next'

// API
import {getPage} from '@/api/page'

type MetadataProps = {
  title: string
  description: string
}

export async function generateMetadata(params: MetadataProps): Promise<Metadata> {
  console.log(params)
  return {
    title: {
      template: `%s | ${params?.title}`,
      default: params?.title,
    },
    description: params?.description,
  }
}

export default async function Page({params}: Readonly<{params: {slug: string}}>) {
  const page = await getPage(params?.slug)
  console.log({page})

  await generateMetadata({
    title: page?.title,
    description: page?.description,

  })

  return (
    <div>
      <p>Page: {params?.slug}</p>
    </div>
  )
}

但是在

generateMetadata

之前和从 API 获取数据之后的控制台日志中

getPage

我看到：

{
  page: {
    description: 'description',
    title: 'Test page',
    _createdAt: '2024-08-05T18:38:16Z',
    _id: 'some id',
    _updatedAt: '2024-08-14T14:17:45Z',
    slug: 'test-page'
  }
}

以及在

params

中正确看到物体：

{
  title: 'Test page',
  description: 'description',
}

在 Next.js 14 中基于 API 调用动态生成元数据的正确方法是什么？为什么我看不到元数据？

Answer 1

您应该从

generateMetadata

函数调用 API，而不是从

Page

函数。

以下是代码外观的示例：

import type {Metadata} from 'next'

// API
import {getPage} from '@/api/page'


type Props = {
  params: { slug: string }
}

export async function generateMetadata(
  { params }: Props,
): Promise<Metadata> {

  // read route params
  const slug = params.slug
 
    const page = await getPage(slug)

  return {
    title: {
      template: `%s | ${page?.title}`,
      default: page?.title,
    },
    description: page?.description,
  }
}

export default async function Page({params}: Readonly<{params: {slug: string}}>) {
  return (
    <div>
      <p>Page: {params?.slug}</p>
    </div>
  )
}

有关更多详细信息，请参阅此处有关generateMetadata 函数的 Next.js 官方文档。