在 Next.js 服务端渲染（SSR）应用中，export const metadata 未生效通常源于页面路由模式不匹配、动态参数处理不当或版本兼容性问题；本文详解根本原因、修复方案及更可靠的 SEO 实践。
在 next.js 服务端渲染（ssr）应用中，`export const metadata` 未生效通常源于页面路由模式不匹配、动态参数处理不当或版本兼容性问题；本文详解根本原因、修复方案及更可靠的 seo 实践。
Next.js 中 export const metadata 是 App Router（基于 React Server Components）的专属特性，仅适用于 app/ 目录下的页面组件。而你的项目仓库（NewsBlog-ssr）使用的是 Pages Router（pages/ 目录） —— 这正是标题不生效的根本原因：export const metadata 在 Pages Router 中完全被忽略，属于无效语法。
✅ 正确解决方案取决于你当前使用的路由模型：
✅ 若你坚持使用 Pages Router（推荐短期修复）
请改用 next/head 或函数组件内联 <title> 标签：
// pages/index.tsx
import Head from 'next/head';
export default function Home() {
return (
<>
<Head>
<title>TEST | News Website</title>
<meta name="description" content="Latest news updates" />
</Head>
<main>
<h1>Welcome to the News Blog</h1>
{/* 其他内容 */}
</main>
</>
);
}⚠️ 注意：<Head> 必须置于 JSX 返回结构内（非顶层），且需确保 next/head 已安装（Next.js 13+ 默认内置，无需额外安装）。
✅ 若你希望采用现代最佳实践（强烈推荐长期升级）
迁移到 App Router 并启用 SSR（通过 generateStaticParams + dynamic = 'force-dynamic' 或 fetch() 配置）：
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
// app/page.tsx
export const dynamic = 'force-dynamic'; // 启用服务端渲染
export default function HomePage() {
return (
<div>
<h1>Home Page</h1>
{/* 动态数据获取逻辑 */}
</div>
);
}
// ✅ 此处 metadata 生效（App Router 专属）
export const metadata = {
title: 'TEST | News Website',
description: 'Breaking news and in-depth analysis',
};? 验证方式：查看浏览器 <head> 源码或使用 DevTools → Elements → <title> 标签，确认是否已更新。
? 进阶建议：SEO 友好增强（尤其适合新闻类网站）
对于多页面、高 SEO 要求的新闻站点，推荐集成 next-seo —— 它提供细粒度控制、Open Graph 支持及 SSR 兼容性：
npm install next-seo
// pages/[id].tsx （Pages Router 示例）
import { NextSeo } from 'next-seo';
export default function ArticlePage({ article }) {
return (
<>
<NextSeo
title={`${article.title} | News Website`}
description={article.excerpt}
canonical={`https://example.com/news/${article.id}`}
openGraph={{
type: 'article',
article: {
publishedTime: article.publishedAt,
authors: [article.author],
},
}}
/>
<article>
<h1>{article.title}</h1>
<p>{article.content}</p>
</article>
</>
);
}? 关键注意事项：
- Pages Router 不支持 metadata 对象导出，请勿混用；
- getServerSideProps 中无法直接修改 <title>，必须通过 Head 或 NextSeo 组件；
- 使用 next-seo 时，确保其 <NextSeo /> 组件位于页面 JSX 树顶层（通常在 <Head> 位置），且避免重复渲染；
- 构建前运行 next build 并检查终端警告——Next.js 会提示 metadata 在 Pages Router 中被忽略。
总结：标题失效不是代码错误，而是架构错配。选择 Pages Router 就用 Head 或 next-seo；拥抱未来就升级至 App Router 并善用原生 metadata。二者皆可实现稳定、可维护、SEO 友好的新闻站点。
