能否通过NextJS后端API中转调用SpringBoot后端API？

完全可以实现你说的这种请求链路，这也是NextJS开发里很常用的做法，能帮你实现统一请求入口、处理跨域、添加鉴权/日志等中间件逻辑，还能隐藏后端API地址，提升安全性。

1. 编写NextJS中转API路由 #

在NextJS项目的pages/api目录下新建一个路由文件（比如spring-proxy.js），用来转发请求到SpringBoot后端，再把响应返回给前端：

import axios from 'axios';

export default async function handler(req, res) {
  try {
    // 调用SpringBoot后端API，地址可以用环境变量管理
    const springRes = await axios.get('http://你的SpringBoot服务器地址/api/目标接口');
    
    // 把SpringBoot的响应状态和数据直接返回给前端
    res.status(springRes.status).json(springRes.data);
  } catch (err) {
    // 统一处理错误，返回友好提示
    const errStatus = err.response?.status || 500;
    const errMsg = err.response?.data?.message || '后端服务请求失败';
    res.status(errStatus).json({ message: errMsg });
  }
}

2. 前端组件调用NextJS中转API #

不管是服务器组件还是客户端组件，都能直接调用这个中转API：

服务器组件（NextJS 13+ App Router） #

export default async function HomePage() {
  // 直接在组件内调用NextJS API
  const res = await fetch('/api/spring-proxy');
  const data = await res.json();

  return (
    <div>
      <h2>从SpringBoot获取的数据：</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

客户端组件 #

'use client';

import { useState, useEffect } from 'react';

export default function HomePage() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch('/api/spring-proxy');
        if (!res.ok) throw new Error('请求失败');
        const resData = await res.json();
        setData(resData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <p>加载中...</p>;
  if (error) return <p>出错了：{error}</p>;

  return (
    <div>
      <h2>从SpringBoot获取的数据：</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

3. 实用优化技巧 #

• 环境变量管理：把SpringBoot的地址存在.env.local文件里，比如SPRING_API_BASE_URL=http://你的SpringBoot服务器地址，然后在API路由里用process.env.SPRING_API_BASE_URL调用，避免硬编码。
• 请求参数/头转发：如果需要把前端的请求参数、请求头（比如token）传给SpringBoot，可以直接复用req对象的内容：

const springRes = await axios({
  method: req.method,
  url: `${process.env.SPRING_API_BASE_URL}${req.url}`,
  data: req.body,
  headers: {
    Authorization: req.headers.authorization,
    'Content-Type': req.headers['content-type']
  }
});

• 中间件加持：可以在NextJS API里加鉴权逻辑，比如校验前端传来的token，通过后再转发请求，避免SpringBoot直接暴露给外部。

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