iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 19
1
Modern Web

Next.js + 各種套件組合系列 第 19

Next.js & Gh-Pages

介紹

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


上一篇
Next.js & Dotenv
下一篇
Next.js & Socket.io
系列文
Next.js + 各種套件組合30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言