4

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.

Philipp
  • 794
  • 1
  • 7
  • 21
  • You need to run `next export` to export your app to [static HTML](https://nextjs.org/docs/advanced-features/static-html-export). – juliomalves Aug 10 '21 at 06:02
  • Thank you for this hint. I get Error: Image Optimization using Next.js' default loader is not compatible with `next export`. But seems to be the right direction. – Philipp Aug 10 '21 at 07:29

1 Answers1

7

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.

Roman Mkrtchian
  • 2,548
  • 1
  • 17
  • 24