Next.js中如何将nonce从_document传递至_app？求解决方案

问题分析 #

你当前的写法存在两个核心问题：

1. 直接修改App组件的静态属性时，Next.js内部的组件包装逻辑会导致该属性丢失；
2. 传递nonce props时，若_app组件未显式接收该参数，自然无法获取到值。

正确实现方案 #

1. 传递静态属性到_app #

不要直接修改原App组件的静态属性，需创建继承原组件静态属性的高阶组件：

ctx.renderPage = () =>
  originalRenderPage({
    enhanceApp: (App) => {
      // 构建高阶组件，保留原App的渲染逻辑
      const EnhancedApp = (props) => <App {...props} />;
      // 复制原App的所有静态属性到新组件
      Object.assign(EnhancedApp, App);
      // 添加自定义静态属性
      EnhancedApp.nonce = nonce;
      return EnhancedApp;
    },
  });

2. 传递props到_app #

首先确保你的_app组件显式接收nonce参数：

// pages/_app.jsx
export default function MyApp({ Component, pageProps, nonce }) {
  // 在此处使用nonce，比如传递给全局组件或设置DOM属性
  return (
    <div nonce={nonce}>
      <Component {...pageProps} />
    </div>
  );
}

然后在enhanceApp中传递该props：

ctx.renderPage = () =>
  originalRenderPage({
    enhanceApp: (App) => (props) => {
      return <App {...props} nonce={nonce} />;
    },
  });

关键注意事项 #

• 由于你启用了静态页面优化（SSG），nonce必须是构建时即可确定的值，如果需要动态生成nonce（比如每个请求不同），静态优化模式无法满足，需考虑切换到ISR或SSR模式。
• 不要在_app中添加getInitialProps，否则会自动禁用静态优化，这和你的需求冲突。

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