Unexpected behavior when using output: 'export', generateStaticParams(), and export const dynamic #56253
Comments
github-actions
bot
added
the
Navigation
|
I confirm. Rolling back to 13.4.19 fixed it. |
@wdavidw I ended up sticking on the latest version but remove the If you have your |
|
Same problem on next 13.5.4
|
|
same problem for me
|
|
the app was working fine , even with build gives error Error: Page "/[[...slug]]/page" is missing exported function "generateStaticParams()", which is required with "output: export" config. but after removing it now new error appear : invalid next.config.js options detected: while this is the 13.5.2 any suggestion on how to fix it |
|
For the Python environment, this issue seems to be related. #54393 |
|
For me, the @Yukigamine solution works, thank you so much! |
Without (Works fine after building and served) |
|
Downgrading to next 13.4.19 fixed it, but I'm not getting loaded correctly my js and CSS files EDITL I fixed it adding |
That was what initially confused me because But at the very least, the documentation should probably be updated so this situation is avoided or is less confusing. PSA to everyone who downgraded, you can run the latest version of Next.JS, you just need to take out the |
Can i Have more details how to do this ? I feel Like I missed up |
|
Same problem. Downgrade works for me. |
@bllfoad Have a look at how I update the source code in "page.js" of the TDP Website. |
Search parameters and dynamic paths usually each have different use cases, but in their overlap (ie.
Take a look at @wdavidw's example. Simply omitting or commenting out the lines with |
|
Same problem. Downgrade works for me. |
|
What should i do if i want to write code like this export default function StudyMaterialItemPage({params}:{params:{id:string}}) { folder structure: study-materials/[id]/page.tsx in next.config.js: output: 'export' but getting error: Error: Page "/(userPages)/study-materials/[id]/page" is missing exported function "generateStaticParams()", which is required with "output: export" config. |
Best option right now is to downgrade next to 13.4.19. |
The error is telling you exactly what is wrong.
There is no need to downgrade. Simply omitting or commenting out the lines with |
But, how will you have a 404 page when the user enters a route segment that hasn't been generated by |
Your webserver handles that part. When you actually run |
Okay then,where/how can I catch these errors and manually redirect to a custom 404 page? |
If you make a custom not-found using the built-in Next.js features, it will generate a |
Which version did you switch to? |
|
Yes, same bug when using "export" (v.14.0.3), dynamic route don't work. My system is client side only, so, the "fetch" works after the user sign in, so, I can get the "slug" of the router and fetch the data. Temp solution: downgrade to version 13.4.19 EDIT: I've upgraded to new version again because the "13.4.19" has bugs. So, the solution now is don't use the "dynamic routes", use the "searchParams"... |
|
I think I'm in same situation as @jadsonlourenco : I'm using export for a pure client-side application, and just trying to use dynamic segments which will fetch data that relies on the segment data. Per @Yukigamine 's comment:
OK, but the docs actually say:
That's exactly what I do not want to do. I don't want to memoize the params, nor pre-compile routes with them at build-time, as these are data-driven params which change constantly. Docs for So... what are we supposed to do differently to support dynamic params with |
I may be wrong, but I don't think you can. The idea of |
This is broken with output: 'export' vercel/next.js#56253
- Updated Next.js version to 13.4.19. See: vercel/next.js#56253 (comment) - Moved posts under a different type of routes, and using Route Groups for grouping blogpost-related pages together. Those will share a layout. - In order to implement navigation in the pages of the post list, we are using Parallel Routes (@list) so that their contents can be embedded in the main layout. There should be another way to do this, but we are unaware of it, at the moment. - The post list pages are generated using Dynamic Routes: this allows us to pre-compute the amount of pages, render them statically and deploy them safely to Github Pages. Every time a new blogpost is added, a new build will be necessary - but that's not impacting anything we do, really. - The component ReturnToHomePageButton was autogenerated and extracted, hence the different filename. It will need refactoring anyway.
This has always been how nextjs has behaved since basically v1. if you want runtime url parameters for a statically exported nextjs site you need to use either:
But just use UrlFragments, because:
edit: downvoters can QQ all you want. you need to understand what is possible in export mode. Furthermore, storing stuff like |
|
Same problem on next 14.1.0 |
|
I encountered the same issue recently with the latest version (14.1.0), but I managed to resolve it after realizing it was due to a careless mistake on my part. The error wasn't because the expected exported function couldn't be found, but rather because no valid params were being returned from the function. Here's a brief overview of my initial setup and the subsequent fix that resolved the issue: Before the Fix:type Params = {
id: string;
}
type Props = {
params: Params;
}
export default function Page(props: Props) {
return <div>{props.params.id}</div>;
}
export const dynamicParams = false;
export const generateStaticParams = (): Props[] =>
contentList.map((post) => ({ params: { id: post.id }}));In this setup, generateStaticParams was supposed to export an array of Props, but it was actually expected to return an array of Params. After the Fix:type Params = {
id: string;
}
type Props = {
params: Params;
}
export default function Page(props: Props) {
return <div>{props.params.id}</div>;
}
export const dynamicParams = false;
export const generateStaticParams = (): Params[] =>
contentList.map((post) => ({ id: post.id }));By changing the return type of generateStaticParams to an array of Params instead of Props, the issue was resolved. It appears the error was misleading, suggesting a missing function, when the real issue was with the type of data being returned. I hope this helps anyone else facing the same or a similar problem! |
|
I somehow fixed the same issue in the past, on the Next.js (v14.0.x) version, by fixing a returning value of But today I've got this problem again with Next.js (v14.1.0) I have async version of /**
* Returns list of all news/articles to generate static pages.
* @returns {Promise<Params[]>} List of all news/articles.
*/
export async function generateStaticParams(): Promise<Params[]> {
const files = await getContentFiles();
const result = files.map((fileName) => {
const slugAsArray = contentFileToUrl(fileName).split('/').filter(Boolean);
return {
slug: slugAsArray,
};
});
return result;
}
export const dynamicParams = false; // No fallback: 404 if not foundThe funniest thing is that Moreover, if I comment out |
Are you running with Using The reason I created this issue is to see if the docs or error messages can be updated to make that clear. |
Tell this to Firebase Hosting, they cannot host static apps without |
|
In my case, this error was caused by my static parameters function not returning the proper type--typo in the object value. https://nextjs.org/docs/app/api-reference/functions/generate-static-params#returns |
Thanks. You helped me. I had same issue. It was working in dev/build with no export flag. But then failed with explort flag. I was returning a straight array, return ["1","2"] it needs to be in the format: |
|
can any one tell me why still have this issue in Nextjs 14 , this is my code for user page import axios from 'axios'; export async function generateStaticParams() { } const Page = async ({ params }) => { User DetailsName: {data.name} Email: {data.email} </> ); }; export default Page; ` |
You should return the params directly, not an object with a |
|
@karpolan |
|
this guy has it working with latest next.js. unfortunately I couldn't point to exactly what I was doing different. one thing I noticed was |
|
It looks like 14 fails if generateStaticParams returns an empty array, in 13 this was accepted. |
I can do this if I am not using server side components, but what if my projetct must be all client side? |
|
For now, you may be able to work around this by conditionally changing the const nextConfig = {
// Export only when building in GitHub Actions
output: process.env.GITHUB_ACTION ? 'export' : undefined,
};Then |
|
Why don't you can just simply remove or comment |
My app doesn't require a backend, and the host I currently use doesn't support one. So I render it as a static site using the If I eventually choose new hosting where NextJS will run as the webserver, then I'll remove |
put this in your page.tsx: export function generateStaticParams() { this will generate routes as: /study-materials/1, /study-materials/2, /study-materials/3 now if you had understood, return Data.map((data) => ({ |
This comment has been minimized.
This comment has been minimized.
|
I suppose this is the problem of the It's the develop runtime problem(might be a bug of HMR,but I'm not sure), not the problem of developer. |
|
Code return pageNames.map((pageName) => ({ const validPageNames = ['a', 'b', 'c', 'd', 'e', 'f'] if (!validPageNames.includes(pageName)) { {pageName} Page ) } /** @type {import('next').NextConfig} */ export default nextConfig `` Error : Page "/products/[pageName]/page" is missing param "/products/1" in "generateStaticParams()", which is required with "output: export" config. Issue : When I try to access a non-existent page, it doesn't redirect to the 'Not Found' page. Additionally, after building the project with Next.js, it's not possible to directly access certain pages. If anyone has experienced this issue or knows a solution, I would appreciate your help. Thank you! |
@amartuvshin-bold that's just the error you get instead of a 404 when you're in the dev environment. When you run |
and others
Link to the code that reproduces this issue
https://codesandbox.io/p/sandbox/sweet-morning-nl3spx
To Reproduce
output: 'export'innext.config.jsexport const dynamicParams = falseand/orexport const dynamic = 'force-static'next devand attempt to visit a page on the dynamic routeCurrent vs. Expected behavior
Expected behavior:
Ignore the Route Segment Config options and/or generate a warning about them not being compatible.
Actual behavior:
Everything works correctly as long as you don't use output: 'export' and dynamic/dynamicParams together.
When they are, the following error is sent:
Error: Page "/[[...slug]]/page" is missing exported function "generateStaticParams()", which is required with "output: export" config.The page is obviously not missing the function as it's right there and works fine under different configurations. This error occurs with all three types of Dynamic Routes when the Route Segment Configs are present with
output: export. (Note: I have only tested withdynamicanddynamicParamsso far.If you take either of those conditions out, everything works as expected:
output: exportoption, it will properly serve 404s when visiting a route that isn't generated.output: exportThe errors only actually happen in next dev when both of the aforementioned conditions are present.
This scenario probably just warrants updated documentation and maybe extra sanity checks.
Verify canary release
Provide environment information
Which area(s) are affected? (Select all that apply)
App Router, Routing (next/router, next/navigation, next/link), Static HTML Export (output: "export")
Additional context
During testing, I went back to 13.4.19 and did not receive the error about generateStaticParams() missing under the circumstances described in this big report. I have not yet had a chance to look into whether the error just didn't exist yet or simply wasn't being thrown in that version, but it did entirely ignore the Route Segment Config options.
EDIT: For those looking for a workaround--
Rather than downgrading, simply remove
export const dynamicParams = falseand/orexport const dynamic = 'force-static'from your file. These lines don't actually do anything inoutput: 'export'and just causenext devto get confused.The text was updated successfully, but these errors were encountered: