---
title: Nextjs deploy on github-pages
tags: App Hosting
---

# Nextjs deploy on github-pages
There have two approaches on below

- Run Terminal:
Just run `npm run deploy`, setup in pakage.json.

- Github Action:
Add <action-name>.yml, when github detected specificed branch updated will deploy automictically.

## Run Terminal

### Setup

Add those file under your project root
**setting <your-repo-name>**

- > <project-root>/.env-config.js

const prod = process.env.NODE_ENV === 'production';

module.exports = {
'process.env.BACKEND_URL': prod ? '<your-repo-name>' : ''
};

- > next.config.js

const debug = process.env.NODE_ENV !== 'production';

module.exports = {
assetPrefix: !debug ? '<your-repo-name>' : ''
};
- > .babelrc.js

const env = require('./env-config');

module.exports = {
presets: ['next/babel'],
plugins: [['transform-define', env]]
};

### Add script in package.json

- > package.json

"scripts": {
"export": "next export",
"deploy": "rm -rf node_modules/.cache && next build && next export && touch out/.nojekyll && git add out/ && git commit -m \"Deploy Next.js to gh-pages\" && git subtree push --prefix out origin gh-pages"
},

- If you don't want to custom your commit can update your script "deploy"

### Run
npm run deploy

## Github Action

### setup

Same as Run Terminal approac. [here](https://hackmd.io/ODtySrbXSsCDCzqo8WLsJg?view#Setup)
**THIS IS NECESSARY** when you want deploy your nextjs project on github-pages

### Add <action-name>.yml

- > <project-root>/.github/workflows/.<action-name>.yml

name: <Your-action-name>

on:
push:
branches: <The branch> # <The branch> you want to dected

jobs:
deploy:
runs-on: ubuntu-latest

steps:
- name: Checkout 🛎️
uses: actions/checkout@v2

- name: Cache 💾
uses: actions/cache@v2
with:
path: ${{ github.workspace }}/.next/cache
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}

- run: rm -rf node_modules/.cache
- run: npm ci
- run: npm run build
- run: npm run export
- run: touch out/.nojekyll

- name: Deploy 🚀
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./out
force_orphan: true

### Push <The branch>

git push origin <The branch>

## ! Route link in Nextjs

- set Link href `as={process.env.BACKEND_URL + '/<page-name>'}`

import Link from 'next/link';
...

return(
<>
<Link href="/about" as={process.env.BACKEND_URL + '/about'}>
<a className="btn-primary">
<p>About</p>
</a>
</Link>
<Link href="/note" as={process.env.BACKEND_URL + '/note'}>
<a className="btn-primary btn-primary--2">
<p>Note</p>
</a>
</Link>
</>
)

---

My code: https://github.com/barrystone/barrystone.github.io
example: https://github.com/vercel/next.js/tree/canary/examples/gh-pages

Reference:
- https://ithelp.ithome.com.tw/articles/10192922
- https://javascript.plainenglish.io/deploy-your-next-js-app-on-github-pages-using-the-github-action-525271137409

Github action Pakages:

- peaceiris/actions-gh-pages@v3: https://github.com/peaceiris/actions-gh-pages