Next.js enables starting as a static site or Single-Page Application (SPA), then later optionally upgrading to use features that require a server.
When running next build
, Next.js generates an HTML file per route. By breaking a strict SPA into individual HTML files, Next.js can avoid loading unnecessary JavaScript code on the client-side, reducing the bundle size and enabling faster page loads.
Learn more: https://nextjs.org/docs/app/building-your-application/deploying/static-exports
Deploy the example using Vercel or preview live with StackBlitz
Execute create-next-app
with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-static-export with-static-export-app
yarn create next-app --example with-static-export with-static-export-app
pnpm create next-app --example with-static-export with-static-export-app