NextJS 16, details page running infinitely

[Fred638]

🏷️ Discussion Type

Question

Body

I am having an issue with a details page.

Structure:

listpage /
  --> [itemId]
      --> page.tsx
page.tsx

On the list page there is a link to the details page:

<Link href={`${process.env.NEXT_PUBLIC_API_URL/list/itemId=${id}`}>Item details</Link>

The details page:

import { notFound } from 'next/navigation';

interface Props {
  params: Promise<{ id: string }>;
}

export default async function ItemDetailsPage({ params }: Props) {
  // 1. Await the params wrapper
  const { id } = await params; 

  try {
    // 2. Use an absolute URL
    const res = await fetch({`${process.env.NEXT_PUBLIC_API_URL/list/itemId=${id}`}, {
      next: { revalidate: 60 } // optional: cache strategy
    });

    // 3. Handle bad responses (like 404) safely
    if (!res.ok) {
      return notFound(); 
    }

    const data = await res.json();

    return (
      <main>
        <h1>{data.title}</h1>
        <p>{data.description}</p>
      </main>
    );

  } catch (error) {
    console.error("Fetch intercepted an error:", error);
    return <p>Could not load details. Please try again later.</p>;
  }
}

Chrome shows a 200 ok response. However, there is also a headers error, 'UND_ERR_HEADERS_TIMEOUT'

Guidelines

• I have read and understood this category's guidelines before making this post.

[SirHegel]

There are three separate problems here, and the one causing the hang is not the one you are looking at.

1. The param name does not match the folder

Your route is [itemId], but you destructure id:

interface Props {
  params: Promise<{ id: string }>;   // ← there is no `id`
}

const { id } = await params;          // ← undefined

In the App Router the key on params is the folder name. [itemId] gives you params.itemId. So id is undefined, and the URL you fetch ends with itemId=undefined.

interface Props {
  params: Promise<{ itemId: string }>;
}

const { itemId } = await params;

2. The URL is not valid JavaScript

`${process.env.NEXT_PUBLIC_API_URL/list/itemId=${id}`

The closing brace of the first expression is missing. As written, the interpolation contains process.env.NEXT_PUBLIC_API_URL / list / itemId = — division operators on undefined identifiers, not a path. It should be:

`${process.env.NEXT_PUBLIC_API_URL}/list?itemId=${itemId}`

Note the } after NEXT_PUBLIC_API_URL, and ? rather than / if itemId is a query parameter.

And the fetch call wraps the string in an object literal:

fetch({`...`}, { next: { revalidate: 60 } })
//     ^                                        an object, not a URL

It takes the string directly:

fetch(`...`, { next: { revalidate: 60 } })

3. UND_ERR_HEADERS_TIMEOUT — this is the hang

That error comes from undici, the fetch implementation Node uses. It means the response headers never arrived within the timeout.

If NEXT_PUBLIC_API_URL points at this same Next.js app, that is a self-request deadlock, and it explains the "running infinitely" symptom exactly. The server component is rendering, and inside that render it makes an HTTP request back to the server that is currently busy rendering it. In development the server has very limited concurrency, so the request cannot be served until the render finishes, and the render cannot finish until the request is served. Chrome shows 200 for the page request while the inner fetch is what is stuck.

Do not fetch your own API from a server component. You are already on the server; the HTTP hop buys you nothing and costs you this deadlock. Call the data layer directly:

export default async function ItemDetailsPage({ params }: Props) {
  const { itemId } = await params;
  const data = await getItem(itemId);   // the same function your route handler calls
  if (!data) notFound();
  return (
    <main>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </main>
  );
}

If it genuinely is an external API, keep fetch, but drop NEXT_PUBLIC_. That prefix inlines the value into the client bundle, which you do not need for a server component and which publishes your API host to anyone who opens devtools. Use API_URL instead.

One more thing

notFound() throws — it does not return a value. return notFound() works, but the try/catch around it is a trap: notFound() signals by throwing a special error, and your catch will swallow it and render "Could not load details" instead of the 404 page. Call it after the try/catch, or re-throw anything that is not a genuine fetch failure.

[Fred638]

Thanks a lot for the detailed explanation! I have made the changes, but the page is blank. I'll add a console.log and check the developer tools in Chrome to see the output.

Error: Window message "chrome: call method" timed out.

[Pusri27]

Thanks a lot for the detailed explanation! I have made the changes, but the page is blank. I'll add a console.log and check the developer tools in Chrome to see the output.

Error: Window message "chrome: call method" timed out.

Hey @Fred638,

Just a quick heads up, that Error: Window message "chrome: call method" timed out is actually coming from a Chrome browser extension or GitHub UI timeout when submitting the comment edit, and not from your Next,js app code itself

Also, since your page is an async Server Component, keep in mind that any console,log won't show up inside Chrome DevTools, it will print directly in the local terminal window where npm run dev is running

A couple of quick things to check why the screen might be showing blank right now:

• Check the terminal logs: Check the terminal output where Next,js is running to see if the resolved data object actually has the title and description properties
• Missing HTML tags: Double check that your root app/layout,tsx wraps {children} inside <html> and <body> tags, because missing root layout tags will cause a completely blank render
• Try/Catch swallowing render: If getItem returns null and triggers notFound(), make sure that call is not trapped inside a generic try catch block that returns an empty fallback

[Fred638]

Thanks, I'll have a look at it.

[Eeshan-Vaghjiani]

The issue is most likely that your server component is fetching from the same Next.js app. If NEXT_PUBLIC_API_URL points to your own app, that request can hang and produce UND_ERR_HEADERS_TIMEOUT. Also, your dynamic route is [itemId], so you need to use params.itemId, not params.id. Finally, the fetch syntax shown is invalid. For a server component, call your data function directly instead of making an HTTP request back to your own API.