How to Make a Purely Client-Side SPA with Next.js

a lot of people are asking how to make a purely client-side SPA (no Node.js server, 100% static bundle) with Next.js, while using dynamic routing like /stuff/:id.

it’s not super obvious from the Next.js docs right IMO, so i made an example. https://t.co/1J4rpMWTpI

— дэн (@dan_abramov) March 18, 2023

as noted in README, the main caveat is that Next.js generates an HTML page *per route*. if you host statically, and your host isn’t written in JS, you need to generate a list of rewrite rules for your static host. ideally Next.js should add auto-generation for Nginx, Apache etc.

— дэн (@dan_abramov) March 18, 2023

however, that caveat isn’t some kind of a flaw in Next.js. on the contrary, it *fixes* a flaw in SPA deployment the way most SPAs do it.

every route gets its own HTML file, so Next.js puts only the <script> tags for chunks used on that page. and you can pregenerate some content.

— дэн (@dan_abramov) March 18, 2023

i think we need to create a few templates for common setups. maybe the same small app ported to each recommended framework. with separate examples for Node.js server and no server at all. to show off common ways to set them up and compare the patterns between them.

— дэн (@dan_abramov) March 18, 2023

here is how to do the same in Gatsby (thanks @bradwestfall for the tip!): https://t.co/Z6umBSRk0z

it also needs the same route rewrites trick (but some providers do this automatically)

— дэн (@dan_abramov) March 22, 2023