Next.js SSR新闻网站export const metadata设置页面标题无效求助

可能的失效原因 #

• 路由模式不匹配：export const metadata是Next.js 13+ App Router专属特性，若你的项目仍使用传统的Pages Router（基于pages/目录），该配置完全不会生效。
• 全局布局覆盖：App Router下的根布局（app/layout.js）若硬编码了<title>标签，会直接覆盖页面级metadata的title设置；或者布局未正确引用metadata变量，导致框架无法注入动态标题。
• metadata格式细节错误：即使结构看似正确，若title配置不符合规范也会失效，比如使用对象格式时未设置default字段，或模板语法错误。
• 缓存/构建残留：开发环境的热更新缓存、生产环境的旧构建产物，都可能导致新标题无法生效。
• 自定义Document干扰（Pages Router场景）：若自定义了_document.js并硬写了<title>，会覆盖next/head或Pages Router元数据配置的效果。

针对性解决方案 #

场景1：使用App Router（Next.js 13+，基于app/目录） #

1. 修正根布局逻辑：确保根布局未硬编码标题，而是让框架自动处理metadata，或显式引用metadata变量：

   // app/layout.js
   export default function RootLayout({ children, metadata }) {
     return (
       <html lang="zh-CN">
         {/* 无需手动写<title>，框架会自动注入metadata中的配置 */}
         <body>{children}</body>
       </html>
     );
   }
   

2. 规范页面metadata写法：

   // app/page.js 或其他页面文件
   export const metadata = {
     title: "TEST", // 基础写法
     // 带模板的写法（适用于全站统一后缀）
     // title: {
     //   default: "TEST",
     //   template: "%s | 新闻博客"
     // }
   };
   

3. 重启开发服务：执行ctrl+c终止next dev，重新启动清除缓存。

场景2：使用Pages Router（基于pages/目录） #

放弃export const metadata，改用Pages Router兼容的方案：

1. 使用next/head组件：

   // pages/index.js 或其他页面文件
   import Head from 'next/head';
   
   export default function NewsPage() {
     return (
       <>
         <Head>
           <title>TEST</title>
         </Head>
         {/* 页面内容 */}
       </>
     );
   }
   

2. 检查自定义_document.js：若存在该文件，删除硬编码的<title>标签，或改为动态渲染，避免覆盖next/head的配置。

通用排查步骤 #

• 确认Next.js版本：运行npm list next，若版本低于13，直接采用Pages Router的配置方案。
• 查看页面源代码：检查<title>标签的实际内容，判断是未注入还是被其他代码覆盖。
• 清空浏览器缓存：用隐身模式打开页面，排除客户端缓存影响。

内容的提问来源于stack exchange，提问作者Blend Emini