为什么我在 next.js 中的 API 路由给出 404 错误

Question

当尝试从 sanity 客户端获取数据时，为什么我的获取请求会出现错误“GET http://localhost:3000/api/db/getRideTypes 404 (Not Found)”。

Rideselector.js的部分代码是

//"use client";

import Image from 'next/image'
import ethLogo from '../assets/eth-logo.png'
import { useEffect, useState } from 'react'

const style = {
    wrapper: `h-full flex flex-col`,
    title: `text-gray-500 text-center text-xs py-2 border-b`,
    carList: `flex flex-col flex-1 overflow-scroll`,
    car: `flex p-3 m-2 items-center border-2 border-white`,
    selectedCar: `border-2 border-black flex p-3 m-2 items-center`,
    carImage: `h-14`,
    carDetails: `ml-2 flex-1`,
    service: `font-medium`,
    time: `text-xs text-blue-500`,
    priceContainer: `flex items-center`,
    price: `mr-[-0.8rem]`,
}

const basePrice = 15530

const RideSelector = () => {
    const [carList, setCarList] = useState([])

    useEffect(() => {
        ;(async () => {
          try {
            const response = await fetch('api/db/getRideTypes')
            
            const data = await response.json()
            setCarList(data.data)
            
          } catch (error) {
            console.error(error)
          }
        })()
    }, [])

getRideTypes.js 是

import { client } from "../../../../../lib/sanity"

const query = `
*[_type=="rides"]{
    "service": title,
    "iconUrl": icon.asset->url,
    priceMultiplier,
    orderById
}|order(orderById asc)
`

const getRideTypes = async (req, res) => {
    try {
      const sanityResponse = await client.fetch(query)
      console.log(sanityResponse)
  
      res.status(200).send({ message: 'success', data: sanityResponse })
    } catch (error) {
      
      res.status(500).send({ message: 'error', data: error.message })
    }
}
export default getRideTypes

getRideTypes.js 位于 api 文件夹内，其结构为 src/app/pages/api/db/getRideTypes.js。 src 位于根目录中。 RideSelector.js 位于与 src 文件夹相同的根目录中的 Components 文件夹中。

Answer 1

请求路径无效，正确路径为

/api/db/getRideTypes

。另外，取消注释骑行选择器文件顶部的

"use client";

指令，因为您正在该组件中使用状态。