Example doesn't work

[benfoster]

Hi,

I came across your example on Reddit after wrestling with generateStaticParams in Next.

When I run build I get the following error:

Error: Page "/spa-post/[id]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.

[haugseth]

Hi,

I think this is related to this issue in Nextjs: https://github.com/vercel/next.js/issues/54393. I don't think the SPA route was tested after commit 22a7e4c?

I have tested this and found that the issue is introduced in nextjs v13.4.20-canary.1. Just made a comment to the original issue linked above.

[program247365]

Yup in the latest Next 14, same thing:

pnpm build

> @ build /Users/kridgway/code/next-static-export-example
> next build

   ▲ Next.js 14.1.0

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types

> Build error occurred
Error: Page "/spa-post/[id]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.
    at /Users/kridgway/code/next-static-export-example/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/index.js:1102:59
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Span.traceAsyncFn (/Users/kridgway/code/next-static-export-example/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/trace/trace.js:151:20)
    at async Promise.all (index 9)
    at async /Users/kridgway/code/next-static-export-example/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/index.js:981:17
    at async Span.traceAsyncFn (/Users/kridgway/code/next-static-export-example/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/trace/trace.js:151:20)
    at async /Users/kridgway/code/next-static-export-example/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/index.js:918:124
    at async Span.traceAsyncFn (/Users/kridgway/code/next-static-export-example/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/trace/trace.js:151:20)
    at async build (/Users/kridgway/code/next-static-export-example/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/build/index.js:374:9)
    at async main (/Users/kridgway/code/next-static-export-example/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/bin/next:155:5)
   Collecting page data  . ELIFECYCLE  Command failed with exit code 1.

[akdlsz21]

Is it even possible to have client side fetching logic in a dynamic route when static export?

[PinkaminaDianePie]

@akdlsz21 no, but there is a workaround:

1. use generateStaticParams function, so it will return an array with a single item: ['__id__'] it will generate you a single page, /spa-post/__id__
2. set up redirects according to how your hosting provider allows to do it, so any route like /spa-post/something will redirect to /spa-post/__id__.
3. extract something from the url

sadly, there is no better options. app router is not production ready yet

[leerob]

@PinkaminaDianePie you can continue to use the Pages Router if you are not satisfied with the App Router 👍

[PinkaminaDianePie]

@PinkaminaDianePie you can continue to use the Pages Router if you are not satisfied with the App Router 👍

When all the docs and materials insist on using the app router, having clear messages that RSC (and so the app router) is the future, seeing that 95% of improvements in the new Next version are related to the app router, and so on? Good luck with selling page router to anybody :) People will use any workarounds they can find, as you can see in this Next discussion https://github.com/vercel/next.js/discussions/64660#discussioncomment-9705413

Sure, stuff will break, these workarounds may stop working with every new release of Next, but people won't blame their workarounds, people will blame Next team instead. The "default" react framework does not support such a core functionality as SPA in 2024? And the "official" solution is to use legacy functionality, which nobody is really working on? You could tell use "you can continue to use CRA" or "you can continue to use Gatsby" instead. A solution? Sure. Will anybody buy it? Don't think so.

[leerob]

@PinkaminaDianePie The App Router is the future direction of Next.js – and the Pages Router is not deprecated. We'll continue to reinforce this message, and are still adding new features and improvements there. For example, Turbopack works with both routers, and we're still working on both (just make a SSR performance improvement to Pages in v15).

I would not recommend the workarounds and instead, if you need that functionality, I would recommend using the Pages Router. Especially starting from this repo, it's not that many lines of code difference to move between.

[dancingfrog]

For static builds, the href={`/post/${post.id}`} works when clicking on links, but does not work when refreshing target page (i.e. entering the static version of http://localhost:[some-port]/post/2 in the browser's URL bar returns an error). http://localhost:3000/post/2.html works, but cannot be resolved by the PostPage component.

[Yuniac]

So the only way to get this to work is by switching back to pages directory...? I just started learning nextjs for our company and now after spending 2 weeks making a simple app using app router (because that's the future according to the docs, etc) and now we want static exports but to make them work I have to learn the differences and refactor it back into pages?

[PinkaminaDianePie]

So the only way to get this to work is by switching back to pages directory...? I just started learning nextjs for our company and now after spending 2 weeks making a simple app using app router (because that's the future according to the docs, etc) and now we want static exports but to make them work I have to learn the differences and refactor it back into pages?

there are some dirty hacks, like using app router for static paths and react-router for dynamic segments, but the most robust way is migrating to the pages router. app router at this moment is usable only if you use SSR everywhre. it's a successor for PHP, but not for pages router ;)