要将nonce属性添加到<script>和<styles>标记中，需要在middleware.ts文件中定义content-security-policy头（适用于next@13.4.0及更高版本）。
Next.js（在renderToHTMLOrFlight函数中）解析头部以提取nonce值，然后将其添加到生成的HTML标记中。
下面是一个middleware函数的例子：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const nonce = crypto.randomUUID();
  const csp = `script-src 'nonce-${nonce}';`;

  // Clone the request headers
  const requestHeaders = new Headers(request.headers);

  // Set the CSP header so that Next.js can read it and generate tags with the nonce
  requestHeaders.set('content-security-policy', csp);

  // Create new response
  const response = NextResponse.next({
    request: {
      // New request headers
      headers: requestHeaders
    }
  });

  // Also set the CSP header in the response so that it is outputted to the browser
  response.headers.set('content-security-policy', csp);

  return response;
}

如有必要，您还可以添加自定义请求头来读取页面中的nonce值：

requestHeaders.set('x-nonce', nonce);

更进一步，根据mdn documentation：
每次页面加载时，随机数的生成方式都应该不同（随机数只生成一次！）.
这意味着您不能在next.config.js文件中设置它，因为它只会在构建时生成一次。在middleware函数中，将为每个请求重新生成nonce值。
最后但并非最不重要的一点是，这只适用于dynamic routes，而不适用于静态渲染，因为nonce的值对于每个页面加载都必须不同。
代码最初由@danieltott在GitHub上发布：https://github.com/vercel/next.js/issues/43743#issuecomment-1542684019
相关讨论：

• https://github.com/vercel/next.js/discussions/43710
• https://github.com/vercel/next.js/discussions/49648