Next.js 14部署至IIS后出现MIME类型错误求助

一、修正web.config的MIME类型配置 #

添加mimeMap时出现500错误，通常是配置格式错误或重复定义了已有MIME类型。正确配置需先移除重复项再添加，避免冲突：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
    </handlers>
    <rewrite>
      <rules>
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="^server.js\/debug[\/]?" />
        </rule>
        <rule name="StaticContent">
          <action type="Rewrite" url="public{REQUEST_URI}" />
        </rule>
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True" />
          </conditions>
          <action type="Rewrite" url="server.js" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <!-- 先移除系统默认的MIME映射，避免重复定义报错 -->
      <remove fileExtension=".js" />
      <mimeMap fileExtension=".js" mimeType="application/javascript" />
      <remove fileExtension=".css" />
      <mimeMap fileExtension=".css" mimeType="text/css" />
      <!-- 补充Next.js常用静态资源的MIME类型 -->
      <remove fileExtension=".json" />
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
    <iisnode node_env="production" />
  </system.webServer>
</configuration>

二、确保server.js正确处理静态资源 #

Next.js 14 App Router的server.js需要明确托管静态文件，检查你的代码是否包含以下逻辑：

const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    const { pathname } = parsedUrl;
    // 优先处理Next.js的静态资源请求
    if (pathname.startsWith('/_next/static/') || pathname.startsWith('/static/')) {
      app.serveStatic(req, res, parsedUrl);
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(process.env.PORT || 3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

三、IIS站点配置检查 #

• 确认已安装iisnode模块，这是IIS运行Node.js应用的必要组件。
• 站点物理路径需指向Next.js构建后的根目录（包含.next、public、server.js、web.config）。
• 启用IIS的静态内容功能：打开服务器管理器 -> 添加角色和功能 -> Web服务器 -> 常见HTTP功能 -> 勾选「静态内容」。

四、部署流程验证 #

1. 本地执行npm run build生成生产环境构建文件。
2. 将构建后的所有文件上传至IIS站点的物理路径。
3. 重启IIS站点，清除浏览器缓存后重新访问。

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