metadata简介

Next.js的Metadata（元数据）API用于为应用定义元数据，比如HTML头元素中的meta标签和链接标签。这对于增强SEO（搜索引擎优化）以及提高网页分享性（在分享或索引页面时显示准确的相关信息）非常有帮助。

例如在每个页面定义Metadata如网站标题、描述、关键字等，可以确保每个页面可以显示准确的相关信息，这样有利于搜索引擎理解网页内容，提高网页在搜索结果中的排名。

注意Next.js 13已经引入了 Metadata API，并且它还能够替代了 next/head 的功能。这样做的目的是为了扩展新的能力以及让这个API更加容易使用。

metadata定义场合

在nextjs中，可以在layout.tsx和page.tsx中定义metadata

语法是导出一个叫metadata的object或者generateMetadata的function(function返回一个object)

静态metadata

1， layout.tsx

layout.tsx的metadata可以被继承

以下是个简单的demo：

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    template: "%s",
    default: "Scott's Blog"
  },
  description: '欢迎来到空大小丸子的个人网站，本网站是一个学习平台, 主要分享IT资讯和学习文档, 汇集HTML, CSS,JavaScript教程及golang后端教程',
  generator: 'Next.js',
  applicationName: '空大小丸子',
  referrer: 'origin-when-cross-origin',
  keywords: ['Next.js', 'React', 'JavaScript', 'go', 'golang', "Scott's Blog", 'scott', 'blog', 'scott xiong'],
  authors: [{ name: 'Scott', url: 'https://scott-xiong.com' }, { name: '空大小丸子', url: 'https://blog.scott-xiong.com' }],
  creator: 'Scott Xiong',
  publisher: 'Scott Xiong',
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
}

2， page.tsx

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: "blog page"
}

动态metadata

比如博客详情页，每个博客的标题是通过uuid后端查询获得

import { Metadata } from "next";
import blogApi from "@/api/blog";

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

//注意：必须是generateMetadata这个方法名
export const generateMetadata = async ({ params }: Props): Promise<Metadata> => {
  const { uuid } = params
  const res = await blogApi.getBlogByUUID(uuid)
  const js = await res.json()
  return {
    title: js.data.title
  }
}