Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Using notFound with cache components and generateStaticParams breaks on build with await cookies() in root layout [1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#86687•Fetched 2026-04-08 02:09:46
View on GitHub
Comments
1
Participants
2
Timeline
7
Reactions
3
Author
pauksztellopauksztello
Participants
github-actions[bot]github-actions[bot]pauksztellopauksztello
Timeline (top)
labeled ×3closed ×1commented ×1issue_type_added ×1

Error Message

Before cache components we used export const dynamicParams = false. After upgrading to nextjs 16. We have to additionally call notFound() on missing paths. When we do that with cache components enabled and awaiting cookies() in root layout in throws client side error:

Code Example

export async function generateStaticParams() {
  return [{ categoryId: "education" }];
}

const CategoryPage: React.FC<PageProps<"/blogs/[categoryId]">> = async ({
  params,
}) => {
  const { categoryId } = await params;
  notFound();

  return `Category: ${categoryId}`;
};

export default CategoryPage;

---

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { cacheLife } from "next/cache";
import { cookies } from "next/headers";
import { Suspense } from "react";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
        <Suspense>
          <SuspendedComponent />
        </Suspense>
      </body>
    </html>
  );
}

const SuspendedComponent = async () => {
  "use cache: private";
  cacheLife("seconds");
  await cookies();
  return (
    <div>
      <h1>Suspended Component</h1>
    </div>
  );
};

---

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.1.0: Mon Oct 20 19:33:00 PDT 2025; root:xnu-12377.41.6~2/RELEASE_ARM64_T6020
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 23.10.0
  npm: 11.2.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 16.0.6 // Latest available version is detected (16.0.6).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/pauksztello/nextjs-issue-reproduction

To Reproduce

  1. Enable cache components
  2. Add app/not-found.tsx
  3. Add dynamic route with generateStaticParams and call notFound(). Example:
export async function generateStaticParams() {
  return [{ categoryId: "education" }];
}

const CategoryPage: React.FC<PageProps<"/blogs/[categoryId]">> = async ({
  params,
}) => {
  const { categoryId } = await params;
  notFound();

  return `Category: ${categoryId}`;
};

export default CategoryPage;
  1. In the root layout call await cookies() in suspended component. Example:
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { cacheLife } from "next/cache";
import { cookies } from "next/headers";
import { Suspense } from "react";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
        <Suspense>
          <SuspendedComponent />
        </Suspense>
      </body>
    </html>
  );
}

const SuspendedComponent = async () => {
  "use cache: private";
  cacheLife("seconds");
  await cookies();
  return (
    <div>
      <h1>Suspended Component</h1>
    </div>
  );
};

Run next build and next start and go to any non existent page under dynamic route (in the example above it would be any page apart education

Current vs. Expected behavior

Before cache components we used export const dynamicParams = false. After upgrading to nextjs 16. We have to additionally call notFound() on missing paths. When we do that with cache components enabled and awaiting cookies() in root layout in throws client side error:

<img width="997" height="209" alt="Image" src="https://github.com/user-attachments/assets/24418527-409e-4e66-9716-228a9f3bdfb8" /> <img width="1399" height="74" alt="Image" src="https://github.com/user-attachments/assets/55ab5837-058a-4001-82f0-10cd5890fdbe" />

On dev mode or without calling cookies it works fine.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.1.0: Mon Oct 20 19:33:00 PDT 2025; root:xnu-12377.41.6~2/RELEASE_ARM64_T6020
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 23.10.0
  npm: 11.2.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 16.0.6 // Latest available version is detected (16.0.6).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not Found, Dynamic Routes, cacheComponents

Which stage(s) are affected? (Select all that apply)

next start (local), Vercel (Deployed)

Additional context

No response

extent analysis

TL;DR

The issue can be resolved by reordering the notFound() call and the await cookies() call, or by disabling cache components.

Guidance

  • The error occurs when notFound() is called and await cookies() is used in the root layout with cache components enabled.
  • To verify the issue, try disabling cache components or removing the await cookies() call.
  • To mitigate the issue, consider reordering the notFound() call and the await cookies() call, or disable cache components.
  • The notFound() call should be made after the await cookies() call to ensure that the cookies are properly handled before handling the not found case.

Example

const SuspendedComponent = async () => {
  "use cache: private";
  cacheLife("seconds");
  const cookieResult = await cookies();
  // Handle cookie result
  return (
    <div>
      <h1>Suspended Component</h1>
    </div>
  );
};

Notes

The provided solution is based on the assumption that the issue is caused by the order of the notFound() call and the await cookies() call. However, without more information, it's difficult to provide a definitive solution.

Recommendation

Apply workaround: Reorder the notFound() call and the await cookies() call, or disable cache components. This is because the issue seems to be related to the order of these calls, and reordering or disabling them may resolve the issue.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#network issue#logging issue#authentication issue#prompt issue#agent setup

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING