Metadata

metadata 对象

在 Next.js 中，可以通过 metadata 对象来设置页面的元数据 <meta>。这些元数据可以包括标题、描述、关键词等，有助于搜索引擎优化（SEO）。

1. 如果在 layout 中定义了 metadata，则该布局下的所有页面都会继承这些元数据。
2. 如果在 page 中定义了 metadata，则该页面会覆盖布局中的 metadata。

示例：

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

metadata title

定义 title 除了 string 形式，还支持 object 形式。

// app/layout.tsx
export const metadata = {
  title: {
    default: 'Next.js',
    template: '%s | My Site',
  },
}

直接定义的话，会通过模板生成标题：

// about/page.tsx
export const metadata = {
  title: {
    absolute: 'About Us', // => 'About Us | My Site'
  },
}

若不想使用模板：

// about/page.tsx
export const metadata = {
  title: {
    absolute: 'About Us', // 不会使用模板
  },
}

generateMetadata 函数

import { Metadata } from 'next'

export const generateMetadata = async (props: Props): Promise<Metadata> => {
  const { post } = props
  return {
    title: post.title,
    description: post.description,
  }
}

注意：不能同时使用 metadata 和 generateMetadata，否则会导致冲突。