Next.js中@supabase/ssr结合Zod表单验证的最佳实践

我尝试使用@supabase/ssr实现认证功能，根据Supabase官方文档，登录/注册表单需要作为调用login、signup服务器动作的服务器组件（示例代码如下）。但我想使用Zod做表单验证，而react-hook-form的useForm钩子属于客户端特性，同时我还用到了有状态值。想咨询最佳实践：从客户端组件调用服务器动作是否可行？还是应将动作改为API端点？亦或是有其他解决方案？

import { login, signup } from './actions'

export default function LoginPage() {
  return (
    <form>
      <label htmlFor="email">Email:</label>
      <input id="email" name="email" type="email" required />
      <label htmlFor="password">Password:</label>
      <input id="password" name="password" type="password" required />
      <button formAction={login}>Log in</button>
      <button formAction={signup}>Sign up</button>
    </form>
  )
}

参考文档：Supabase官方文档：Next.js服务端认证指南

解决方案建议 #

• 从客户端组件调用服务器动作完全可行，这是Next.js推荐的交互方案之一。你可以把表单做成客户端组件，用react-hook-form + Zod完成前端实时验证，再通过React的状态API（如useFormState）调用服务器动作提交数据，完美兼容有状态值的场景。

  示例实现思路：

  'use client';
  import { useForm } from 'react-hook-form';
  import { z } from 'zod';
  import { login, signup } from './actions';
  import { useFormState } from 'react-dom';
  
  // 定义Zod验证规则
  const authSchema = z.object({
    email: z.string().email('请输入有效的邮箱地址'),
    password: z.string().min(6, '密码长度不能少于6位')
  });
  
  export default function LoginClient() {
    const { register, handleSubmit, formState: { errors } } = useForm({
      resolver: async (data) => {
        try {
          await authSchema.parseAsync(data);
          return { values: data, errors: {} };
        } catch (err) {
          return { errors: err.flatten().fieldErrors };
        }
      }
    });
  
    // 处理服务器返回的状态（如登录失败信息）
    const [loginState, loginAction] = useFormState(login, undefined);
  
    return (
      <div>
        <form onSubmit={handleSubmit(async (data) => {
          await loginAction(data);
        })}>
          <label htmlFor="email">邮箱:</label>
          <input id="email" {...register('email')} type="email" />
          {errors.email && <p className="text-red-500">{errors.email[0]}</p>}
          
          <label htmlFor="password">密码:</label>
          <input id="password" {...register('password')} type="password" />
          {errors.password && <p className="text-red-500">{errors.password[0]}</p>}
          
          {loginState?.error && <p className="text-red-500">{loginState.error}</p>}
          
          <button type="submit">登录</button>
          <button 
            type="button" 
            onClick={handleSubmit(async (data) => await signup(data))}
          >
            注册
          </button>
        </form>
      </div>
    );
  }
  

• 无需改为API端点，服务器动作本身就是Next.js为服务端交互设计的更简洁方案：无需额外配置路由，能直接在组件内调用，还能更好地和React的状态系统结合，代码结构更紧凑。

• 额外优化要点：

  • 服务器动作内部必须重复做Zod验证，避免前端验证被绕过的安全风险
  • 用useFormStatus实现提交加载状态，提升用户体验
  • 在服务器动作中处理Supabase认证逻辑，返回标准化的错误信息给客户端展示

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