Next.js 13 API路由访问出现404错误，请求排查帮助

我fork了一个项目，想搭建用于数据库CRUD操作的API端点，但始终无法访问。测试调用模拟API（https://jsonplaceholder.typicode.com/todos）正常，但访问自定义端点时一直返回404错误。

我创建了路径为pages/api/todo/route.js的文件，代码如下：

import { NextResponse } from "next/server";

const DATA_SOURCE_URL = "https://jsonplaceholder.typicode.com/todos"

export async function GET() {
    const res = await fetch(DATA_SOURCE_URL)

    const todos = await res.json

    return NextResponse.json(todos)
}

我没有设置任何可能拦截端点的中间件，但在全新创建的Next.js 13项目中用相同代码创建端点却能正常访问并返回200状态码。怀疑当前项目有配置拦截了API端点，以下是项目相关配置文件：

package.json #

{
  "name": "ship-fast-code",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "postbuild": "next-sitemap",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@auth/mongodb-adapter": "^1.0.0",
    "@headlessui/react": "^1.7.17",
    "axios": "^1.4.0",
    "crisp-sdk-web": "^1.0.21",
    "eslint": "8.47.0",
    "eslint-config-next": "13.4.19",
    "form-data": "^4.0.0",
    "mailgun.js": "^9.2.1",
    "micro": "^10.0.1",
    "mongodb": "^5.8.0",
    "mongoose": "^7.4.4",
    "next": "^13.4.12",
    "next-auth": "^4.23.1",
    "next-sitemap": "^4.2.2",
    "nextjs-progressbar": "^0.0.16",
    "nodemailer": "^6.9.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hot-toast": "^2.4.1",
    "react-syntax-highlighter": "^15.5.0",
    "react-tooltip": "^5.21.1",
    "stripe": "^13.2.0",
    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.15",
    "daisyui": "^3.6.1",
    "postcss": "^8.4.28",
    "tailwindcss": "^3.3.3"
  }
}

next.config.js #

const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: [
      "lh3.googleusercontent.com",
      "pbs.twimg.com",
      "images.unsplash.com",
      "logos-world.net",
      'dlcdnwebimgs.asus.com',
      'res-1.cloudinary.com',
      'avatars.githubusercontent.com'
    ],
  },
};

module.exports = nextConfig;

jsconfig.json #

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

_document.js #

import { Html, Head, Main, NextScript } from "next/document";
import config from "@/config";


export default function Document() {
  return (
    <Html lang="en" data-theme={config.colors.theme}>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content={config.colors.main} />
        <meta name="msapplication-TileColor" content={config.colors.main} />

        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/apple-touch-icon.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/favicon-16x16.png"
        />
        <link rel="icon" href="/favicon.ico" />

        <script
          defer
          data-domain={config.domainName}
          src="https://plausible.io/js/script.js"
        ></script>
      </Head>
      <body>

        <Main />
        <NextScript />

      </body>
    </Html>
  );
}

1. 路由模式不匹配

   • 你当前使用的是App Router的API写法（route.js），但项目存在pages目录，需确认项目的路由模式：
     • 若项目根目录无app文件夹，属于纯Pages Router项目，API文件应直接放在pages/api/todo.js，而非pages/api/todo/route.js，且代码需改为Pages Router格式：

       import type { NextApiRequest, NextApiResponse } from 'next'
       
       const DATA_SOURCE_URL = "https://jsonplaceholder.typicode.com/todos"
       
       export default async function handler(
         req: NextApiRequest,
         res: NextApiResponse
       ) {
         const response = await fetch(DATA_SOURCE_URL)
         const todos = await response.json()
         res.status(200).json(todos)
       }
       

     • 若项目有app文件夹，App Router的API必须放在app/api/todo/route.js路径下，而非pages目录下。

2. 代码语法错误

   • 你的代码中res.json缺少调用括号，应改为res.json()，虽然这通常会导致500错误而非404，但建议修正后重新测试。

3. 检查隐藏中间件

   • 排查项目根目录、pages或app目录下是否存在middleware.js/ts文件，这类文件可能意外拦截API请求；同时检查next-auth的配置，确认是否有自定义路由拦截逻辑。

4. 清理缓存重启服务

   • 执行npm run dev -- --clear-cache清理Next.js开发服务器缓存后重启，再测试端点是否生效。

5. 校验文件路径与命名

   • 确认文件名是小写的route.js，路径符合对应路由模式的要求，注意Linux/macOS环境下文件名大小写敏感。

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