Replies: 101 comments 58 replies
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
I did not see this error on 13.4.13. I started seeing it when I upgraded to 13.5.3. |
Beta Was this translation helpful? Give feedback.
-
|
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 😅 |
Beta Was this translation helpful? Give feedback.
-
|
But does it output the static page? If it doesn't and there is no error, then it's definitely a regression. |
Beta Was this translation helpful? Give feedback.
-
|
@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 Please do NOT comment on this issue since it describes a new feature that needs to be implemented (not a regression). |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
Hi, I just started learning Next.js and I want to deploy my app as static SPA on Amazon S3. Hence, I added
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 |
Beta Was this translation helpful? Give feedback.
-
|
@goerlitz starting step 3 and 4 I think you get confused:
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 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @eric-burel for the guidance. 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:
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. |
Beta Was this translation helpful? Give feedback.
-
|
Does exists on 13.5.5 as well, I have tried to build a view with this routing structure: 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: |
Beta Was this translation helpful? Give feedback.
-
|
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] |
Beta Was this translation helpful? Give feedback.
-
@andreasfrey, this is what I meant with "Next.js follows a different paradigm" than SPA. 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
|
Beta Was this translation helpful? Give feedback.
-
|
Hej, coming from #54393, I have the same issue after following the guide https://nextjs.org/docs/pages/building-your-application/upgrading/from-create-react-app#step-7-create-the-entrypoint-page to convert a CRA app into a Next one. I get many errors like |
Beta Was this translation helpful? Give feedback.
-
|
You have to use Next routing anyway because its multipage logic relies on it. Maybe it works now because you are effectively building a single page bundle, but it will stop doing so after you actually have multiple pages. |
Beta Was this translation helpful? Give feedback.
-
|
This way, you will get a SPA instead of an SSG app. I'm not saying an SSG app is better but there are differences. Besides, I think most people who ran into this issue were already using the app router. There is no reason to use both the app router and the react-router. If we have to migrate to another router, the page router would be the better choice. |
Beta Was this translation helpful? Give feedback.
-
|
Yes, it's an SPA, and at the moment there's no plan to change that 😊 My understanding is that, as following the guide, one has a catch-all The questions I can see are the following:
|
Beta Was this translation helpful? Give feedback.
-
|
This issue is about using useParams with the app router and output:export instead of the next js can't use static param. Using the SPA in the next js is your choice. However, if you would like to suggest adding SPA related feature. I think you should open another issue. |
Beta Was this translation helpful? Give feedback.
-
My bad, I will look into that then 🚀 |
Beta Was this translation helpful? Give feedback.
-
|
As people have said, with the release of v15 now with this still not being addressed, it's pretty clear this isn't going to be resolved. |
Beta Was this translation helpful? Give feedback.
-
|
Vercel is a for-profit hosting company, and has no incentive to make this work more easily. There are plenty of competing options to switch to these days. |
Beta Was this translation helpful? Give feedback.
-
You got the point. Vercel is kind of forcing people towards server-side rendering. |
Beta Was this translation helpful? Give feedback.
-
|
The year is 2067. All world governments have fallen. Vercel-branded killer drones patrol the skies, searching for members of the static rendering resistance. At last, the final safehouse is located. As the rebels are dragged into the prison transport by shock troops, one cries out "It wasn't supposed to be like this! You promised we'd be able to do static rendering with the App Router!" The eyes on the commander's helmet light up as he replies: "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." And he slams the door. |
Beta Was this translation helpful? Give feedback.
-
|
@styfle We’ve been waiting a long time for this. Please consider prioritizing it. Thank you for all your efforts! |
Beta Was this translation helpful? Give feedback.
-
|
Another year has passed. Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
@batchor if you really like react then use the pages router or I saw someone mention you can use the app router and use the pages router for specific dynamic pages you want |
Beta Was this translation helpful? Give feedback.
-
|
@hichemfantar Thanks for pointing that out. I tried @chrox 's method and put client-side pages into the Everything works just fine when I preview the pages using However, when I build the project and upload the artifacts to static host, the dynamic routes give me 404 error. For example, I can get proper content with http://macstudio.kaiz.net:5050/test/as, which is behind |
Beta Was this translation helpful? Give feedback.
-
|
@batchor sounds like a bug, open an issue with a reproducible repo and link it here and I’ll see what I can do |
Beta Was this translation helpful? Give feedback.
-
|
Workaround: This is what I did to workaround this in Readest project, an open-source cross-platform ebook reader. Readest has a Web version and a Tauri version(which requires an I conditionally set the And add two pages:
And at runtime route to the page for that platform accordingly with a The full change is in this commit: readest/readest@242fbf6 Updated (2024-12-25): And the App Router and the Pages Router can coexist in one project. I just moved the dynamic route page and the API route into the |
Beta Was this translation helpful? Give feedback.
-
That's true, however it won't use clientside navigation when navigating between routers. The whole page will reload and it defeats the purpose of an SPA. |
Beta Was this translation helpful? Give feedback.
-
|
Another possible workaround: #55393 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
You might be interested in my solution for avoiding the Pages router for the dynamic routes here: #55393 (reply in thread) |
Beta Was this translation helpful? Give feedback.
-
|
Hi all, thank you for your patience, and sorry for the radio silence here. We're actively working on this problem, and we hope to integrate this feature around Next.js 15.3/15.4 in April/May, or at least share a preview. Unfortunately, this problem has many moving parts, and we want to solve it correctly, especially regarding build-time server components. @wyattjoh has already started laying the groundwork for this, so I'm really excited to finally get this going. |
Beta Was this translation helpful? Give feedback.
-
|
Our savior 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
I hope this means dynamicIO “use cache” directive will be fixed to not mark everything as server actions or provide a way for us to conditionally use it at build time based on environment variables so we can have hybrid apps |
Beta Was this translation helpful? Give feedback.
-
|
tell me more about your usage @daveycodez 👀 |
Beta Was this translation helpful? Give feedback.
-
|
I'll try to be as concise as possible. I'm a cross-platform developer. I have a ton of ideas for apps I want to build, but I also want them to be websites. This means I have to create the website, then create an iOS app, then an Android app. Doesn't sound great. So instead I'm using Next.js to build hybrid applications that are web-first, but conditionally compile into static exports to be used with Capacitor with full offline support. For data fetching, I have a hybrid solution. I'm using Tanstack Query/SWR from the front-end with IndexedDB for offline caching, however some pages need SSR for SEO, For example, I want public user profiles (example.com/username) on my tattoo artist website to show up on Google Search, but be totally dynamic on the iOS app. To do this, I use Tanstack prefetches (https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr) or SWR fallbackData in the server side with Suspense. Then on the front-end for client navigation to dynamic routes, I have a prefetch intercept hack where I intercept prefetches for package.json scripts{
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"export": "NEXT_PUBLIC_EXPORT=true npm run build && npx serve out",
"start": "next start",
}next.config.tsimport type { NextConfig } from "next"
const isExport = process.env.NEXT_PUBLIC_EXPORT == "true"
const nextConfig: NextConfig = !isExport ? {
reactStrictMode: true,
} : {
output: "export",
pageExtensions: ["jsx", "tsx"],
images: { unoptimized: true },
}
export default nextConfig/app/[username]/page.tsx (uses loading.tsx skeleton server-side)import { HydrationBoundary, dehydrate } from "@tanstack/react-query"
import { prefetchFindFirst } from "@/lib/prefetch-queries"
import { getQueryClient } from "../../../get-query-client"
import UsernameClient from "./client" // Has my useQuery hook with usePathname().split("/").pop() for username
export function generateStaticParams() {
return [{ username: "default" }]
}
export const revalidate = 30
export const isExport = process.env.NEXT_PUBLIC_EXPORT == "true"
export default async function UsernamePage(
{ params }: { params: Promise<{ username: string }> }
) {
const { username } = await params
const queryClient = getQueryClient()
if (username != "default" && !isExport) {
await prefetchFindFirst(queryClient, "profiles", username)
}
return (
<HydrationBoundary state={dehydrate(queryClient)}>
<UsernameClient />
</HydrationBoundary>
)
}As you can see here, I have an export script that sets Then what I do in my RSC's is I check for NEXT_PUBLIC_EXPORT and conditionally prefetch data for dynamic pages. And sometimes I want to cache things, especially user profiles with ISR. What if I have a user who blows up their profile and gets tons of hits? I need to use ISR to limit DB requests. So right now the most important thing for me is to use But that's going away? Right now I can do something like, if NEXT_PUBLIC_EXPORT then use unstable_cache. So I can dynamically decide when to use certain features based on whether we are exporting. However, this is really difficult to work with Server Actions, because there's no way to dynamically render a directive like "use server" or "use cache". I came up with a hack using LazyLoading for Server Actions but I don't love it, and it's bad DX. So if "use cache" forces me to only be able to use caching in Next.js by using the directive, and then turns everything into "server actions", I can't use it effectively at all. Where as unstable_cache is much better for me since I can conditionally call that function. I also really want to be able to use generateStaticParams and cache certain routes, both for my production site on Vercel and on my static export, simultaneously with the same codebase. I would also like to be able to use cacheTag dynamically (checking NEXT_PUBLIC_EXPORT) for my RSC data fetching so I can revalidate things conditionally. |
Beta Was this translation helpful? Give feedback.
-
|
My usePrefetchIntercept "hack" to support dynamic slugs in static exports with App Router can be seen here: |
Beta Was this translation helpful? Give feedback.
-
|
For anyone following this issue, the fix has been discussed here: vercel/next.js#discussioncomment-12351694. Hope that helps! 🚀 |
Beta Was this translation helpful? Give feedback.
-
|
Note: That's not a fix, that's a work-around using an NGINX configuration file to rewrite dynamic routes - a workaround that was proposed last year in fact by @friedjoff (https://github.com/geops/next-nginx-routes) |
Beta Was this translation helpful? Give feedback.
-
|
It does look like the team has started the implementation to support this! Hopefully in 5.3 🤞🏻 |
Beta Was this translation helpful? Give feedback.
-
|
FYI @feedthejim We might need an SPA fall-back file and some Nginx tweaks when a page is not pre-rendered. as discussed in a remix-run issue: remix-run/react-router#12905 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
For whoever is struggling trying to find a temporary workaround for that situation, please check this, it might be helpful somehow. |
Beta Was this translation helpful? Give feedback.
-
|
Oh cool, is that why I can't get this to work? |
Beta Was this translation helpful? Give feedback.
-
|
any update please? |
Beta Was this translation helpful? Give feedback.
-
|
@feedthejim Any progress on this matter? |
Beta Was this translation helpful? Give feedback.
and others
-
Note
Jump to the latest answer from the Next.js team: #64660 (comment)
Verify 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: exportWhich 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
Describe the Bug
Fails with an error:
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.
/blog-app/)/blog-app/one)Which browser are you using? (if relevant)
Chrome
How are you deploying your application? (if relevant)
python3 -m http.server 3000
NEXT-1550
Beta Was this translation helpful? Give feedback.
All reactions