介紹

Github 有提供了一個可以放靜態網頁的地方，就是在 Github 中開一個 git branch gh-pages，把程式碼丟上去就可以使用了，github pages的網址結構是 http://帳號.github.io/分支名稱/檔案名稱 ，要再強調的是 gh-pages 只支援 靜態網頁(本節只說明 Next.js 對於 gh-pages的設定，gh-pages的上傳教學可以參考
https://pages.github.com/ )

本篇所要討論的 是因為 Next.js 是 SSR 所以要怎樣輸出靜態檔案到 gh-pages

在官方 example 中 package.json 中設定檔可以看到以下兩個script 重點

  "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"

在deploy的時候 除了一些目錄資料管理與 git 的自動化處理之外 ，要看到的是 next export這個關鍵點，Next.js 提供了一個靜態輸出的功能，可以不輸出server side 只把靜態頁面輸出

另外在 gh-pages 因為目錄結構的關係所以在使用 babel-plugin-transform-define 這個 plugin去做一些環境變數的設定，env-config.js 這個範例中 就要設定 gh-pages的 URL 所以就設定好BACKEND_URL

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

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

如果有要使用到 連結的時候就要這樣下Link

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

接著因為原本的 Next.js 都已經幫忙 route的部分 ，但是靜態的部分就要 overwrite exportPathMap 在 next.config.js 檔案底下設定如下

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

module.exports = {
  exportPathMap: function () {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' }
    }
  },
  assetPrefix: !debug ? '/Next-gh-page-example/' : ''
}

.babelrc plugin 就如以下範例檔連結中的格式

總結
Next.js 已經包好很多不錯的功能，但有時候如果只是要展示靜態功能給客戶或只需要他的某些功能，這時候需要靜態處理的時候就要透過 next export來處理 ，如果有需要同時發佈 gh-pages 就如上方步驟完成設定即可

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