Next.js如何为自动生成的script脚本标签批量添加async属性

实现方法（Pages Router 场景，适配Next.js 12及以上版本） #

你可以通过自定义_document.js批量修改框架注入的脚本属性，具体操作如下：

1. 进入项目的pages目录，新建/打开已有的_document.js文件
2. 写入以下代码：

import Document, { Html, Head, Main, NextScript } from 'next/document'

class CustomDocument extends Document {
  static async getInitialProps(ctx) {
    const props = await Document.getInitialProps(ctx)
    // 匹配所有Next.js自动生成的静态脚本，批量添加async属性
    props.html = props.html.replace(
      /<script src="\/_next\/static/g,
      '<script async src="/_next/static'
    )
    return props
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default CustomDocument

实现方法（App Router 场景，适配Next.js 13及以上版本） #

如果使用App Router模式，可通过修改next.config.js配置实现批量注入：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    after: (res) => {
      if (res.headers.get('content-type')?.includes('text/html')) {
        let body = res.body
        body = body.replace(/<script src="\/_next\/static/g, '<script async src="/_next/static')
        return new Response(body, res)
      }
      return res
    }
  }
}

module.exports = nextConfig

注意事项 #

• 如果你的项目存在脚本执行顺序依赖，建议将上述代码中的async替换为defer，避免异步加载顺序不确定导致的依赖报错。
• 上述正则只会匹配Next.js框架自动生成的静态chunk脚本，不会修改你手动引入的第三方脚本标签。

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