在 Next.js 服务端渲染（SSR）项目中，export const metadata 可能因页面模式不匹配（如未启用 App Router 或使用 Pages Router）、动态路由冲突或构建配置问题而失效；本文详解根本原因并提供兼容 SSR 的可靠替代方案。
在 next.js 服务端渲染（ssr）项目中，`export const metadata` 可能因页面模式不匹配（如未启用 app router 或使用 pages router）、动态路由冲突或构建配置问题而失效；本文详解根本原因并提供兼容 ssr 的可靠替代方案。
Next.js 的 export const metadata 是 App Router（app 目录）专属特性，仅在采用 app/ 结构的路由系统中生效。而你的项目（NewsBlog-ssr）使用的是传统 Pages Router（pages/ 目录），该模式下 metadata 导出会被完全忽略——这正是标题始终不更新的根本原因。
✅ 正确做法：在 Pages Router 中，应通过 <Head> 组件（来自 next/document 或 next/head）手动注入 <title> 和 SEO 标签：
// pages/index.tsx
import Head from 'next/head';
export default function Home({ blogs }) {
return (
<>
<Head>
<title>News Website | Latest Updates</title>
<meta name="description" content="Breaking news, in-depth analysis, and trusted reporting." />
<meta property="og:title" content="News Website" />
</Head>
<div className="container">
<Navbar />
{/* 页面内容 */}
</div>
</>
);
}⚠️ 注意事项：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 若使用 getServerSideProps 进行 SSR，<Head> 仍可正常工作，且服务端会正确注入元信息；
- 避免在 _document.tsx 中硬编码全局 title（它不支持页面级动态覆盖）；
- next/head 已在 Next.js 13.4+ 中被标记为 legacy，推荐升级至 next/document 的 Html, Head, Main, NextScript 组合，但 <Head> 在 Pages Router 中仍是标准方案。
? 更优方案：对于新闻类网站这类强 SEO 需求场景，建议集成 next-seo —— 它专为 Pages Router 和 App Router 提供统一、类型安全、可复用的 SEO 配置：
npm install next-seo
// pages/index.tsx
import { NextSeo } from 'next-seo';
export default function Home({ blogs }) {
return (
<>
<NextSeo
title="Latest News | News Website"
description="Real-time coverage of global events, politics, technology, and culture."
openGraph={{
type: 'website',
url: 'https://newsblog.example',
title: 'News Website',
description: 'Trusted journalism, updated hourly.',
}}
/>
<div className="container">
<Navbar />
{/* 页面主体 */}
</div>
</>
);
}? 总结：
- ❌ export const metadata ≠ Pages Router 兼容 —— 它是 App Router 的语法糖；
- ✅ Pages Router 必须用 <Head> 或 next-seo 实现服务端可渲染的动态标题；
- ? next-seo 不仅解决标题问题，还支持 Open Graph、Twitter Card、JSON-LD 等完整 SEO 能力，显著提升新闻站点的搜索引擎可见性与社交分享体验。
迁移成本低、文档完善、社区活跃，是当前 Pages Router 项目的首选 SEO 工具。
