Next.js 13如何在单个文件中动态管理路由元数据？

首先建议调整你的元数据配置结构，把原数组改成键值对对象，用路由路径或页面标识作为key，这样匹配起来更高效：

// metadataConfig.js
export const metadataConfig = {
  "/about": {
    title: "关于我们 | 我的网站",
    description: "这里是关于我们页面的详细介绍..."
  },
  "/services": {
    title: "服务项目 | 我的网站",
    description: "我们提供专业的定制化服务，满足你的各类需求..."
  },
  "/contact": {
    title: "联系我们 | 我的网站",
    description: "欢迎通过电话、邮箱或在线表单与我们取得联系..."
  },
  // 首页兜底配置
  "/": {
    title: "首页 | 我的网站",
    description: "欢迎访问我们的官方网站，了解更多信息..."
  }
};

下面提供两种符合Next.js最佳实践、且完全对SEO友好的实现方式：

方案一：页面级静态导出元数据（App Router） #

每个页面的服务端组件直接导入配置，匹配对应路由的元数据并静态导出，这是Next.js推荐的最简单方式，元数据会直接注入到HTML头部，爬虫可直接抓取。

比如app/about/page.js：

import { metadataConfig } from "@/config/metadataConfig";

// 直接导出对应路由的元数据，服务端组件支持这种静态导出
export const metadata = metadataConfig["/about"];

export default function AboutPage() {
  return <div>关于我们页面内容</div>;
}

方案二：用generateMetadata动态生成（支持动态路由） #

如果是动态路由（如app/[slug]/page.js），或者需要更灵活的元数据逻辑，可以使用generateMetadata函数——它在服务端组件中可用，能获取路由参数，完美适配动态场景。

静态路由示例（app/services/page.js）： #

import { metadataConfig } from "@/config/metadataConfig";

export async function generateMetadata() {
  return metadataConfig["/services"];
}

export default function ServicesPage() {
  return <div>服务页面内容</div>;
}

动态路由示例（app/[slug]/page.js）： #

import { metadataConfig } from "@/config/metadataConfig";

export async function generateMetadata({ params }) {
  // 根据动态路由的slug匹配配置，没有匹配到则用首页兜底
  return metadataConfig[`/${params.slug}`] || metadataConfig["/"];
}

export default function DynamicPage({ params }) {
  return <div>{params.slug}页面内容</div>;
}

关键注意事项 #

1. SEO兼容性：以上两种方案都是服务端渲染元数据，Next.js会将title、description直接写入HTML的<head>标签，搜索引擎爬虫可以直接读取，完全符合SEO要求。
2. 禁止客户端设置元数据：不要尝试在客户端组件中用useEffect等方式修改元数据，爬虫可能无法抓取客户端动态渲染的内容，导致SEO失效。
3. 兜底配置：一定要设置默认的首页元数据，防止某个路由没有匹配到配置时出现空白的title或description。

内容的提问来源于stack exchange，提问作者Sabbir shuvo