im having some issues with dynamic routing in Next. For example a route like /api/chat/[id] or would cause an infinite loop.
Here is the code:
"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;
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 });
}
}
The path is app/api/clients/[clientId]/route.ts
Seems like nothing fancy.
My current fix is sending my dynamic id through a query instead of param
/api/clients/client?clientId=b00b24ba-2933-4d5e-919d-835cc05057a6
but i dont want to do that.
Am i missing something? I am somewhat new to Next.
Thanks!
Ive tried simple logging, expected a 200 but got a 508.