Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/start/framework/react/comparison.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ Feature/Capability Key:
| Serverless Support | ✅ | ✅ | ✅ |
| Node.js Support | ✅ | ✅ | ✅ |
| Docker Support | ✅ | ✅ | ✅ |
| Static Export | ✅ | | ✅ |
| Static Export | ✅ | 🟡 (App Router doesn't support useParams()) | ✅ |
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

Next.js App Router static export useParams() limitation

💡 Result:

Short answer: With App Router and output: "export" (static HTML export), client-side useParams() can't get dynamic route values at build/runtime — App Router requires generateStaticParams() (or server params) to statically generate dynamic pages. If you use output: "export" without generateStaticParams for a dynamic segment, the build will error or the client hook can't be populated. [1][2][3]

What to do (brief):

  • For static generation of dynamic routes, implement generateStaticParams() so pages are pre-built with params. [2]
  • Or stop using output: "export" (use normal next build/deploy) so dynamic routes can be handled server-side/ISR.
  • For client-only reads, parse window.location yourself as a fallback, but that's less ideal.

Sources:

  • useParams() docs. [1]
  • App Router static export limitations / static export guide. [2]
  • GitHub issue/discussion showing the current limitation with output: "export" and useParams. [3]

🌐 Web query:

Next.js static export dynamic routes App Router client component hooks

💡 Result:

Short answer — yes, but with constraints.

Key points and steps

  • Enable static export in next.config.js: output: 'export'. [1]
  • For App Router dynamic routes you must provide all route params at build time via generateStaticParams (or avoid dynamic params). Dynamic routes without generateStaticParams (or with dynamicParams: true) are not supported for a static export. The app router renders Server Components at build to produce static HTML for each route produced by generateStaticParams. [1][2]
  • Client components (use client) and React hooks (useRouter, useParams, useSearchParams, useEffect, etc.) run only in the browser. They are pre-rendered into the static HTML but any hook-driven runtime behavior runs on the client after hydration — they cannot produce new static routes at build time. Use client hooks for interactivity, but not for generating the list of static pages. [2]
  • Unsupported features for static export include: dynamic routes without generateStaticParams, route handlers that depend on Request, cookies, rewrites/redirects/middleware, ISR, server actions, image optimization (default loader), etc. If you need those, you must deploy with a server (not output: 'export'). [1][2][3]

Practical recipe

  1. In app/[slug]/page.tsx (server component) export async function generateStaticParams() { return [{ slug: 'a' }, { slug: 'b' }] } to enumerate pages. [1][2]
  2. Keep page UI that needs browser-only APIs as a 'use client' child component and call hooks (useRouter/useParams/useEffect) there. Client hooks will work after hydration but cannot add build-time routes. [2]
  3. Build: next build will emit static HTML files (out/). Deploy the out folder to any static host. [1]

Sources

  • Next.js App Router — Static Exports guide. [1]
  • Next.js docs: supported/unsupported features for static exports (client components, server components, generateStaticParams). [2]
  • Warning/docs about API routes & static export limitations. [3]

🌐 Web query:

Next.js 15 App Router static export useParams() support compatibility

💡 Result:

Short answer: App Router + output: "export" (static HTML export) does not fully support client useParams() for dynamic routes unless you pre-generate those routes with generateStaticParams(); dynamic routes without generateStaticParams are listed as unsupported for static export. If you need dynamic client-side params without generateStaticParams, you must not use output: "export" (run with a server) or switch to an approach that pre-renders all param values. [1][2][3]

Sources:

  • useParams API (App Router hooks). [1]
  • GitHub discussion: "App Router with output: export does not support useParams() on client". [2]
  • Next.js docs: Static Exports (unsupported features: dynamic routes without generateStaticParams). [3]

Clarify the Static Export limitation—it's about dynamic routes, not useParams() support.

The note "App Router doesn't support useParams()" is misleading. App Router supports the useParams() hook; the limitation is that static exports don't support dynamic routes unless routes are pre-generated via generateStaticParams(). With proper use of generateStaticParams(), client-side useParams() works fine.

Consider revising to: "Static export requires generateStaticParams() for dynamic routes" or similar, to accurately reflect the constraint.

Additionally, per the legend on line 23, partial support (🟡) should include a 1–5 rating where noted. Add one if applicable.

🤖 Prompt for AI Agents
In @docs/start/framework/react/comparison.md at line 69, Update the table row
text to clarify the Static Export limitation: replace the misleading "App Router
doesn't support useParams()" with something like "Static export requires
generateStaticParams() for dynamic routes; useParams() works client-side when
routes are pre-generated", and ensure you reference generateStaticParams and
useParams by name in the copy; also, for the 🟡 partial support legend add a 1–5
rating value (e.g., "🟡 (2)") next to the cell to follow the legend convention.

| Official Cloudflare Support | ✅ | 🟡 | ✅ |
| Official Netlify Support | ✅ | 🟡 | ✅ |
| Official Vercel Support | ✅ (via Nitro) | ✅ | ✅ |
Expand Down