Next.js构建后页面<title>与<meta>标签源码不显示问题排查

核心问题 #

你当前代码的Head组件放置位置错误，是导致构建后静态页面无法查找到title、meta标签的直接原因：
你将next/head导出的Head组件嵌套在自定义Layout组件内部，Next.js的SSG（静态站点生成，你当前用的getStaticPaths+getStaticProps属于SSG模式）在构建阶段提取静态head内容时，无法正确解析嵌套在自定义组件内部的Head标签。本地dev环境是客户端实时渲染，所以不会触发这个问题。

修复方案 #

将Head组件移到Layout组件的外层，和Layout同级放在根节点的React碎片中即可，修改后的代码结构如下：

const Post = (props) => {
    const router = useRouter()
    const { Id } = router.query
    console.log(props.category_list)
    return (
        <>
            {/* Head移到Layout外层 */}
            <Head>
                <meta charSet="utf-8" />
                <title>Welcome to Payments, Deals</title>
                <meta name="description" content="This is sample content" />
                <meta name="keywords" content="" />
                <meta name="google-site-verification" content="rtIRrUNRpgZ_lFtlfS8LJ0-8j_d569BXS9NOGa_nM6Y" />
            </Head>
            <Layout>
                {/* 原有页面内容保持不变 */}
                <Grid className="store-list">
                    <Grid.Column width={16}>
                        <p>
                            <span>{props.category_title.heading_label}</span>
                        </p>
                    </Grid.Column>
                </Grid>
                {/* 其余原有代码省略 */}
            </Layout>
        </>
    )
}

额外注意事项 #

• 如果你的Layout组件内部也定义了Head标签和重复的title、meta字段，会出现标签覆盖问题，建议统一管理head逻辑：要么所有页面的head都单独写在页面层，要么给Layout组件加props参数动态传入title、meta内容。
• 修改后重新执行next build+next start，查看页面源码即可看到对应的title和meta标签。

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