That's it, that's the whole question.
#I need to use client side dynamic routes with a static exported site.
harsh python
pearl belfryBOT
Hi @harsh python. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Based on the information from the provided knowledge sources, it appears that there are some limitations when it comes to using client-side dynamic routes with a static exported site in Next.js.
The Next.js documentation (https://nextjs.org/docs/pages/building-your-application/deploying/static-exports#supported-features-1) states that dynamic routes are supported when using getStaticPaths. However, there are several discussions on GitHub (issue 48022 (https://github.com/vercel/next.js/issues/48022) and issue 54393 (https://github.com/vercel/next.js/issues/54393)) where users have reported issues with dynamic routes not working as expected when using output: 'export' with use client in dynamic routes.
One of the users in issue 48022 (https://github.com/vercel/next.js/issues/48022) has mentioned that this is a significant blocker for them and others have echoed similar sentiments. They suggest that this issue should be called out more prominently in the documentation.
In issue 54393 (https://github.com/vercel/next.js/issues/54393), a user has reported getting errors when trying to use dynamic route pages with output: export. They have also shared the different errors they encountered when trying different approaches to resolve the issue.
A contributor in the same issue thread has suggested a workaround which involves moving the code that needs use client into a separate file and using a query parameter instead of a dynamic route. However, this workaround might not be suitable for all use cases.
The Next.js documentation (https://nextjs.org/docs/app/building-your-application/deploying/static-exports#route-handlers) also mentions that if you need to read dynamic values from the incoming request, you cannot use a static export.
Given these limitations and issues, it seems that using client-side dynamic routes with a static exported site in Next.js might not be fully supported or might require workarounds. It would be advisable to keep an eye on the mentioned GitHub issues for any updates or fixes.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
harsh python
@pearl belfry I am using the pages directory, not the app routes. Is this possibe using the app router?
pearl belfryBOT
Let me check the knowledge base for you. One moment! :books:
Yes, it is possible to use dynamic routes with the App Router in Next.js. The App Router was introduced in Next.js 13 and it supports shared layouts, nested routing, loading states, error handling, and more. It works in a new directory named app and co-exists with the pages directory, allowing for incremental adoption (source (https://nextjs.org/docs/app/building-your-application/routing#the-app-router)).
However, it's important to note that the App Router takes priority over the Pages Router. Routes across directories should not resolve to the same URL path and will cause a build-time error to prevent a conflict (source (https://nextjs.org/docs/app/building-your-application/routing#the-app-router)).
If you want to migrate from the Pages Router to the App Router, Next.js provides guides to help you with the process (source (https://nextjs.org/docs/app/building-your-application/upgrading)).
Remember, although you can use both routers in the same project, routes in app will be prioritized over pages. It's recommended to use only one router in your new project to avoid confusion (source (https://nextjs.org/docs/getting-started/installation#the-pages-directory-optional)).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
harsh python
@pearl belfry no, is it possible to use dynamic routes AND static export with the app router?
pearl belfryBOT
Let me check the knowledge base for you. One moment! :books:
Based on the provided knowledge sources, it seems that using dynamic routes with static export in the App Router of Next.js is currently limited and may not work as expected.
In the Github issue 54393 (https://github.com/vercel/next.js/issues/54393), users have reported issues when trying to use dynamic routes with output: export in the App Router. The issue is that the App Router with output: export does not support useParams() on the client side.
A workaround suggested by a contributor in the same issue involves moving the code that needs use client into a separate file and using a query parameter instead of a dynamic route. However, this workaround might not be suitable for all use cases.
In another Github issue 53721 (https://github.com/vercel/next.js/issues/53721), it's shown that dynamic routes in the App Router are considered Server Functions, which means they are not suitable for static export.
The Next.js documentation (https://nextjs.org/docs/app/building-your-application/deploying/static-exports#route-handlers) also mentions that if you need to read dynamic values from the incoming request, you cannot use a static export.
So, while dynamic routes are possible with the App Router, using them with static export seems to be a challenge currently. It would be advisable to keep an eye on the mentioned GitHub issues for any updates or fixes.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
harsh python
Did this work in a previous version of next?
@pearl belfry Did this work in a previous version of next?
pearl belfryBOT
Let me check the knowledge base for you. One moment! :books:
Based on the provided knowledge sources, it's not explicitly stated whether using dynamic routes with static export in the App Router worked in a previous version of Next.js.
However, it's worth noting that the App Router was introduced in Next.js version 13.4.0 and it added enhanced static export support, including using React Server Components and Route Handlers (source (https://nextjs.org/docs/pages/building-your-application/deploying/static-exports#version-history)).
The next export command, which was used for static export, was deprecated in version 13.3.0 and removed in version 14.0.0 in favor of "output": "export" (source (https://nextjs.org/docs/pages/building-your-application/deploying/static-exports#version-history)).
Given these changes, it's possible that the behavior of dynamic routes with static export in the App Router has changed between versions. However, without more specific information or documentation, it's hard to say definitively whether this worked in a previous version of Next.js.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
harsh python
@pearl belfry wtf, that sucks.
pearl belfryBOT
Let me check the knowledge base for you. One moment! :books:
I understand your frustration. The limitations of using dynamic routes with static export in the App Router of Next.js can be challenging, especially if your project heavily relies on these features.
The Next.js team and community are actively working on these issues, as seen in the open GitHub issues (issue 54393 (https://github.com/vercel/next.js/issues/54393) and issue 48022 (https://github.com/vercel/next.js/issues/48022)). It's recommended to keep an eye on these threads for any updates or potential workarounds.
In the meantime, you might want to consider other routing or deployment strategies that are fully supported by Next.js. For example, you could use Server Side Rendering (SSR) or Incremental Static Regeneration (ISR) if your hosting environment supports it.