Next.js 12/13/14子资源完整性检查实现及配置问题求助

1. 确认版本适配规则 #

• Next.js 12的实验性SRI仅对**静态导出（static export）**生效，若用SSR或App Router（13+），需先切换到静态导出模式测试：

  next build && next export
  

• Next.js 13/14的App Router模式下，SRI仅对静态生成的页面生效，早期13版本需额外开启appDir配置。

2. 修正配置格式 #

确保next.config.js中的SRI配置符合版本要求，避免格式错误：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    sri: true, // 直接设为true启用默认sha256算法，部分版本中指定算法对象会导致注入失败
    // 若需指定算法，确保版本支持：
    // sri: { algorithm: 'sha256' }
  },
  // 静态导出必填配置（若用静态模式）
  output: 'export'
}

module.exports = nextConfig

3. 处理动态脚本场景 #

若你的script标签是通过next/script动态生成（如dynamic模式），SRI不会自动注入，需手动读取清单文件中的哈希值添加：

import Script from 'next/script'

export default function Page() {
  return (
    <Script
      src="/static/script.js"
      integrity="sha256-xxx..." // 从.next/static/sri-manifest.json中取对应资源的哈希值
      crossOrigin="anonymous"
    />
  )
}

4. 排查自定义文档干扰 #

若使用自定义_document.js（Pages Router）或layout.js（App Router），需确保没有覆盖默认的静态资源渲染逻辑，默认组件会自动读取SRI清单注入属性。

5. 验证构建产物 #

• 执行next build后，检查.next/static/sri-manifest.json是否包含所有静态资源的哈希值，为空则说明资源未被正确扫描。
• 静态导出后，查看out目录下的HTML文件，确认静态script标签是否带有integrity属性。

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