Next.js静态构建后服务器MIME类型错误及脚本配置咨询

一、解决部署错误 #

1. 修复MIME类型问题 #

服务器返回空MIME类型是核心诱因，需确保服务器对.js文件返回正确的MIME类型：

• Nginx：在配置文件中添加或确认存在types { application/javascript js; }
• Apache：确保配置中包含AddType application/javascript .js
• 其他静态服务器：参照对应文档，设置.js文件的MIME类型为text/javascript或application/javascript

2. 解决crossorigin标签加载失败 #

• 补全crossorigin属性值：避免使用空的crossorigin=""，改为crossorigin="anonymous"（无需携带Cookie）或crossorigin="use-credentials"（需携带Cookie），空属性可能导致浏览器解析异常
• 验证CORS配置：确保服务器允许当前域名访问静态资源，若静态资源存放在CDN或其他域名，需配置对应的CORS规则
• 检查资源路径与完整性：确认服务器上/_next/static/目录下的chunk文件完整，部署时完整上传npm run build生成的所有静态文件，避免遗漏

3. 验证静态资源部署 #

重新执行npm run build，检查.next/static目录下的文件是否完整；部署时确保将.next/out（静态导出产物）或.next/static完整上传至服务器对应目录。

二、添加自定义脚本标签的方法 #

1. App Router（推荐）：使用next/script组件 #

在app/layout.tsx或目标页面组件中引入next/script，配置对应属性：

import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* 若脚本放在public目录下，路径改为/webpack-6f58ff0e804dbd64.js */}
        <Script
          src="./webpack-6f58ff0e804dbd64.js"
          type="text/javascript"
          crossOrigin=""
        />
      </body>
    </html>
  );
}

next/script还支持加载策略控制（如beforeInteractive、afterInteractive），可根据脚本需求选择合适的策略。

2. Pages Router：自定义_document.tsx #

若使用Pages Router，创建pages/_document.tsx并在<Head>中添加脚本：

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

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          type="text/javascript"
          src="./webpack-6f58ff0e804dbd64.js"
          crossOrigin=""
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

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