[NEXT-1550] App Router with output: export does not support useParams() on client

[styfle]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0
    Binaries:
      Node: 18.17.1
      pnpm: 8.6.12
    Relevant Packages:
      next: 13.4.20-canary.2
      react: 18.2.0
      react-dom: 18.2.0
    Next.js Config:
      output: export

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router, Static HTML Export (output: "export")

Link to the code that reproduces this issue or a replay of the bug

https://github.com/curated-tests/next-issue-48022

To Reproduce

The page in question is /app/blog-app/[slug]/page.tsx

next build

Describe the Bug

Fails with an error:

Error: Page "/blog-app/[slug]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.

This is expected right now because its not implemented, but it would be nice to support this so that App Router can match Pages Router.

Expected Behavior

Ideally, the build should complete and navigation should work client side.

pnpm build
cd out
python3 -m http.server 3000

• Visit http://localhost:3000
• Click on Blog App (/blog-app/)
• Click on One (/blog-app/one)
• Should render the page on the client

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

python3 -m http.server 3000

_NEXT-1550

[xray-robot]

Perhaps there are dates when this is scheduled to be done? Or is it better to use Pages Router?

FYI: Gatsby allows you to use dynamic routers in static exports without configuring server-side redirects. That's the only thing stopping us from moving our PWAs from Gatsby to Next.js

[danbockapps]

I did not see this error on 13.4.13. I started seeing it when I upgraded to 13.5.3.

[petejodo]

Can confirm this is working on 13.4.13. I'm curious if the functionality is therefore a regression or a bug that's become a feature 😅

[GabenGar]

But does it output the static page? If it doesn't and there is no error, then it's definitely a regression.

[styfle]

@petejodo What does "working" mean in this case? Previously there was no error message but it was failing silently. So in 13.5.0, a helpful error message was added explaining how to fix it.

See #48022 (comment) for more details.

However maybe there is a case when the error message shouldn't be printed? If you have code that was working with useParams() 13.14 as is no longer working in 13.15, please share the minimal code by creating a new issue and I'll get it fixed, thanks!

Please do NOT comment on this issue since it describes a new feature that needs to be implemented (not a regression).

[Frtrillo]

@petejodo What does "working" mean in this case? Previously there was no error message but it failing silently. So in 13.5.0, a helpful error message was added explaining how to fix it.

See #48022 (comment) for more details.

However maybe there is a case when the error message shouldn't be printed? If you have code that was working with useParams() 13.14 as is no longer working in 13.15, please share the minimal code by creating a new issue and I'll get it fixed, thanks!

Please do NOT comment on this issue since it describes a new feature that needs to be implemented (not a regression).

I can confirm that this issue persisted in version 13.4.13 as well. It failed silently as you said; there was no error during the build, but accessing the dynamic route resulted in a 404 error.
Sadly it appears that using dynamic routes with the app router and 'use client' is currently not possible. I hope it gets addressed soon, as it's just what's left for me, at least, to fully commit to the app router

[petejodo]

yeah I didn't see that at first and thought that it was working in my testing but I guess I somehow messed something up in my testing where I thought it was working but it definitely was not. Sorry, my mistake!

This put me in a bind because I misinterpreted the opening paragraphs to https://nextjs.org/docs/app/building-your-application/deploying/static-exports which made it seem I could port a SPA to nextjs and we just about finished porting it. That's my problem though, not yours' 😅 I think I can re-hack react-router back in even though that was giving me trouble at the start of the project

[eric-burel]

Hi, is this related to the error encountered in @leerob SPA example? The error message seems surprising, and params are meant to be obtained via page props rather than the useParams hook, but I wonder if it is considered the same root issue

[goerlitz]

Hi, I just started learning Next.js and I want to deploy my app as static SPA on Amazon S3. Hence, I added output: export. But I'm getting errors for the dynamic route pages using App Router.

1. Error: Page "/datasets/[slug]" is missing "generateStaticParams()" so it cannot be used with "output: export" config. when I execute npm run build .
2. After adding generateStaticParams() with some dummy values (because the real route params cannot be known at build time) I'm getting a runtime error (in dev mode) when calling the dynamic path with any other value. Error: Page "/datasets/[slug]/page" is missing param "/datasets/foo" in "generateStaticParams()", which is required with "output: export" config.
3. When further adding 'use client' I get Error: Page "/datasets/[slug]/page" cannot use both "use client" and export function "generateStaticParams()".
4. When I just add 'use client' but remove generateStaticParams() I'm getting Error: Page "/datasets/[slug]" is missing "generateStaticParams()" so it cannot be used with "output: export" config. again.

I'm stuck here. What am I supposed to do to get the dynamic routes working with the static export?

