Next.js 13.4嵌套动态路由使用Fetch API出现404错误排查

核心问题1：API路由写法与目录结构错误（App Router规则不符） #

你用的是Next.js App Router（app/开头的目录结构），但API代码还是Pages Router的req/res handler写法，同时API文件命名和目录结构也不符合App Router要求：

• App Router的API路由必须用route.js作为文件名，不能直接用[page].js
• 动态参数需要放在[page]文件夹下，再在里面创建route.js

核心问题2：useEffect依赖缺失 #

你的useEffect依赖数组为空，没有加入page参数，会导致组件挂载时可能拿不到最新的page值，或者page变化时无法重新发起请求。另外，你直接把fetch的Response对象存入state，没有解析JSON数据。

修复步骤 #

1. 调整API路由目录与代码 #

将API文件路径改为app/api/gantt/[page]/route.js，并替换为App Router的Route Handler写法：

export async function GET(request, { params }) {
  const { page } = params;
  console.log("page: ", page);
  return Response.json({ page: page });
}

2. 修正客户端fetch逻辑 #

"use client";

import { useEffect, useState } from "react";

const Page = ({ params }) => {
  const { page, tab } = params;
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(`/api/gantt/${page}`, {
          method: "GET",
          cache: "no-store",
        });
        const result = await res.json();
        setData(result);
      } catch (err) {
        console.error("请求失败:", err);
      }
    };
    fetchData();
  }, [page]); // 加入page作为依赖，确保参数变化时重新请求

  console.log("data: ", data);

  return <h1>APPLICATION/[PAGE]/[TAB] PAGE</h1>;
};

export default Page;

3. 确认最终目录结构 #

确保项目目录完全符合App Router规范：

app/
├─ application/
│  └─ [page]/
│     └─ [tab]/
│        └─ page.js  # 客户端页面
└─ api/
   └─ gantt/
      └─ [page]/
         └─ route.js  # API路由文件

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