Hosting Nextra (Next.js static site generator) website on GitHub Pages

Question

Some days ago I came across Nextra, which is a static site generator based on Next.js.

The docs explain how to deploy a site to Vercel and I am wondering if I can deploy the site to GitHub Pages or any other platform that host static HTML sites.

From my understanding yarn build will create a folder that includes html, css and js files which can be uploaded to GitHub pages. Am I on the right track? Respectively can Nextra pages be hosted on GitHub Pages?

I cannot find a build folder that includes the generated website or something similar.

Thanks for every advice in advance.

Answer 1

To generate static files with no need of a Node.js server for hosting you can export your next app after build.

In package.json:

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

Then yarn export and you will get the files in the out/ folder.

With basic Nextra config you will get an error about image optimization:

Error: Image Optimization using Next.js' default loader is not compatible with next export.

To avoid that error you should deactivate Next.js image optimization by providing the images.unoptimized option outside require("nextra")({}).

Like this:

// next.config.js

const withNextra = require("nextra")({
  theme: "nextra-theme-docs",
  themeConfig: "./theme.config.tsx",
});

module.exports = {
  ...withNextra(),
  images: {
    unoptimized: true,
  },
};

Here is a working example being deployed to Github Pages.