Blitz is pivoting to framework agnostic toolkit. Click to learn more.
🚀Announcing Flightcontrol - Easily Deploy Blitz.js and Next.js to AWS 🚀
Back to Documentation Menu

Static HTML Export

Topics

Jump to a Topic

blitz export allows you to export your app to static HTML, which can be run standalone without the need of a Node.js server.

The exported app supports only some features of Blitz, like dynamic routes, prefetching, preloading and dynamic imports. It does not support queries / mutations, authentication or database access.

blitz export works by prerendering all pages to HTML. For dynamic routes, your page can export a getStaticPaths function to let the exporter know which HTML pages to generate for that route.

blitz export is intended for scenarios where none of your pages have server-side or incremental data requirements (though statically-rendered pages can still fetch data on the client side normally).

Info

If you're looking to make a hybrid site where only some pages are prerendered to static HTML, Blitz already does that automatically for you! If your page doesn't use getServerSideProps, then it will be a static HTML page.

blitz export also causes features like Incremental Static Generation and Regeneration to be disabled, as they require blitz start or a serverless deployment to function.

How to use it

Develop your app as you normally do with Blitz. Then run:

blitz build
blitz export

For that you may want to update the scripts in your package.json like this:

"scripts": {
  "build": "blitz build && blitz export"
}

And run it with:

yarn build

Then you'll have a static version of your app in the out directory.

By default, blitz export doesn't require any configuration. It will output a static HTML file for each page in your pages directory (or more for dynamic routes, where it will call getStaticPaths and generate pages based on the result). For more advanced scenarios, you can define a parameter called exportPathMap in your blitz.config.js file to configure exactly which pages will be generated.

Deployment

By default, blitz export will generate an out directory, which can be served by any static hosting service or CDN.

Caveats

  • getServerSideProps cannot be used within pages because the method requires a server. Consider using getStaticProps instead.
  • The fallback: true mode of getStaticPaths is not supported when using blitz export.
  • API Routes, Queries, and Mutations are not supported by this method because they can't be prerendered to HTML.
  • Internationalized Routing is not supported as it requires server-side routing.
  • The Image component's default loader is not supported when using blitz export. However, other loader options will work.

Idea for improving this page? Edit it on GitHub.