Next.js：直接操作数据库与API路由操作的区别及优势

两种方式确实都能实现功能，但API路由在安全、可维护性、业务逻辑管控这几个维度有明显优势，具体来说：

• 保护敏感信息与权限控制
  直接在客户端组件里写Supabase查询，虽然Supabase公钥是公开的，但如果涉及更高权限的操作（比如修改用户角色、批量删除数据），客户端权限通常受限。要是不慎把服务端密钥（比如Supabase的service role key）暴露到客户端，后果不堪设想。API路由运行在服务端，能安全读取环境变量里的敏感配置，用服务端权限执行数据库操作，权限管控更灵活。

• 集中复用业务逻辑
  比如创建item时，你可能需要做数据校验、生成唯一标识、关联用户其他数据、甚至发送通知邮件。如果把这些逻辑写在组件里，多个页面或组件需要相同功能时只能重复代码，后续修改要改多处。而API路由里的逻辑是集中的，任何前端页面、甚至其他前端项目都能调用，改逻辑只需要维护这一处。

• 避免暴露数据库结构
  直接在组件里写查询，用户打开浏览器控制台就能看到你操作的表名、字段名，相当于把数据库结构直接暴露给外部，增加了被攻击的风险。用API路由的话，客户端只知道调用/api/createItem这个接口，完全不知道背后操作的是哪个表、哪些字段，大幅降低攻击面。

• 统一错误处理与日志排查
  在API路由里可以统一捕获所有错误（比如数据库连接失败、数据校验不通过），返回标准化的响应给客户端，还能在服务端记录详细日志，方便后续排查问题。如果在组件里处理错误，每个组件都要重复写错误捕获逻辑，而且客户端的日志很难统一收集。

• 处理复杂/耗时操作更高效
  比如上传文件后需要压缩图片、生成缩略图，或者批量导入数据，这些操作在客户端做会占用用户设备资源，还可能因为用户关闭页面导致操作中断。放到API路由（服务端）执行，不仅效率更高，还能保证操作的完整性。

举个API路由的实际处理例子：

// pages/api/createItem.js
import supabase from '../../lib/supabase-server';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: '仅支持POST请求' });
  }

  const { username, title, description } = req.body;

  // 服务端校验数据，避免前端绕过校验
  if (!title || title.trim().length === 0 || title.length > 100) {
    return res.status(400).json({ error: '标题不能为空且长度不能超过100字符' });
  }

  const { data, error } = await supabase
    .from('items')
    .insert({ username, title, description })
    .select();

  if (error) {
    console.error('创建Item失败:', error);
    return res.status(500).json({ error: '服务器内部错误' });
  }

  res.status(200).json(data);
}

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