Next.js：SSG页面Props生产环境不生效但开发环境正常

你的问题核心是Next.js 生产环境下页面标题未正确渲染，仅显示URL，这通常和服务端渲染（SSR）/静态生成（SSG）时Head组件的内容未被正确抓取有关，结合你的代码，给出以下排查和修复步骤：

1. 确认Head组件的导入正确性 #

确保你使用的是Next.js官方提供的Head组件，避免自定义组件导致的渲染逻辑偏差：

import Head from 'next/head';

2. 移除无意义的mounted状态干扰 #

你的代码中定义了mounted状态但未实际使用，而useEffect仅在客户端执行，会导致服务端渲染时Head组件的内容无法被正确注入到初始HTML中，生产环境下浏览器首次加载时只能拿到空标题，进而显示URL。直接删除相关代码：

// 删除这两行无用代码
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);

3. 给标题添加兜底值，避免被空值覆盖 #

检查传入Container的customMeta是否可能携带title: undefined或空值，生产环境下这类值会覆盖默认标题，导致<title>标签内容为空。给标题加兜底处理：

const meta = {
  title: 'title',
  description: `description`,
  image: '',
  type: 'website',
  ...customMeta
};
// 确保标题不会为空
meta.title = meta.title || '默认页面标题';

4. 调整meta数据的处理逻辑（适配SSG/SSR场景） #

如果你的页面采用静态生成或服务端渲染，建议在页面组件的getStaticProps/getServerSideProps中获取并传递meta数据，直接在页面层使用Head组件，避免嵌套组件处理meta导致的服务端渲染遗漏：

// 页面组件示例
export async function getStaticProps() {
  // 按需获取页面专属meta数据
  return {
    props: {
      pageMeta: {
        title: '专属页面标题',
        description: '页面描述内容'
      }
    }
  };
}

export default function Page({ pageMeta }) {
  return (
    <Container {...pageMeta}>
      <Head>
        <title>{pageMeta.title}</title>
        <meta name="robots" content="follow, index" />
        <meta content={pageMeta.description} name="description" />
      </Head>
      {/* 页面内容 */}
    </Container>
  );
}

5. 验证生产环境的HTML输出 #

构建生产环境后，直接查看生成的HTML文件（或在浏览器右键查看页面源代码），确认<title>标签是否存在且有内容。如果标签为空，说明服务端渲染时未生成对应内容，需进一步排查组件渲染时机的问题。

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