how to build nextjs with fallback: true enable
I'm unable to find any examples of what needs to be done to deploy nextjs with fallback: true enabled.
using export it throws an error that it can't be exported this way if fallback: true is enabled.
And if I use npm run build
it doesn't seem to generate the out folder.
How can I run a build and generate the out folder with fallback: true enabled in my app
netlify.toml [build] command = "npm run build && npm run export" publish = "out"
package.json "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "export": "next export" },
Solution 1:
You can't use use npm run build
to generate static 'out' folder (i.e. static html-files). Thats becouse with fallback enabled, your site became 'non-static'. So it can be deployed only on servers thats run NodeJS. You may start server with node start
or implement your own NodeJS server. This is a most misunderstanding point about SSG\SSR. More info at https://nextjs.org/docs/advanced-features/static-html-export
Solution 2:
The other posts didn't explain why it doesn't work.
If you have fallback
as true
that means you have pages with dynamic routes (path/[pid].js
) and you DON'T want to pre-render all the pages. You want some pages to load without data, maybe because you want to load data manually.
When you use NextJS's export
, it creates a static app with no supporting backend so that the app can be served on a static host.
For each pre-rendered path, NextJS will generate a directory structure to match the prerendered path.
If you have:
product/1
, product/2
, product/3
then NextJS will create those directories.
But if you have routes that are not prerendered like product/4
then NextJS will not create that directory, then when the user opens their browser to exmample.com/product/4
it will 404!