Next.js API路由404错误：Sanity数据请求失败求助

问题根源 #

你的API路由文件路径不符合Next.js的路由规则，Next.js的Pages Router和App Router对API路由的目录结构、文件命名要求不同，当前src/app/pages/api/db/getRideTypes.js的路径是错误的。

分场景解决方案 #

场景1：使用Pages Router（项目存在src/pages目录） #

• 迁移API文件到正确路径：将src/app/pages/api/db/getRideTypes.js移动至src/pages/api/db/getRideTypes.js
• 确保文件导出格式符合Pages Router规范：默认导出一个接收req和res参数的处理函数
• 示例代码：

import { sanityClient } from '../../../lib/sanity'; // 根据你的Sanity客户端实际路径调整

export default async function handler(req, res) {
  if (req.method !== 'GET') {
    res.setHeader('Allow', ['GET']);
    return res.status(405).end(`Method ${req.method} Not Allowed`);
  }

  try {
    const rideTypes = await sanityClient.fetch(`*[_type == "rideType"]`);
    return res.status(200).json(rideTypes);
  } catch (err) {
    return res.status(500).json({ error: '获取车型数据失败' });
  }
}

场景2：使用App Router（项目以src/app为主目录） #

• 创建正确的API目录结构：在src/app下新建api/db/getRideTypes文件夹
• 将原代码迁移至该文件夹下的route.js文件（App Router要求API路由文件必须命名为route.js）
• 修改导出格式：导出GET异步函数，返回Response对象
• 示例代码：

import { sanityClient } from '../../../../lib/sanity'; // 根据你的Sanity客户端实际路径调整

export async function GET(request) {
  try {
    const rideTypes = await sanityClient.fetch(`*[_type == "rideType"]`);
    return new Response(JSON.stringify(rideTypes), {
      status: 200,
      headers: { 'Content-Type': 'application/json' },
    });
  } catch (err) {
    return new Response(JSON.stringify({ error: '获取车型数据失败' }), {
      status: 500,
      headers: { 'Content-Type': 'application/json' },
    });
  }
}

额外检查项 #

• 确认RideSelector.js中的fetch路径拼写无误，无大小写或层级错误：

  // 确保请求路径为/api/db/getRideTypes
  const response = await fetch('/api/db/getRideTypes');
  

• 重启Next.js开发服务器，确保路径变更被系统识别

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