Next.js中如何不使用请求/上下文从Document向NextApp传props

为实现内容安全策略（Content Security Policy），需要在_document.js文件的Document组件中生成随机token，并将其传递给_app.js文件中的NextApp组件。
操作过程不使用请求对象或上下文完成。由于Document组件本身会包裹NextApp组件，询问是否存在简洁且符合Next.js惯用规范的方式，实现从Document组件向NextApp组件传递props。

这套需求完全可以通过Next.js内置的原生props透传机制实现，不需要引入请求对象、全局上下文这类额外方案，具体操作步骤如下：

• 在_document.js的自定义Document组件中，重写getInitialProps静态方法
  1. 先调用Next.js默认的Document.getInitialProps拿到框架初始化的基础props
  2. 在这个方法内部生成需要的CSP随机token
  3. 将token合并到返回的props对象中，随基础props一起返回
     示例代码：

  // _document.js
  import Document, { Html, Head, Main, NextScript } from 'next/document'
  
  class CustomDocument extends Document {
    static async getInitialProps(ctx) {
      // 继承Next.js默认的初始化逻辑
      const initialProps = await Document.getInitialProps(ctx)
      // 生成CSP校验用的随机token
      const cspNonce = generateRandomCspToken()
  
      // 合并自定义属性后统一返回
      return {
        ...initialProps,
        cspNonce
      }
    }
  
    render() {
      return (
        <Html>
          <Head>
            {/* 可在此处将nonce拼入CSP响应头/meta标签 */}
          </Head>
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      )
    }
  }
  
  export default CustomDocument
  

• 在_app.js的自定义App组件中，直接从组件入参里读取透传过来的token即可
  示例代码：

  // _app.js
  function CustomApp({ Component, pageProps, cspNonce }) {
    // 直接拿到从Document透传的cspNonce，可按需传递给页面组件
    return <Component {...pageProps} cspNonce={cspNonce} />
  }
  
  export default CustomApp
  

机制说明：Next.js在服务端渲染流程中，会自动将_document.js的getInitialProps返回的所有自定义属性，透传到_app.js自定义组件的props入参中，这套透传逻辑是框架原生支持的，完全符合官方开发规范。需要注意的是，这套传值逻辑仅在服务端渲染阶段执行，生成的token不会在客户端被篡改，刚好适配CSP nonce的安全要求。

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