在 Next.js 服务端渲染（SSR）项目中，export const metadata 在 App Router 下才原生支持；若使用 Pages Router（如 pages/index.js），该语法无效，需改用 next-seo 或 <Head> 手动注入 SEO 标签。
在 next.js 服务端渲染（ssr）项目中，`export const metadata` 在 app router 下才原生支持；若使用 pages router（如 `pages/index.js`），该语法无效，需改用 `next-seo` 或 `
` 手动注入 seo 标签。Next.js 的 export const metadata 是 App Router（基于 app/ 目录）专属特性，不适用于传统 Pages Router（pages/ 目录）项目。从你提供的仓库链接（NewsBlog-ssr）及代码结构可见，该项目采用的是 Pages Router（如 pages/index.js），因此直接声明 export const metadata = { title: "TEST" } 完全被忽略——这是设计限制，而非配置错误。
✅ 正确解决方案如下：
方案一：升级至 App Router（推荐长期演进）
将页面迁移至 app/ 目录，例如：
// app/page.tsx
export const metadata = {
title: "Latest News | TEST",
description: "Breaking news and in-depth analysis from around the world."
};
export default function HomePage() {
return <main>...</main>;
}✅ 优势：原生支持、类型安全、自动注入 <title> 和 Open Graph 标签，且与 SSR/SSG 完全兼容。
方案二：Pages Router 下的可靠替代方案（立即生效）
使用社区成熟库 next-seo（专为 Pages Router 设计）：
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
npm install next-seo
在页面组件中引入并配置：
// pages/index.js
import { NextSeo } from 'next-seo';
export default function Home({ blogs }) {
return (
<>
<NextSeo
title="News Website - Home"
description="Your trusted source for real-time news and analysis."
openGraph={{
type: 'website',
locale: 'en_US',
url: 'https://yournews.com/',
}}
/>
<div className="container">
<Navbar />
{/* 其余内容 */}
</div>
</>
);
}⚠️ 注意：<NextSeo /> 必须作为 JSX 的顶层兄弟节点（不能包裹在其他 div 内），否则无法正确注入 <head>。
方案三：轻量级手动注入（适合简单场景）
若仅需动态 <title>，可搭配 next/head：
import Head from 'next/head';
export default function Home() {
return (
<>
<Head>
<title>News Website - Home</title>
<meta name="description" content="Latest headlines and updates" />
</Head>
<main>...</main>
</>
);
}⚠️ 注意：next/head 在 SSR 中有效，但不支持 Open Graph、Twitter Card 等高级 SEO 属性，扩展性有限。
关键总结
- ❌ export const metadata 在 pages/ 下永不生效，非 Bug，是架构差异；
- ✅ Pages Router 项目请统一使用 next-seo（生产级推荐）或 next/head（基础需求）；
- ? 迁移至 App Router 是未来兼容性与功能性的最优路径，尤其对新闻类网站的多语言、动态路由 SEO 至关重要；
- ? 验证方式：查看页面源代码（右键 → “查看页面源代码”），确认 <title> 是否出现在 <head> 中——SSR 渲染结果应直接包含该标签，而非仅客户端 JS 注入。
立即检查你的 next.config.js 是否启用了 output: 'standalone' 或 unstable_allowDynamic 等可能干扰 Head 渲染的配置，并确保无全局 <Head> 覆盖逻辑。修复后，新闻页面标题将准确反映内容，显著提升搜索引擎可见性与用户体验。
