meta标签

meta 标签（Next.js Metadata API）

Next.js App Router 提供 Metadata API，可以在 layout.js / page.js 中通过导出 metadata 对象生成静态 <meta> 标签，或者导出 generateMetadata() 异步函数生成动态 <meta> 标签。

来源整理自：vue3js.cn 面试官系列

补充

补充：静态 + 动态 metadata 的写法以及支持的字段。

// app/posts/[id]/page.tsx
import type { Metadata } from "next";

// 1. 静态 metadata：导出固定对象
export const metadata: Metadata = {
  title: "博客 - 我的文章",
  description: "前端面试八股文汇总",
  openGraph: { title: "博客", type: "website" },
};

// 2. 动态 metadata：根据 params / fetch 返回结果生成
export async function generateMetadata(
  { params }: { params: { id: string } },
): Promise<Metadata> {
  const post = await fetch(`https://api.example.com/posts/${params.id}`).then(r => r.json());
  return {
    title: post.title,
    description: post.summary,
  };
}

常见可配置项：

• title：支持 template: "%s | 博客名"，自动拼接子页面标题。
• description、keywords、robots、viewport。
• openGraph / twitter：社交分享卡片。
• icons / manifest：站点图标与 PWA manifest。
• metadataBase：相对 URL 的解析基准，避免 openGraph.images 拼出不完整的链接。

注意：

• 同一路由下若同时存在 metadata 导出和 generateMetadata 导出，会按顺序合并（后者优先级更高），但建议二选一。
• generateMetadata 与 generateStaticParams 一起使用，可在 next build 时为静态路由预渲染 meta。