在next项目中，接口的目录组织方式

1、使用src/services 目录

src/
  ├── services/           # API 相关的所有服务
  │   ├── api.ts         # 基础 API 配置（axios 实例等）
  │   ├── types.ts       # API 相关的类型定义
  │   └── modules/       # 按模块分类的 API 调用
  │       ├── user.ts    # 用户相关的 API
  │       ├── order.ts   # 订单相关的 API
  │       └── ...

2、示例代码

import axios from 'axios';

// 创建 axios 实例
export const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_ENDPOINT,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器
api.interceptors.request.use((config) => {
  // 可以在这里添加 token 等通用处理
  return config;
});

// 响应拦截器
api.interceptors.response.use(
  (response) => response.data,
  (error) => Promise.reject(error)
);

import { api } from '../api';

export const userService = {
  login: (data: LoginParams) => {
    return api.post('/auth/login', data);
  },
  
  getUserInfo: (userId: string) => {
    return api.get(`/users/${userId}`);
  },
  // ... 其他用户相关 API
};

3、为什么推荐 src/services

关注点分离：将所有 API 调用相关的逻辑集中在一处

可维护性：便于管理和维护 API 调用

复用性：可以在不同的组件中复用 API 调用

类型安全：可以集中管理 API 相关的类型定义

测试友好：便于对 API 调用进行单元测试

4、使用示例

import { userService } from '@/services/modules/user';

export default function LoginPage() {
  const handleLogin = async (credentials: LoginParams) => {
    try {
      const response = await userService.login(credentials);
      // 处理登录成功
    } catch (error) {
      // 处理错误
    }
  };
  
  return (
    // ... 组件 JSX
  );
}

5、小型项目使用

src/
  ├── services/           # API 相关的所有服务
  │   ├── api.ts         # 基础 API 配置（axios 实例等）
  │   ├── types.ts       # 通用类型定义
  │   ├── user.ts        # 用户相关的 API
  │   ├── order.ts       # 订单相关的 API
  │   └── ...

6、如果有axios和supabase同时使用

src/
└── services/
    ├── http/
    │   ├── client.ts        # axios 实例配置
    │   └── api/            # axios API 请求
    │       ├── user.ts
    │       ├── auth.ts
    │       └── ...
    │
    ├── supabase/
    │   ├── client.ts       # supabase 实例配置
    │   └── api/            # supabase 数据库操作
    │       ├── user.ts
    │       ├── auth.ts
    │       └── ...
    │
    └── index.ts           # 统一导出