Next.js项目中Supabase API密钥导入失败，请求返回401未授权

我正在开发一个基于Next.js的项目，使用Supabase Client调用接口时返回401（未授权）错误。

相关配置信息 #

1. Supabase客户端创建代码 #

import { createClient } from '@supabase/supabase-js'
const supabaseUrl = 'https://elkiggqnkibjbzgdfqrx.supabase.co'
const supabaseKey = process.env.NEXT_SUPABASE_API
export const supabase = createClient(supabaseUrl, `${supabaseKey}`)

2. 环境变量配置 #

NEXT_SUPABASE_API=<supabase_key>

3. 客户端错误信息 #

POST https://elkiggqnkibjbzgdfqrx.supabase.co/rest/v1/earlybird 401 (Unauthorized)

4. 数据库策略 #

目标PostgreSQL表earlybird已配置如下策略：

alter policy "Enable insert for anon key only"
on "public"."earlybird"
to anon
with check (
  true
);

5. 表结构 #

排查与解决办法 #

1. 确认Supabase Key类型
   必须使用Supabase控制台「设置」→「API」中的匿名公钥（anon public key），不要用服务端密钥（service role key）。服务端密钥权限过高，无法匹配anon策略的权限校验。

2. 修复环境变量客户端访问权限
   Next.js中，客户端代码无法读取不带NEXT_PUBLIC_前缀的环境变量。修改环境变量名：

   NEXT_PUBLIC_SUPABASE_API=<你的匿名公钥>
   

   同步更新客户端代码：

   const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_API
   

3. 验证策略状态与权限

   • 登录Supabase控制台，进入「数据库」→「策略」，确认earlybird表的Enable insert for anon key only策略处于启用状态。
   • 确保anon角色拥有表的INSERT权限，执行以下SQL：

     GRANT INSERT ON public.earlybird TO anon;
     

4. 检查环境变量是否加载成功
   在客户端初始化代码中临时添加日志，确认密钥是否正确读取：

   console.log('Supabase Key:', supabaseKey) // 开发环境调试用，上线前删除
   

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