Next.js / GitHub Pages

Autre Planete

2 min readNov 12, 2017

Create your project pages with Next.js and React hosted by Github.

Next gh-pages example:

https://github.com/zeit/next.js/tree/canary/examples/gh-pages

Follow Next.js static-html-export guide to start.
https://github.com/zeit/next.js/#static-html-export

This is a way to run your Next.js app as a standalone static app without any Node.js server.

Example :

https://github.com/thierryc/Next-gh-page-example

https://thierryc.github.io/Next-gh-page-example/

Setup your Next.js app as a standalone GitHub Pages.

Add your “out” folder to your master branch.

Remove it from your .gitignore.

> git add out > git commit -m "Initial out subtree commit gh-pages"

It is now possible to completely bypass Jekyll processing on GitHub Pages by creating a file named .nojekyll in the root of your pages repo and pushing it to GitHub.

> touch out/.nojekyll> git add out/.nojekyll> git commit -m "add nojekyll file to bypass Jekyll on GitHub Pages"

Push your project to Github.

> git push

Push your “out” folder as the root of your gh-pages branch

git subtree push --prefix out origin gh-pages

Add a “deploy” script to your package.json

"scripts": {
    "dev": "next",
    …
    "deploy": "next build && next export && git add out/ && git commit -m \"Deploy gh-pages\" && git subtree push --prefix out origin gh-pages"
},

5 step script

next build
next export
git add out
git commit -m \”Deploy gh-pages\”
git subtree push — prefix out origin gh-pages”

Create env-config.js

const prod = process.env.NODE_ENV === 'production'module.exports = {
  'process.env.BACKEND_URL': prod ? '/Next-gh-page-example' : ''
}

Install babel-plugin-transform-define

npm install --save-dev babel-plugin-transform-define

Add .babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    ["transform-define", "./env-config.js"]
  ]
}

Link (important)

Create your link with as.

<Link href='/about' as={ process.env.BACKEND_URL + '/about'}><a>About</a></Link>

Use it

npm run deploy

Browse your project:

https://username.github.io/project_mane/

Replace username by your github user name and replace project_name by your github project name (in the url).

Set routes in next.config

Add assetPrefix in your next.config.js

const debug = process.env.NODE_ENV !== "production";module.exports = {
  exportPathMap: function () {
    return {
      "/": { page: "/" },
      "/ap-grid-layout": { page: "/ap-grid-layout" },
    }
  },
  assetPrefix: !debug ? 'https://anotherplanet-io.github.io/Next-React-Components/' : '',
}

You can also use now

Deploy your app to the cloud with now (download) is more simple.

now

My Github: https://github.com/thierryc