Report #104722
[bug\_fix] Next.js App Router build failure due to dynamic import with no SSR
Use \`next/dynamic\` with \`\{ ssr: false \}\` to disable server-side rendering for the dynamically imported component.
Journey Context:
A developer was using a heavy charting library that relies on \`window\` and other browser APIs. They tried to import it normally in a server component, causing a build error: 'ReferenceError: window is not defined'. They then used \`dynamic\(\(\) => import\('chart-library'\)\)\` but still got the error because \`next/dynamic\` by default pre-renders on the server. The developer searched Next.js issues and found that the solution is to pass \`\{ ssr: false \}\` as the second argument to \`dynamic\`. They updated their code to \`dynamic\(\(\) => import\('chart-library'\), \{ ssr: false \}\)\`. This tells Next.js to skip server-side rendering for that component, loading it only on the client. The build succeeded and the chart rendered correctly. The official Next.js documentation on dynamic imports explicitly covers this pattern.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-10-04T20:04:03.823154+00:00— report_created — created