使用Next.js时，调用现有后端接口是否仍需借助api文件夹？

在Next.js里对接现有后端，选择直接在组件调用还是通过api文件夹转发，核心看你的需求场景，下面分情况说明：

直接在组件中发起请求 #

适用场景 #

• 接口是公开可访问的，不需要携带敏感信息（比如API密钥）
• 请求逻辑简单，不需要统一的拦截、转换或错误处理
• 后端已经配置好CORS，不存在跨域问题

优点 #

• 少一层转发，减少服务器资源消耗，请求链路更短
• 代码更简洁，无需维护额外的API路由文件
• 前端可以直接处理请求状态，逻辑更直观

示例代码 #

import { useEffect, useState } from 'react';

export default function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const res = await fetch('https://your-existing-backend.com/api/users');
        if (!res.ok) throw new Error('请求失败');
        const data = await res.json();
        setUsers(data);
      } catch (err) {
        console.error('获取用户列表失败:', err);
      }
    };
    fetchUsers();
  }, []);

  return (
    <div>
      <h2>用户列表</h2>
      <ul>
        {users.map(user => <li key={user.id}>{user.name}</li>)}
      </ul>
    </div>
  );
}

通过api文件夹做请求转发 #

适用场景 #

• 需要隐藏敏感信息（比如后端API密钥、私有接口地址），避免暴露在前端代码中
• 后端未配置CORS，前端直接调用会出现跨域错误
• 需要对所有请求做统一处理：比如添加通用请求头、统一错误捕获、数据格式转换、缓存策略等
• 后续可能需要修改后端地址或请求规则，希望只在一处修改

优点 #

• 敏感数据保存在服务器环境变量中，不会泄露给前端
• 天然解决跨域问题（因为Next.js的API路由和前端同域）
• 统一管理对外请求，便于后续维护和扩展
• 可以在服务器端实现缓存、限流等优化，减轻后端压力

示例代码 #

首先在pages/api下创建转发路由：

// pages/api/proxy-users.js
import axios from 'axios';

export default async function handler(req, res) {
  try {
    // 从环境变量获取敏感密钥，不会暴露给前端
    const apiKey = process.env.BACKEND_API_KEY;
    const response = await axios.get('https://your-existing-backend.com/api/users', {
      headers: {
        'Authorization': `Bearer ${apiKey}`
      }
    });
    res.status(200).json(response.data);
  } catch (err) {
    // 统一处理错误，返回友好提示
    const statusCode = err.response?.status || 500;
    const errorMsg = err.response?.data?.message || '对接后端失败';
    res.status(statusCode).json({ error: errorMsg });
  }
}

然后在组件中调用这个本地API路由：

import { useEffect, useState } from 'react';

export default function UserList() {
  const [users, setUsers] = useState([]);
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const res = await fetch('/api/proxy-users');
        if (!res.ok) throw new Error('请求代理接口失败');
        const data = await res.json();
        setUsers(data);
      } catch (err) {
        setError(err.message);
      }
    };
    fetchUsers();
  }, []);

  if (error) return <div className="error">{error}</div>;

  return (
    <div>
      <h2>用户列表</h2>
      <ul>
        {users.map(user => <li key={user.id}>{user.name}</li>)}
      </ul>
    </div>
  );
}

总结建议 #

• 优先选择直接在组件调用：如果接口公开、无敏感信息、无需统一处理，这种方式更高效简洁
• 必须用API路由转发：如果涉及敏感数据、跨域问题，或者需要统一请求管理，这种方式更安全易维护

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