Next.js Supabase模板中Server Action始终返回空字典的问题

1. 修正Server Action的错误返回逻辑 #

你直接返回{ error: "Email not valid" }的方式不对——Next.js Server Action不会自动把返回的JSON转换成页面的searchParams。模板原生逻辑应该是通过redirect方法带参数跳转，替换成下面的代码：

import { redirect } from 'next/navigation';

// 替换你的判断分支
if (email !== process.env.ADMIN_EMAIL) {
  // 用encodeURIComponent处理特殊字符，避免参数解析异常
  redirect(`/register?error=${encodeURIComponent("Email not valid")}`);
}

直接返回JSON只会在Server端有输出，不会触发前端页面跳转，自然不会更新searchParams。

2. 确认page.tsx中searchParams的读取方式 #

如果是Server Component，按下面的方式读取：

export default function RegisterPage({ searchParams }: { searchParams: { error?: string } }) {
  return (
    <div>
      {searchParams.error && <p className="text-red-500">{searchParams.error}</p>}
      {/* 注册表单代码 */}
    </div>
  );
}

如果是Client Component，要用useSearchParams钩子：

'use client';
import { useSearchParams } from 'next/navigation';

export default function RegisterPage() {
  const searchParams = useSearchParams();
  const errorMsg = searchParams.get('error');
  
  return (
    <div>
      {errorMsg && <p className="text-red-500">{errorMsg}</p>}
      {/* 注册表单代码 */}
    </div>
  );
}

3. 检查表单的绑定方式 #

确保你的注册表单是直接绑定Server Action的，不要用自定义fetch逻辑：

import { registerAction } from './action';

<form action={registerAction}>
  {/* 邮箱输入框等字段 */}
  <button type="submit">注册</button>
</form>

自定义fetch需要手动处理跳转或状态更新，和模板原生逻辑不兼容，会导致searchParams不更新。

4. 验证环境变量与判断逻辑 #

虽然控制台显示分支执行，还是要确认：

• process.env.ADMIN_EMAIL是否正确加载（可以在action里打印console.log(process.env.ADMIN_EMAIL)）
• 邮箱对比有没有大小写问题（比如模板默认是否转小写存储，你有没有统一大小写再判断）

5. 确认路由与版本兼容性 #

确保你用的是App Router（模板默认是），且Next.js版本在13.4以上（Server Actions的最低支持版本）。

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