Replies: 130 comments 117 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.
-
|
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.
-
|
Can't believe this isn't added yet |
Beta Was this translation helpful? Give feedback.
-
|
15 major versions and you can't do something this basic. insane. |
Beta Was this translation helpful? Give feedback.
-
|
Technically only 2 major versions and neither it is "basic" by any stretch since in |
Beta Was this translation helpful? Give feedback.
-
|
All it needs to do is render a fallback static page whenever an unknown parameter is passed. This is super simple. In SSR just set the parameter to an empty string when it is not found in the static params, then we can use the front end to detect the actual parameter from the pathname. |
Beta Was this translation helpful? Give feedback.
-
|
This issue led me to transition from Next.js to React Router. |
Beta Was this translation helpful? Give feedback.
-
|
After almost two years, someone opened a PR here #84836 addressing this issue. |
Beta Was this translation helpful? Give feedback.
-
|
Hey @HasanMothaffar, thanks for noticing. I'm still working on that implementation, as I faced some issues yesterday. I converted it back to a draft, so as soon as I have a more solid implementation, I'll reopen it for review. For now, I would appreciate any community support. Feel free to check it. Thank you. |
Beta Was this translation helpful? Give feedback.
-
|
Just hit a blocker on this one! This basic thing is still isn't fixed, right ? |
Beta Was this translation helpful? Give feedback.
-
|
We need to put the NextJS app in a Capacitor App for Android, but it has to use static build, and the existing app api route cannot be called. |
Beta Was this translation helpful? Give feedback.
-
|
The pages router is still the only supported way to use Capacitor with Next, unfortunately. |
Beta Was this translation helpful? Give feedback.
-
|
you can use pages and app router together so use the pages router for the dynamic param page. |
Beta Was this translation helpful? Give feedback.
-
|
Next.js is 16 now, and this issue is still not fixed. |
Beta Was this translation helpful? Give feedback.
-
|
@leerob promised... promises are cheap. Next.js is harming itself. |
Beta Was this translation helpful? Give feedback.
-
|
Exactly, more than 2 years and still nothing. And the assurances about Pages router still being the first-class citizen are becoming more and more laughable with all the new functionalities landing in App Router only. |
Beta Was this translation helpful? Give feedback.
-
|
@leerob does not work at Vercel anymore, but maybe he could ping someone there that could give this attention? |
Beta Was this translation helpful? Give feedback.
-
|
@durchanek Even worse the tutorial for pages router now slides into app tutorial randomly. |
Beta Was this translation helpful? Give feedback.
-
|
From what I see we have a PR for this: #84836 Guys I think we have to go on this PR and mention Vercel team to prioritize it, someone added a correction so there is no any reason to don't implement it |
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