使用Next-auth中间件出现api-routes-static-export警告如何解决？

问题描述 #

我用NextAuth保护站点的不同区域，完全按照官方示例编写了middleware.js，但执行next export构建时出现警告：

warn - 通过next export静态导出Next.js应用会禁用API路由和中间件。该命令仅适用于纯静态主机，无需使用它即可让应用静态化。应用中没有服务器端数据依赖的页面将由next build自动静态导出，包括使用getStaticProps的页面。

移除middleware.js后警告消失，确认是该文件导致的问题。我的中间件代码如下：

// middleware.js
import { withAuth } from 'next-auth/middleware';

export default withAuth({
    callbacks: {
        authorized: ({ req, token }) => {
            // `/admin` 需要admin角色
            if (req.nextUrl.pathname === "/admin") {
                return token?.userRole === "admin"
            }
            // `/exclusive` 需要通过审核
            if (req.nextUrl.pathname === '/exclusive') {
                return (token?.exclusive && token.exclusive !== 'APPLIED');
            }
            
            // `/downloads` 仅需用户登录
            return !!token
        },
    },
})
  
export const config = { matcher: ["/admin/:path*", "/downloads/:path*", "/exclusive/:path*"] }

解决方案 #

警告的核心原因是：next export会生成纯静态资源，不支持依赖服务器运行的功能（比如中间件、API路由）。针对这个问题，有两种可行的解决思路：

1. 放弃使用next export，改用标准构建流程 #

Next.js本身会自动静态化无服务器端数据依赖的页面（包括用getStaticProps的页面），不需要手动执行next export。直接用以下命令构建并启动应用：

next build
next start

这种方式能保留中间件的功能，权限校验在请求入口完成，安全性更高，适合部署到支持Next.js服务器的平台（如Vercel、Netlify、AWS Amplify等）。

2. 保留静态导出，改用客户端权限校验 #

如果必须部署到纯静态主机（无法运行服务器端代码），则需要移除中间件，在每个需要保护的页面内部通过NextAuth的客户端钩子做权限校验：

以Admin页面为例：

import { useSession, signIn } from "next-auth/react";
import { useEffect } from "react";
import { useRouter } from "next/router";

export default function Admin() {
  const { data: session, status } = useSession();
  const router = useRouter();

  useEffect(() => {
    // 已登录但权限不足，跳转到首页
    if (status === "authenticated" && session.user.userRole !== "admin") {
      router.push("/");
    }
    // 未登录则跳转到登录页
    if (status === "unauthenticated") {
      signIn();
    }
  }, [session, status, router]);

  // 加载状态时显示占位内容
  if (status === "loading") {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h1>Admin 专属页面</h1>
      {/* 页面内容 */}
    </div>
  );
}

同理，/exclusive和/downloads页面也可以用类似逻辑：

• /exclusive：校验session.user.exclusive是否不等于APPLIED
• /downloads：仅需校验status === "authenticated"

注意：客户端校验只是前端层面的拦截，对于敏感数据或操作，必须在后端（如果有接口）补充权限校验，防止用户绕过前端限制。

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