NextJS 13中能否为fetch方法自定义baseURL？

当然可以实现类似axios中配置baseURL的效果，最常用的方式是封装一个自定义的fetch函数来统一管理请求配置，以下是具体方案：

1. 基础封装自定义fetch函数 #

直接包裹原生fetch，预设baseURL、默认headers、超时处理等配置，代码示例：

// utils/fetch.js
const baseURL = 'https://some-domain.com/api/';

export async function customFetch(endpoint, options = {}) {
  // 拼接完整URL，自动处理相对路径
  const fullUrl = new URL(endpoint, baseURL);
  
  // 合并默认请求头与用户传入的头信息
  const defaultHeaders = {
    'X-Custom-Header': 'foobar',
    'Content-Type': 'application/json',
    ...options.headers
  };

  // 整合所有请求配置
  const requestOptions = {
    ...options,
    headers: defaultHeaders
  };

  // 可选：添加超时处理逻辑
  if (requestOptions.timeout) {
    const timeoutPromise = new Promise((_, reject) => {
      setTimeout(() => reject(new Error('请求超时')), requestOptions.timeout);
    });
    return Promise.race([fetch(fullUrl, requestOptions), timeoutPromise]);
  }

  return fetch(fullUrl, requestOptions);
}

使用方式 #

在组件或API路由中直接调用：

// 客户端/服务器组件中
import { customFetch } from '@/utils/fetch';

async function getUsers() {
  try {
    const res = await customFetch('/users', { method: 'GET' });
    const data = await res.json();
    return data;
  } catch (err) {
    console.error('请求失败:', err);
  }
}

2. 结合环境变量管理baseURL #

如果需要在不同环境（开发/生产）切换baseURL，可以将其存入环境变量：

在.env.local文件中添加：

NEXT_PUBLIC_API_BASE_URL=https://some-domain.com/api/

然后修改自定义fetch函数读取环境变量：

const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL;

export async function customFetch(endpoint, options = {}) {
  // 后续逻辑与基础封装一致
}

注意事项 #

• 服务器组件中使用fetch时，Next.js会自动处理缓存，如需自定义缓存策略，可在requestOptions中传入next配置（如next: { revalidate: 60 }），确保缓存规则生效。
• 避免直接修改全局的fetch方法，这可能导致不可预见的全局副作用，封装独立的自定义函数更安全可控。

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