Next.js 13 + Supabase认证报错：Edge Runtime不支持Buffer模块

这个错误的核心原因是Next.js 13的Middleware默认运行在Edge Runtime环境，而Supabase官方认证工具处理cookie时依赖了Node.js核心的buffer模块，Edge Runtime不兼容该模块。以下是两种可行的解决方法：

解决方案1：强制Middleware使用Node.js Runtime #

修改middleware.ts的顶部配置，指定使用Node.js运行时，直接兼容buffer模块：

// middleware.ts
export const config = {
  runtime: 'nodejs', // 替换默认的edge runtime
};

import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs';
import { NextResponse } from 'next/server';

export async function middleware(req) {
  const res = NextResponse.next();
  const supabase = createMiddlewareClient({ req, res });
  await supabase.auth.getSession();
  return res;
}

export const matcher = [
  '/((?!_next/static|_next/image|favicon.ico).*)',
];

解决方案2：使用Edge兼容的Cookie处理逻辑 #

若不想切换到Node.js Runtime，可手动调整Supabase Auth Provider的session处理逻辑，规避对buffer模块的依赖：

// supabase-auth-provider.tsx
'use client';

import { createBrowserClient } from '@supabase/auth-helpers-nextjs';
import { SessionContextProvider } from '@supabase/auth-helpers-react';
import { useState, useEffect } from 'react';

export default function SupabaseAuthProvider({ children }) {
  const [supabase] = useState(() =>
    createBrowserClient(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
    )
  );

  const [session, setSession] = useState(null);

  useEffect(() => {
    const getInitialSession = async () => {
      const { data } = await supabase.auth.getSession();
      setSession(data.session);
    };

    getInitialSession();

    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
    });

    return () => subscription.unsubscribe();
  }, [supabase]);

  return (
    <SessionContextProvider supabaseClient={supabase} session={session}>
      {children}
    </SessionContextProvider>
  );
}

额外检查点 #

• 确保@supabase/auth-helpers-nextjs版本≥0.7.0，新版本已针对Edge Runtime做兼容优化
• 排查Middleware中是否存在其他依赖Node.js核心模块的代码，必要时替换为Edge兼容API

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