Next.js+next-i18next下Axios请求避免语言前缀的方法

问题原因 #

当页面处于带语言前缀的路由（比如/en/home）时，使用相对路径（如api/login）发起Axios请求，会基于当前页面的路由路径进行拼接，最终导致请求URL带上语言前缀。

解决方案 #

1. 使用根绝对路径发起请求 #

把请求路径改为以/开头的绝对路径，直接指向项目根目录下的API路由，不受当前页面语言前缀影响：

const { data } = await axios.post(`/api/login`, {
  email,
  password,
});

2. 配置Axios全局baseURL #

在项目中统一配置Axios的基础URL，后续所有请求都基于这个路径发起，避免重复编写根路径：

// 示例：在axios实例配置文件中
import axios from 'axios';

const apiClient = axios.create({
  baseURL: '/', // 也可根据环境配置完整域名，如process.env.NEXT_PUBLIC_API_URL
});

// 发起请求时直接写接口路径
const { data } = await apiClient.post(`api/login`, {
  email,
  password,
});

3. （可选）在Next.js中排除API路径的国际化处理 #

如果需要从根源上避免API路径被添加语言前缀，可修改next.config.js，通过重写规则忽略API路径的语言前缀：

const { i18n } = require("./next-i18next.config");
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  i18n,
  async rewrites() {
    return [
      {
        source: '/:locale/api/:path*',
        destination: '/api/:path*',
        locale: false, // 跳过语言前缀处理
      },
    ];
  },
};
module.exports = nextConfig;

注：此方法相对复杂，优先推荐前两种更直接的方案。

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