Next.js中output: export与Middleware冲突，无法完成构建求助

问题概述 #

已尝试上千种组合、耗时数天仍未解决核心问题：

• 开启output: "export"静态导出时，触发Middleware cannot be used with "output: export"错误
• 移除该配置后，项目又无法完成构建

相关文件详情 #

Middleware.js #

import { NextResponse } from "next/server";

export const protectedRoutes = ["/profile", "/assets", "/profile/[id]", "/"];
export const authRoutes = ["/admin/login"];
export const publicRoutes = [];

export function middleware(request) {
console.log(request.nextUrl.pathname);
if (protectedRoutes.includes(request.nextUrl.pathname)) {
console.log("test11");
return NextResponse.redirect(new URL("/not-auth", request.url));
}
}

export const config = {
  matcher: ["/assets/:path*", "/admin/:path*"],
};

目录结构 #

- src
   - app
      - lib.js
      - middleware.js

next.config.mjs #

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: false,
  images: {
    unoptimized: true,
  },
output: "export",
};

export default nextConfig;

错误信息 #

⨯ Middleware cannot be used with "output: export". See more info here: https://nextjs.org/docs/advanced-features/static-html-export
[x] Compiled /favicon.ico in 2.5s (611 modules)
GET /favicon.ico 200 in 1833ms
[] Middleware cannot be used with "output: export". See more info here: https://nextjs.org/docs/advanced-features/static-html-export

解决方案 #

核心原因 #

Next.js静态导出模式会生成纯静态HTML/CSS/JS文件，没有服务器端运行环境，而Middleware是运行在服务器端的请求拦截逻辑，两者本质不兼容，这是官方明确的限制。

方案一：放弃Middleware，用客户端权限校验适配静态导出 #

既然要静态导出，就不能用Middleware，改成在客户端页面做权限校验：

1. 删除middleware.js文件
2. 在每个受保护页面（如/profile、/assets）中添加客户端校验逻辑：

// app/profile/page.jsx
'use client';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function ProfilePage() {
  const router = useRouter();

  useEffect(() => {
    // 替换为你的实际权限校验逻辑，比如从localStorage读取登录状态
    const hasAuth = Boolean(localStorage.getItem('auth_token'));
    if (!hasAuth) {
      router.push('/not-auth');
    }
  }, [router]);

  return <div>个人中心内容</div>;
}

3. 保留next.config.mjs中的output: "export"配置，重新构建即可。

方案二：保留Middleware，修复移除静态导出后的构建失败问题 #

如果必须用Middleware实现权限控制，就得放弃静态导出，转而排查构建失败的原因：

1. 移除next.config.mjs中的output: "export"
2. 调整图片配置：静态导出时用的unoptimized: true不再适用，改为配置图片域名：

images: {
  remotePatterns: [
    {
      protocol: 'https',
      hostname: '你的图片域名.com', // 替换为实际图片域名
    },
  ],
},

3. 查看构建时的具体错误日志，定位到报错的文件和代码：
   • 检查是否有页面直接依赖window等客户端对象但未做判断，需用useEffect或typeof window !== 'undefined'包裹
   • 检查是否有API路由或服务器端逻辑在静态导出下被忽略，现在需要确保这些逻辑能正常运行
4. 根据日志逐一修复问题后重新构建。

内容的提问来源于stack exchange，提问作者Hüseyin APA