Maybe, I'm don't fully understand generateStaticParams() (yet), but when I use a dynamic route, I typically have many entries in a database that I wanna fetch and render on demand (either client or server side). I don't wanna pre-render millions of pages at build time. Moreover, I don't wanna rebuild the app whenever the database gets updated.

[eric-burel]

@goerlitz starting step 3 and 4 I think you get confused:

• move the code that needs "use client" into a separate file, for instance:

// app/datasets/[slug]/page.tsx
export const generateStaticParams()
export async function YourPage() {
  return <ClientPage />
}
// app/datasets/[slug]/ClientPage.tsx
"use client"
export async function ClientPage() {
  const [someState] = useState("foo")
  return <div>{someState}</div>
}

• As for generating the page with a dummy parameter, I am not sure what cause this error specifically (might but just a bug?), but anyway I think this approach won't work as is.

The thing is that if you use a dummy static param, Next only knows the dummy "/datasets/foo" route. So "/datasets/bar" won't work. You could do an URL rewrite from "/datasets/bar" to "/datasets/foo", but then the route parameter is lost.

You could opt for a query parameter instead.

Sadly until Next.js supports exporting dynamic routes that are not statically rendered like it did in Next 12 pages dir, I don't think you can use a dynamic route and do a static export, you should prefer a query parameter, + optionally an URL rewrite from a route param to a query param.

[goerlitz]

Thanks @eric-burel for the guidance.
Actually, after diving much deeper into Next.js, I realized that I was trying to make two different paradigms work together - which is a bad idea.

Having worked on SPA with Api backends in the past, I thought I could make Next.js output a SPA bundle with separate api code. Actually, I think that the first paragraph in https://nextjs.org/docs/app/building-your-application/deploying/static-exports is quite misleading in that sense:

Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.

No, Next.js is not made for SPAs - it is a totally different paradigm with the goal to NOT do all rendering and routing in the browser but move more code to the server where computing is more efficient (SSR etc.). Hence, a typical Next.js app will never be an SPA (and should not be), because the application code is split up and runs on server and client likewise.

IMHO, for most applications - that usually have dynamic routing - the static export does not make sense to me at all.

[AndonMitev]

Does exists on 13.5.5 as well, I have tried to build a view with this routing structure:

/games
  [id]
     page.tsx

on production i had issues for previous versions, [id] was not found and it was navigating to home page, and now not even able to build to the this issue:

Error: Page "/page/[id]" is missing "generateStaticParams()" so it cannot be used with "output: export" config

[andreasfrey]

Can you please give an update, when this feature is planned? I mainly switchedto nextjs, because of the routing functionality. Now it forces me to host on a node server...

As a workaround i try out useing pages router again. [https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts]

[goerlitz]

Now it forces me to host on a node server...

@andreasfrey, this is what I meant with "Next.js follows a different paradigm" than SPA.
Running a Next.js app on a node server is the default deployment.

If you are trying to use Next.js to create a traditional SPA (with dynamic routes) that can be packaged for hosting on a CDN, then you are doing something (conceptually) wrong. This is not what Next.js was designed for.

If you want to move from an SPA to Next.js (with all the nice features, like SSR etc.), you should

1. be okay with deploying everything to a node server (Vercel, Netlify, etc.) and changing your deployment pipelines
2. identify and define suitable boundaries between client and server components in your app (ie. dynamic vs. static parts)

[gax97]

Another workaround is to switch from using params to search params to get the ID or whatever in the URL

[ccmvn]

We finally need a fix for this, is there any new information yet?

[rmonnier9]

In fact, the documentation is pretty clear about it :

This is disappointing.
I hope this will evolve in the future because for me it is a deal breaker : it means you can't build SPAs with Next.js and no, Next.js is not very "versatile" as said in the documentation 😅
(yes, all SPAs use url params)

[iameli-streams]

So does Next.js intend to continue to supporting static HTML export or not? Somewhere I found a tweet that said they were but this doesn't seem encouraging. I contend output: "export" is broken without this feature.

[rmonnier9]

This feature allows us to easily use Nextjs without Vercel, so they don't really want it to be convenient ?

[folaranmi]

This is really disheartening, after building the application just to discovered that I couldn't build the app correctly because of useParams used in the app router.

[durchanek]

It would be helpful to provide a bit of clarity on this after moving the issue from Issues to Discussions / Ideas. Most importantly, does it mean "It's not working as intended" and developers building SPAs should start looking for a framework that treats SPAs as first class citizens?
I believe I am not the only one sticking around with Next on the Pages router, hoping we will be eventually able to migrate to App Router, which is apparently the preferred option going forward. There's no harm in stating "No, you will not be able to, we do not plan to support it", but the lack of clarity is really unfortunate.

