部署NextJS应用至Firebase遇语法错误及MIME类型警告求助

问题现象 #

部署NextJS应用到Firebase后出现两个核心问题：

• 几乎所有JS文件抛出Uncaught SyntaxError: expected expression, got '<'错误
• 收到警告：The script from "https://eco-club-webpage.web.app/_next/static/tORMu0e4SV7nsrZDBvDI-/_buildManifest.js" was loaded even though its MIME type ("text/html") is not a valid JavaScript MIME type.

问题根源 #

从提供的配置文件可定位两个关键错误：

1. 静态资源被错误重写：firebase.json中hosting.rewrites规则将所有请求（**）都指向/server/pages/index.html，包括_next/static下的JS、CSS等静态资源。浏览器请求这些资源时返回的是HTML文件而非对应静态资源，导致解析失败并触发语法错误，同时MIME类型不匹配。
2. public目录配置错误：NextJS静态导出（next export）会生成out目录，当前配置的public: ".next"指向的是构建中间目录，并非静态导出的最终产物目录。

修复步骤 #

1. 修正firebase.json的hosting配置 #

将hosting部分替换为以下内容：

"hosting": {
  "public": "out",
  "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}

• public改为out：对应next export生成的静态文件目录
• 简化rewrites规则：Firebase Hosting会自动优先匹配已存在的静态资源（如_next/static下的文件），仅将路由请求指向根目录的index.html。

2. 执行正确的构建与导出命令 #

部署前必须执行：

next build && next export

该命令会生成out目录，包含所有静态导出的文件。

3. 重新部署验证 #

运行部署命令：

firebase deploy

部署完成后，检查浏览器控制台是否还有错误，同时确认_next/static下的JS文件请求返回的MIME类型为application/javascript，内容为正确的JS代码而非HTML。

补充说明 #

从.next/server/index.html中的"nextExport": true可确认应用采用静态导出模式，因此必须使用out目录作为Firebase Hosting的public目录，而非.next目录。之前的配置错误导致静态资源无法被正确加载，进而引发一系列错误。

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