NextJS 13+带动态参数的路由触发无限循环问题求助

问题场景 #

使用Next.js时，/api/chat/[id]这类带动态参数的API路由会触发无限循环，返回508资源耗尽错误。

相关代码 #

客户端组件代码 #

"use client"

import React, {useEffect} from 'react';
import { useAuth } from "@/context/AuthContext";
import { useMsal } from "@azure/msal-react";

const TestPage = () => {
    const { acquireToken } = useAuth();
    const { accounts } = useMsal();

    useEffect(() => {
        const fetchData = async () => {
            const token = await acquireToken(accounts[0], "id");
            const res = await fetch("/api/clients/b00b24ba-2933-4d5e-919d-835cc05057a6", {
                method: "GET",
                headers: {
                    Authorization: `Bearer ${token}`,
                },
            });

            const data = await res.json()
            console.log(data)
        }

        fetchData();
    })

  return (
    <div>
      <h1>Test Page</h1>
      <p>This is a test page for the application.</p>
    </div>
  );
};

export default TestPage;

API路由代码（路径：app/api/clients/[clientId]/route.ts） #

import { NextRequest, NextResponse } from "next/server";
import { createServerSupabaseClient } from "@/lib/supabase/supabaseServer";

export async function GET(
  req: NextRequest,
  { params }: { params: { clientId: string } },
) {
  try {
    const supabase = createServerSupabaseClient();
    const { clientId } = params;

    const { data, error } = await supabase
      .from("clients")
      .select("*")
      .eq("id", clientId)
      .single();

    if (error) throw error;

    return NextResponse.json(data, { status: 200 });
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

临时解决方案 #

将动态ID放在查询参数中，例如请求/api/clients/client?clientId=b00b24ba-2933-4d5e-919d-835cc05057a6，但不希望长期采用这种方式。

测试发现 #

• 页面路由app/(routes)/exampe-route/[id]/route.ts无无限循环问题；
• API路由app/api/exampe-route/[id]/route.ts触发508错误，且未配置任何中间件。

问题根源 #

代码库中next.config.js的异步rewrites配置，会将API请求转发至另一版本的代码库，导致请求循环转发，最终触发无限循环。

新手注意事项 #

除了排查路由重写配置，还需要注意这些点：

• 路由重写的匹配规则：确保rewrites的源路径和目标路径不会形成闭环，尤其是动态路由的匹配逻辑，避免请求被反复转发；
• useEffect的依赖项：客户端组件中useEffect未设置依赖数组，会导致组件每次渲染都重新执行fetch请求，务必添加正确的依赖项（比如[acquireToken, accounts]）；
• API路由的参数解析：App Router中动态API路由的参数通过params获取，要确保参数名称和路由文件名一致（比如[clientId]对应params.clientId），避免因参数未正确获取导致的请求异常；
• 请求错误处理：在客户端fetch时添加错误捕获，比如判断res.ok后再解析JSON，避免因API返回错误状态码导致的前端逻辑异常；
• 环境隔离：如果有多版本代码库的转发需求，务必在rewrites中添加明确的条件判断（比如根据环境变量、请求头区分），防止生产环境出现意外的路由转发。

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