Next.js 12.2.2生产环境中Clerk Middleware崩溃求助

错误根源 #

报错指向__import_unsupported('buffer')，说明Clerk依赖的rfc4648包在Edge Runtime环境下尝试导入Node.js核心模块buffer，而Next.js 12.2.2的Edge Runtime默认不支持该模块，导致生产环境加载崩溃。

解决方案 #

1. 升级@clerk/nextjs至兼容版本 #

旧版@clerk/nextjs@4.8.2与Next.js 12.2.2的Edge Runtime存在兼容性问题，升级到较新版本可修复buffer依赖问题：

npm install @clerk/nextjs@latest

2. 配置Webpack为Edge Runtime添加buffer Polyfill #

若无法升级依赖，需在next.config.js中添加Webpack配置，提供buffer的polyfill：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config, { isServer }) => {
    // 为非服务端环境添加buffer polyfill
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        buffer: require.resolve('buffer/'),
      };
    }
    return config;
  },
};

module.exports = nextConfig;

安装buffer依赖包：

npm install buffer

3. 确认Middleware的Edge Runtime配置 #

Clerk Middleware需要运行在Edge Runtime，可在middleware.js顶部显式声明：

export const config = {
  runtime: 'edge',
};

import { withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

export default withClerkMiddleware((req) => {
  return NextResponse.next();
});

4. 移除冲突认证依赖 #

你的项目同时包含next-auth和@clerk/nextjs两个认证方案，可能引发依赖冲突。若仅使用Clerk，建议移除NextAuth相关依赖：

npm uninstall next-auth @next-auth/prisma-adapter

验证流程 #

1. 执行npm run build构建生产包
2. 本地启动生产环境：npm run start，检查是否仍有崩溃
3. 部署至Vercel后，查看Edge函数日志确认问题解决

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