Link to the code that reproduces this issue
https://github.com/raibima/next-confusing
To Reproduce
Prerequisite: DynamicIO flag ON.
- Create a NavBar client component. Inside, read params information using the useParams hook.
'use client';
import {useParams} from 'next/navigation';
export default function NavBar() {
const params = useParams();
return (
<nav>
<pre>{JSON.stringify(params, null, 2)}</pre>
</nav>
);
}
- Render the NavBar component in the root layout
import NavBar from './NavBar';
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
+ <NavBar />
{children}
</body>
</html>
);
}
- Create a dynamic route, e.g.,
/[id]/page.js
- Build the application
Current vs. Expected behavior
Current error:
$ next build
▲ Next.js 15.4.0-canary.18
- Experiments (use with caution):
✓ dynamicIO
Creating an optimized production build ...
✓ Compiled successfully in 0ms
✓ Linting and checking validity of types
✓ Collecting page data
Error: Route "/[id]": A component accessed data, headers, params, searchParams, or a short-lived cache without a Suspense boundary nor a "use cache" above it. We don't have the exact line number added to error messages yet but you can see which component in the stack below. See more info: https://nextjs.org/docs/messages/next-prerender-missing-suspense
at f (.next/server/app/page.js:1:155)
at body (<anonymous>)
at html (<anonymous>)
Error occurred prerendering page "/[id]". Read more: https://nextjs.org/docs/messages/prerender-error
Export encountered an error on /[id]/page: /[id], exiting the build.
⨯ Next.js build worker exited with code: 1 and signal: null
error: script "build" exited with code 1
The fix is to wrap the <NavBar /> component with Suspense. However,...
It took me hours to debug this issue. Reading this message, at first I thought I needed to add a loading.js file or wrap the dynamic page with a Suspense boundary. Having done all did not solve the error. IF only the error message said something along the line "if you've done it already but still got this error, please check your layout component", it would have saved debugging time.
Even better If Next.js can pinpoint the exact line numbers. But if it's too much work, a quick win would probably be to enhance the error message like I suggested above.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 23.6.0: Thu Dec 19 20:44:10 PST 2024; root:xnu-10063.141.1.703.2~1/RELEASE_ARM64_T6000
Available memory (MB): 32768
Available CPU cores: 10
Binaries:
Node: 20.13.1
npm: 10.5.2
Yarn: 1.22.22
pnpm: 9.1.3
Relevant Packages:
next: 15.4.0-canary.18 // Latest available version is detected (15.4.0-canary.18).
eslint-config-next: N/A
react: 19.1.0
react-dom: 19.1.0
typescript: N/A
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
dynamicIO
Which stage(s) are affected? (Select all that apply)
next build (local)
Additional context
No response
Link to the code that reproduces this issue
https://github.com/raibima/next-confusing
To Reproduce
Prerequisite: DynamicIO flag ON.
import NavBar from './NavBar'; export default function RootLayout({children}) { return ( <html lang="en"> <body> + <NavBar /> {children} </body> </html> ); }/[id]/page.jsCurrent vs. Expected behavior
Current error:
The fix is to wrap the
<NavBar />component with Suspense. However,...It took me hours to debug this issue. Reading this message, at first I thought I needed to add a loading.js file or wrap the dynamic page with a Suspense boundary. Having done all did not solve the error. IF only the error message said something along the line "if you've done it already but still got this error, please check your layout component", it would have saved debugging time.
Even better If Next.js can pinpoint the exact line numbers. But if it's too much work, a quick win would probably be to enhance the error message like I suggested above.
Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.6.0: Thu Dec 19 20:44:10 PST 2024; root:xnu-10063.141.1.703.2~1/RELEASE_ARM64_T6000 Available memory (MB): 32768 Available CPU cores: 10 Binaries: Node: 20.13.1 npm: 10.5.2 Yarn: 1.22.22 pnpm: 9.1.3 Relevant Packages: next: 15.4.0-canary.18 // Latest available version is detected (15.4.0-canary.18). eslint-config-next: N/A react: 19.1.0 react-dom: 19.1.0 typescript: N/A Next.js Config: output: N/AWhich area(s) are affected? (Select all that apply)
dynamicIO
Which stage(s) are affected? (Select all that apply)
next build (local)
Additional context
No response