next-export
Export next.js sites to be served statically. By default this outputs to a sites
directory in the root of your project. Huge thank you to @matthewmueller for getting the initial PR going for this functionality (in: #1576)!
Getting Started
Install it
npm i -D next-export
Then add the scripts to your package.json
"scripts":
And run it
npm run next-export-fix && npm run next-export
assetPrefix
option
The assetPrefix
option in next.config.js
can be used to serve pages on github pages (example: http://tscanlin.github.io/tocbot/)
This allows you to serve multiple static next.js apps on a single domain.
What does 'next-export-fix' do?
It modifies some bits of next/dist/lib/page-loader.js
Specifically it changes the functions normalizeRoute
and registerPage
. These changes are necessary to make index / root paths work.
Normally when next.js is used server side it serves js back from paths ending in /
. This isn't possible with static sites so we do some mapping to keep the same /
path but actually fetch and index
file instead. See below for the annotated code changes.
It can be run multiple times and only makes the changes once. I play to open a PR to try and get these changes into next.
normalizeRoute
before:
{ if route0 !== '/' throw 'Route name should start with a "/"' route = route if route === '/' return route return route}
after:
{ if route0 !== '/' throw 'Route name should start with a "/"' // Remove assetPrefix from route. route = route // Make sure it's at least a slash incase the assetPrefix makes it an empty string (for root url). if !route route = '/' // Add index to the end of the route if it ends w/ '/' if routeroutelength - 1 === '/' return route + 'index' return route}
registerPage
before:
const register = { const error page = thispageCacheroute = error page thisregisterEvents}
after:
const register = { const error page = thispageCacheroute = error page thisregisterEvents // This caches root / index routes under both `/` and `/index` keys. if routeroutelength - 1 === '/' thispageCacheroute + 'index' = error: error page: page ; thisregisterEvents; }