Replies: 122 comments 108 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.
This comment was marked as disruptive content.
This comment was marked as disruptive content.
-
|
It's understandable if the team decides not to support this feature—that's their decision as the framework maintainers. However, since this issue has been around for quite a while, it would be helpful if they could clearly state their stance on it directly. |
Beta Was this translation helpful? Give feedback.
-
|
they don't give a shit |
Beta Was this translation helpful? Give feedback.
-
|
Can we plz get this and proper scroll to top support in 15.4. I'd pay |
Beta Was this translation helpful? Give feedback.
-
|
I've been checking the release notes every single day based on this answer from @feedthejim waiting for news. If you could post some feedback on that, the community would appreciate very much any kind of information around it. |
Beta Was this translation helpful? Give feedback.
This comment was marked as spam.
This comment was marked as spam.
This comment was marked as spam.
This comment was marked as spam.
-
|
Hi all, sorry for the delayed response. We’re still planning to address this within the next few months. Unfortunately, we had to shift the timeline slightly to prioritize the release of use cache and Dynamic IO. That said, I want to be clear: this is absolutely a use case we intend to support in Next.js. As always, we’d love help from the community in shaping and implementing this, open source works best when we collaborate, and PRs are always welcome. |
Beta Was this translation helpful? Give feedback.
-
|
The only issue here is that the "use cache" directive breaks caching for hybrid apps that want static exports on demand. Need a way to use caching without needing to use the directive since the directive cannot be used in a conditional statement. I need to be able to do this: export const dynamic = process.env.NEXT_PUBLIC_EXPORT === "true" ? "force-static" : "auto"If this gets pulled out for the directive it is a regression. The last time I tested "use cache" on canary it would not allow me to do a static export because it converts it into a server action. |
Beta Was this translation helpful? Give feedback.
-
|
I totally understand the situation. Developers are working extremely hard to meet the expectation of the management but the management does not listen to what users actually need. Perhaps we shouldn't pressurize devs in GitHub but instead bring this issue up in more discussion platforms like Reddit and hackernews so that Vercel knows what matters DX most. |
Beta Was this translation helpful? Give feedback.
-
|
It's not in vercel's interest. they are a hosting platform after all. for those waiting might as well check out:
|
Beta Was this translation helpful? Give feedback.
-
I know just meant in a way so that others who don't know can understand |
Beta Was this translation helpful? Give feedback.
-
|
Did you start writing this list 5 years ago? |
Beta Was this translation helpful? Give feedback.
-
this is the account I use in my mobile and Rakhsan when I am working in pc |
Beta Was this translation helpful? Give feedback.
-
i mean, gatsby is 100% irrelevant in 2025 |
Beta Was this translation helpful? Give feedback.
-
most of the time dwag you hella don't need graphql so might be irrelevant cuz boy I didn't use that for 2 years |
Beta Was this translation helpful? Give feedback.
-
|
So I spent the last few days working around this. I am hosting on Cloudflare pages and their nextjs support is abysmal; so I decided to go fully static instead of relying on another hosting provider. I created a kind of a plugin that leverages not-found.tsx to do dynamic routing. The caveat is that you rename your [page] to , and SEO metadata will be the ones sent by not-found; so these routes should be internal only. The only remaining issue I have is page transitions. Since you'll be hitting a not-found path, this breaks hydration. Essentially, you'll be loading each page separately. Theoretically, this shouldn't be the case (the page itself is loaded dynamically inside the error page). If someone has ideas on this or willing to work further on it, please share or shot me an email. |
Beta Was this translation helpful? Give feedback.
-
insane cope just use vite it will be faster using it trust me. doesn't hurt trying instead of sticking to "the framework that will fall by 2026 I bet" |
Beta Was this translation helpful? Give feedback.
-
|
Oh no, someone didn’t make the same decisions as you, they must be “coping” 😂 Furthermore, vite is a terrible recommendation for someone who obviously wants a mixture of SPA and SSR/SSG benefits. I think you meant to say Astro, son. |
Beta Was this translation helpful? Give feedback.
-
|
@waynesbrain Vite can handle all that (initial SSR + SPA from there on), with Vite based frameworks such as https://vike.dev or https://onestack.dev or https://tanstack.com/start or https://reactrouter.com/ v7 or any of the other Vite options for that at https://github.com/vitejs/awesome-vite?tab=readme-ov-file#ssr |
Beta Was this translation helpful? Give feedback.
-
Stop imagining he clearly said he wants a pure SPA no SSR/SSG bullshit don't make stuff up |
Beta Was this translation helpful? Give feedback.
-
|
Also btw did you not know vite has simple to advanced SSR plugins |
Beta Was this translation helpful? Give feedback.
-
|
What worked for me is hosting it on aws amplify, not a big fan but it works. Actually it's very easy to setup from the aws console (you don't have to integrate it in your code, just skip to the hosting part). Pricewise I am not sure yet but it doesn't look too expensive for small/medium traffic websites. Will stay on it until static builds are available, then will migrate to s3 + cloudfront |
Beta Was this translation helpful? Give feedback.
-
|
Mid 2025 and this still isn't supported, wtf. |
Beta Was this translation helpful? Give feedback.
-
|
@daveycodez I am talking about direct access to the page (ie: you paste the full url directly into the browser). This step has to go through the web server. |
Beta Was this translation helpful? Give feedback.
-
The requests still have to be handled and served the entry point ofc. This has been a thing for ages now. |
Beta Was this translation helpful? Give feedback.
-
How appropriate, I just submitted a feature requests for Github Pages to support this. It would involve having the user manually configure the urls paths that should return index.html with an http status code of 200 and the ones that should return 404 because there is no way Github Pages, or any static web hosting provider for the matter, could guess the paths in a generic way that worked regardless of the framework and libraries used. See https://github.com/orgs/community/discussions/162165#discussion-8430483 Now that I think about it, wouldn't it be cool if we had an standard way to configure these paths? Like a sitemap.xml that supported dynamic paths and could be used to tell static web hosting providers about them in a standard way so they know about it. How could I possibly even start to work on something like this though? |
Beta Was this translation helpful? Give feedback.
-
|
@adriancuadrado By getting major web servers to support that :) and then turning it into a standard. The issue is, each web server already has its config syntax; and redirection is essentially what web servers are. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
This missing feature has been the main reason I haven't used Next.js, unfortunately. |
Beta Was this translation helpful? Give feedback.
-
|
Not sure what anyone's use case might be, but I solved this by removing dynamic route and making a regular static page and then used router.query parameters and it works fine. If your use case involves redirecting user from 1 static page to a dynamic route, you can redirect user from that static page to a another static page but add url parameters like this: Might not be useful for most of you but it's enough for me so I thought to share it |
Beta Was this translation helpful? Give feedback.
-
|
I solved this by using the 404 redirect hack: # pages/404.tsx
import { useRouter } from "next/router";
import { useEffect } from "react";
const P404 = () => {
const router = useRouter();
useEffect(() => {
router.push(router.asPath);
}, [router.asPath]);
return <> </>;
};
export default P404; |
Beta Was this translation helpful? Give feedback.
-
|
A lot of people need this for fully client sided apps, why not implement it for them only, I'm not exactly sure what's the other case or the reason this is not being implemented |
Beta Was this translation helpful? Give feedback.
-
|
because Vercel is a for-profit company selling their host service. |
Beta Was this translation helpful? Give feedback.
-
|
I use this super ugly hack: When I run next build, I call a script that outputs a JSON file with all routes that exist. Then there is a custom
"scripts": {
...
"build": "node generateRoutes.js && next build",
...
}
const fs = require('fs');
const path = require('path');
/**
* Discovers dynamic routes from the pages directory
*/
function discoverDynamicRoutes(pagesDir) {
const routes = [];
function traverseDirectory(dir, basePath = '') {
const files = fs.readdirSync(dir);
files.forEach(file => {
const filePath = path.join(dir, file);
const stat = fs.statSync(filePath);
if (stat.isDirectory()) {
const routeSegment = file.match(/^\[(.+)\]$/) ? file : file;
const newBasePath = `${basePath}/${routeSegment}`;
traverseDirectory(filePath, newBasePath);
} else {
const ext = path.extname(file);
if (['.js', '.jsx', '.ts', '.tsx'].includes(ext)) {
const fileName = path.basename(file, ext);
if (fileName === 'index') {
if (basePath) {
routes.push(basePath);
}
} else {
const routeSegment = fileName.match(/^\[(.+)\]$/) ? fileName : fileName;
routes.push(`${basePath}/${routeSegment}`);
}
}
}
});
}
traverseDirectory(pagesDir);
return routes.filter(route => route !== '').sort();
}
/**
* Generates routes JSON file
*/
function generateRoutesJSON() {
const pagesDir = path.join(__dirname, 'pages');
// Discover all routes from the pages directory
const allRoutes = discoverDynamicRoutes(pagesDir);
const routeData = {
generated: new Date().toISOString(),
routes: allRoutes,
};
// Write to JSON file
const outputPath = path.join(__dirname, 'generatedRoutes.json');
fs.writeFileSync(outputPath, JSON.stringify(routeData, null, 2));
console.log(`Generated ${allRoutes.length} routes`);
console.log(`Saved to: ${outputPath}`);
return routeData;
}
generateRoutesJSON();
import routesData from './generatedRoutes.json';
/**
* Converts a dynamic route pattern to a regex pattern
*/
function routePatternToRegex(routePattern: string): RegExp {
// Escape special regex characters except for our brackets
const escapedPattern = routePattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
// Replace escaped brackets with our dynamic segment pattern
const regexPattern = escapedPattern.replace(/\\\[([^\]]+)\\\]/g, '([^/]+)');
// Ensure the pattern matches the entire path
return new RegExp(`^${regexPattern}$`);
}
/**
* Checks if a given URL path matches any of the routes
*/
export function doesRouteExist(path: string): boolean {
if (!path || typeof path !== 'string') {
return false;
}
// Remove trailing slash and query params for comparison
const cleanUrl = path.replace(/\?.*$/, '').replace(/\/$/, '') || '/';
return routesData.routes.some(route => {
// For static routes (no brackets), do exact match
if (!route.includes('[')) {
return cleanUrl === route;
}
// For dynamic routes (with brackets), use regex matching
const regex = routePatternToRegex(route);
return regex.test(cleanUrl);
});
}
// Default export for convenience
export default doesRouteExist;
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { doesRouteExist } from '../doesRouteExist';
const NotFoundPage = () => {
const router = useRouter();
const [isDetectingRedirect, setIsDetectingRedirect] = useState(true);
useEffect(() => {
const path = global?.location?.pathname;
const routeExists = Boolean(path) && doesRouteExist(path);
if (routeExists) {
router.replace(path);
return;
}
setIsDetectingRedirect(false);
}, [router]);
return // ...
}And then in the AWS CloudFront configuration, I set the 404 page to 404.html. So when I go to a dynamic route like I feel so bad doing it this way that I am actually considering switching to different framework. |
Beta Was this translation helpful? Give feedback.
-
|
All your pages will return a 404 response which is catastrophic for SEO. |
Beta Was this translation helpful? Give feedback.
-
|
Yes, forgot to mention that, but for internal apps this is ok I guess. |
Beta Was this translation helpful? Give feedback.
-
|
Let’s hope this lands in 16.x |
Beta Was this translation helpful? Give feedback.
-
|
🙏 |
Beta Was this translation helpful? Give feedback.
-
|
Hope is our superpower. |
Beta Was this translation helpful? Give feedback.
and others
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
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