Next.js Meta标签加载异常：标题被URL替换求助

核心问题 #

页面初始加载时正确站点标题仅显示半秒，随后被当前URL替换；页面源码中存在正确的meta标签，但DOM的head标签中未渲染，开发/生产环境均存在此问题，且使用getStaticProps预取数据。

可能原因及解决步骤 #

1. 服务端与客户端数据不匹配引发 hydration 覆盖

Next.js 中如果服务端渲染的meta内容和客户端 hydration 后的内容不一致，会自动用客户端内容覆盖服务端内容，这就是“闪一下正确标题后被替换”的直接原因。

• 排查点：
  • 在HomePageHead组件中添加console.log(page?.title)，对比服务端（构建日志）和客户端（浏览器控制台）的输出值是否一致。
  • 检查fallbackPage的title字段是否为空，若getHomePage返回undefined会使用这个兜底数据，空值会导致客户端渲染时用URL填充标题。
  • 确认sanityClient(token)在服务端和客户端的配置逻辑一致，避免客户端无法获取数据导致page为undefined。
• 修复方案：
  • 确保getStaticProps返回的page、settings数据在客户端 hydration 时完整传递，不要在客户端重新发起请求覆盖预取数据。
  • 给fallbackPage设置合理的默认标题，比如：

    const fallbackPage = { title: '默认站点标题', overview: '' }
    

2. SiteMeta组件逻辑错误

如果SiteMeta在客户端渲染时，处理title的逻辑存在漏洞（比如title为空时自动用URL填充），会导致标题被替换。

• 排查点：
  • 查看SiteMeta的实现代码，检查是否存在title || window.location.href这类自动用URL填充标题的逻辑。
  • 确认<title>标签的生成逻辑，是否在服务端和客户端输出一致。
• 修复方案：
  • 在HomePageHead中强制给title设置多层兜底值，避免空值出现：

    export default function HomePageHead({ settings, page }: HomePageHeadProps) {
      const siteTitle = settings?.siteTitle || '默认站点标题'
      const finalTitle = page?.title || siteTitle
    
      return (
        <SiteMeta
          description={page?.overview ? toPlainText(page.overview) : settings?.siteDescription || ''}
          image={settings?.ogImage}
          title={finalTitle}
        />
      )
    }
    

  • 移除SiteMeta中任何自动用URL填充标题的逻辑。

3. Next.js Head组件使用冲突

如果全局_app.js中的Head组件和页面级Head组件都设置了标题，会导致渲染冲突。

• 排查点：
  • 检查_app.js中是否有全局<title>标签设置，是否和页面级标题逻辑冲突。
• 修复方案：
  • 全局_app.js只保留基础meta配置，把标题控制权交给页面级Head：

    // _app.js
    import Head from 'next/head'
    
    export default function MyApp({ Component, pageProps }) {
      return (
        <>
          <Head>
            <meta charSet="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
          </Head>
          <Component {...pageProps} />
        </>
      )
    }
    

  • 给页面级<title>标签添加唯一key，避免Next.js合并标签时出错：

    // SiteMeta组件内
    <title key="page-title">{title}</title>
    

4. 预取数据验证

确认getStaticProps中获取的数据是否正确：

• 在getStaticProps中添加日志，打印page的返回值，验证服务端是否正确获取到了title字段：

  export const getStaticProps: GetStaticProps<PageProps, Query, PreviewData> = async (ctx) => {
    // ... 现有代码
    console.log('服务端获取的page数据:', page)
    return {
      props: { page, settings, preview, token: previewData.token ?? null },
    }
  }
  

内容的提问来源于stack exchange，提问作者Burger Sasha