[ronny1020]

I also think Vercel doesn't care about this feature for obvious reasons. It probably won't be supported recently. Is there a workaround for this issue?

[iameli]

Minimally can we get the title changed? The problem is not that "App Router with output: export does not support useParams() on client", the problem is that "App Router with output: export does not support dynamic routing". It can only be used to generate truly static websites; a route like /order/12345/details that performs a dynamic lookup for order 12345 is unsupported.

[ifeltsweet]

Friends, it will come, not sure when though.

https://twitter.com/ifeltsweet/status/1782095113080164472

[cometyang]

Friends, we will wait, not sure how long though.😂

[ccmvn]

It's a joke. I'd say if we're lucky we'll see the feature in 2026 or, in the worst case, not at all 😂

[ronny1020]

It is always coming but never arrives. 🙃

[balazsorban44]

Hi all, just wanted to let you know that the issue was moved to discussion, but it not because of de-prioritizing! We have just done some cleanup on the repo, as per our triaging documentation, which states that feature requests are not supposed to be opened as issues. We welcome further discussions on this topic, and will keep tracking it.

[redbar0n]

It seems more like a bug than a feature request, tbh. Judging from all the surprised commenters here.

A bug is a break in expected behavior, and people certainly seem to expect to be able to still make a static SPA export - without suddenly having all their dynamic routes breaking - like they could in previous versions in Next.js that used Pages Router.

So I suggest moving this back to issues.

[durchanek]

It was even originally created as a bug more than a year ago. Which also kind of suggests it really hasn't been de-prioritized because it never had much of a priority to begin with (sorry, couldn't help it).

[ronny1020]

I'm a bit unclear about the next steps for this discussion. Does anyone have thoughts on why this shouldn't be pursued, or perhaps suggest an alternative approach?

[haugseth]

Hi, while I do not think Vercel wants to deprioritize this, or not to fix this, i understand that resources are limited. I think this is a bug introduced in one of the canary releases, like i pointed out in the main thread of the issue. It is not a feature request, because this have been working right up until it was broken in one of the canary releases.

This could also be a misunderstanding, and maybe the app router is not suitable for this use case? But then I think the wording in the docs should be changed, and the push for the app routers should not that great, if the use case is static exported SPA. These use cases are for building and bundling webapps with capacitor, tauri and electron, a use case where the server is not available. Using the regular pages router works fine, but the docs recommends app router and this is where people gets into problems. Even examples where memebers of the vercel team have built demos with app router, does not work when upgraded to a later version of nextjs. Sorry for the long post.

I guess the solution for now is to use the pages router for these SPA routes, or use React with Vite when building SPAs for static export?

[leerob]

@haugseth Good feedback, we can make the docs more clear that for this case, it is totally okay (and supported) to use the Pages Router. And in general, for awareness, the Pages Router continues to be supported with new improvements being landed.

[mattbal]

Just ran into a problem with this :/

Please fix this Vercel

[MohamedKarrab]

I am migrating my code from CRA (create react app) to next.js and I can't use dynamic routes anymore because of this issue. Please fix it or at least put a workaround/explanation in the migration guide.

[haugseth]

Hello friend, the most logical migration path in my opinion, is by using the pages router... this should be fairly comparable to CRA. The docs should be updated, to avoid this pitfall as they frame every use case to migrate using the app router. The way I see it, the pages routers is the classic way of front end react, only by using file based routing, and the app routers is the new server component way of running react. Hope this can help your migration.

[MohamedKarrab]

The problem is that they recommend using app router, I don't know for how long the pages router will be supported. From my perspective, why would I migrate to Next.js if I can't use the full features or if they consider my use case secondary? And why is React recommending this as a rule of thumb as if it suits everyone, when they apparently don't care much about SPAs? This makes me wonder if I want to stick to Next.js or just use Vite with lazy loading. I hope React 19 ends this mess.

[leerob]

It is totally okay (and supported) to use the Pages Router. And in general, for awareness, the Pages Router continues to be supported with new improvements being landed. It is okay to use either router.

[SebastianGode]

Thanks for the clarifications about the pages router @leerob ! :)

I just want to know whether the dev team is planning to add / fix that functionality in the app router or not. If not then I would just migrate back to the pages router. If there's a fix incoming during the next half year however I would just wait.

Getting a clarification on the future of this topic would be great!

[leerob]

Yes, we plan to support this for the App Router as well in the future. We don't have a defined timeline yet, so Pages Router might be a better choice for you right now.

[XanderDeLaet]

Reverting to using paging router worked for me. I feel like there should be an option to run routing in App Router client side though.