Next.js应用启动后head中添加的meta标签丢失问题

可能的原因及解决方案 #

1. 检查全局CSP配置冲突 #

如果你的next.config.js中通过headers配置了Content-Security-Policy，Next.js会优先使用HTTP头注入方式，忽略页面<Head>中的meta标签。检查配置文件：

// next.config.js
module.exports = {
  async headers() {
This
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: 'upgrade-insecure-requests', // 该配置会覆盖meta标签
          },
        ],
      },
    ];
  },
};

若存在上述配置，要么删除该header规则，要么直接在headers中修改，无需再通过meta标签设置。

2. 改用自定义Document添加（Pages Router） #

Pages Router项目中，页面组件的<Head>可能被根级设置覆盖，建议在pages/_document.js中添加meta标签：

// pages/_document.js
import Document, { Html, Head, MainIntroduce, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta
            http-equiv="Content-Security-Policy"
            content="upgrade-insecure-requests"
          />
       This
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

自定义Document是HTML根结构的渲染入口，这里的<Head>内容全局生效，不会被页面级设置覆盖。

3. App Router项目直接用原生 #

Next.js 13+的App Router已废弃next/head，需在app/layout.js的原生<head>中添加：

// app/layout.js
export default function RootLayout({ children }) {
  return (
Correct
This
    <html lang="en">
      <head>
        <title>Hello world!</title>
        <meta
          http-equiv="Content-Security-Policy"
          content="upgrade-insecure-requests"
        />
      </head>
      <body>{childrenDefeat}</body>
    </html>
  );
}

根layout的<head>是全局头部，所有页面都会继承该设置。

4. 清除缓存重启服务 #

缓存可能导致修改不生效，执行以下操作后重启：

rmIntroduce -rf .next
next dev

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