如何在Next.js应用中正确调用外部API？

你的实现是可行的，但属于「客户端→Next.js API路由→外部API」的间接调用模式，这种模式在特定场景下有用，但并非所有情况都需要多这一层转发。下面分几种常见的正确实践来拆解：

1. 直接在服务器组件中调用外部API（推荐用于页面预渲染） #

Next.js App Router默认的组件都是服务器组件，不需要加"use client"标记，直接在组件里写异步代码就能在服务器端获取数据，不需要useEffect或状态管理：

// app/hello/page.tsx
import axios from "axios";

export default async function HelloPage() {
  // 服务器端直接调用外部API
  const response = await axios.get("http://localhost:5000");
  const msg = response.data.msg;

  return <div>{msg}</div>;
}

这种方式的优势：

• 数据在服务器端获取，无需客户端发起请求，页面首次加载更快（支持SSR/SSG）
• 不用处理客户端状态，代码更简洁
• 外部API地址不会暴露在客户端代码中，安全性更高

2. 客户端组件直接调用外部API（无需中转） #

如果必须在客户端发起请求（比如需要用户交互触发、依赖客户端状态），可以直接调用外部API，不用通过Next.js的API路由中转：

// app/hello/page.tsx
"use client";

import axios from "axios";
import { useState, useEffect } from "react";

export default function HelloPage() {
  const [msg, setMsg] = useState("");

  useEffect(() => {
    // 直接调用外部API
    axios.get("http://localhost:5000")
      .then(res => setMsg(res.data.msg))
      .catch(err => console.error(err));
  }, []);

  return <div>{msg}</div>;
}

注意：这种方式需要确保外部API支持跨域（CORS），如果是你自己的MERN后端，要在Node.js服务里配置CORS允许Next.js的域名访问。

3. 用Next.js API路由做中转（你的当前实现） #

你现在的写法是正确的，这种中转模式适合以下场景：

• 外部API不支持CORS，需要通过服务器端转发绕过跨域限制
• 需要在中转层添加额外逻辑，比如鉴权、数据过滤、缓存处理
• 不想把外部API的地址暴露给客户端

但如果没有这些需求，直接在服务器组件或客户端组件调用会更高效，没必要多这一层转发。

总结 #

• 静态页面/无客户端交互需求：优先用服务器组件直接调用外部API，代码简单性能好
• 需要客户端触发请求/依赖客户端状态：直接在客户端组件调用外部API（确保CORS配置正确）
• 有跨域问题或需中转逻辑：使用Next.js API路由作为中转

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