如何移除Next.js自动添加到源码页面的多余脚本？

首先要明确：只有当你的应用是**纯静态页面、不需要任何Next.js客户端功能（比如SSR/SSG hydration、客户端路由、React交互）**时，才能完全移除所有自动注入的脚本，否则会直接破坏应用功能。以下分两种路由方案给出具体实现：

Pages Router 实现步骤 #

1. 自定义_document.js移除框架脚本
   在pages/_document.js中，直接去掉NextScript组件——这是Next.js注入核心运行时脚本的入口：

   import Document, { Html, Head, Main } from 'next/document'
   
   class MyDocument extends Document {
     static async getInitialProps(ctx) {
       const initialProps = await Document.getInitialProps(ctx)
       return { ...initialProps }
     }
   
     render() {
       return (
         <Html>
           <Head />
           <body>
             <Main />
             {/* 移除NextScript，阻止所有框架脚本注入 */}
           </body>
         </Html>
       )
     }
   }
   
   export default MyDocument
   

2. 配置静态导出禁用客户端功能
   修改next.config.js，启用静态导出并禁用不必要的客户端特性：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     output: 'export',
     reactStrictMode: false,
     experimental: {
       clientRouterFilter: false,
       clientLinkFilter: false,
     },
   }
   
   module.exports = nextConfig
   

App Router 实现步骤 #

1. 修改根布局不加载框架脚本
   在app/layout.js中，不要引入任何Next.js自动注入的脚本相关逻辑：

   export default function RootLayout({ children }) {
     return (
       <html lang="zh-CN">
         <body>{children}</body>
       </html>
     )
   }
   

2. 配置静态导出
   同样在next.config.js中设置静态导出并禁用客户端功能：

   /** @type {import('next').NextConfig} */
   const nextConfig = {
     output: 'export',
     experimental: {
       clientRouterFilter: false,
       clientLinkFilter: false,
       hydrationEdge: false,
     },
   }
   
   module.exports = nextConfig
   

关键注意事项 #

• 执行npm run build后，检查out目录下的HTML文件，确认没有Next.js注入的<script>标签。
• 如果你的应用需要客户端交互（比如按钮点击、路由跳转），绝对不能移除这些脚本——强行移除会导致hydration失败、功能完全失效。
• 静态导出模式下，Next.js会生成纯静态资源，完全脱离框架运行时，这是唯一能彻底隐藏所有框架脚本的安全方式。

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