Next.js腳手架進階系列
前言
好久沒寫文章了，最近也沒有學什麼，有點荒廢。嘗試著學習一些新東西，GraphQL、Gatsby、Netlify等（可能對很多人來說不是新東西了）。其中學到Netlify的時候發現，很適合部署靜態網站，所以就嘗試著部署了一下，發現還真是簡單，只需要填寫幾個命令就可以完成靜態站點的部署了，免費託管，簡直是比gh pages還要方便。所以嘗試了幾個靜態網站之後，比如周公子的花園，就是一鍵式部署。
然後我就想，把一些專案都試著部署一下，首先就想把這個Next-Antd-Scaffold腳手架部署上去，之前講過部署了，但是那個部署是有條件的：
- gh pages部署需要生成靜態檔案，也就是
next export - pm2部署需要開發者擁有一個伺服器
那麼對於學生黨或者初學者來說，實際上並沒有感受到自己建站的完整體驗，這裡就想著通過這種部署方式，把腳手架部署上去。
ok,上面說了，想用的是Nelify進行部署，那麼我想多了，或者說我功課沒做到位，Netlify部署雖然很簡單，但是並沒有成功，過程如下：
-
第一步，選擇倉庫
-
第二步，部署配置
-
第三步，部署中
-
第四步，部署完成（失敗）
那個長得不是很好看的地址是netlify為我們分配的，你還可以通過 site settings進行custom化，確實很方便。
Now 部署
上面失敗，也情有可原，誰讓自己懶了呢，為啥這麼說呢？Next.js原本就是zeit倉庫的一個專案，而對應配套的，zeit倉庫還有一個now專案，專門進行部署的，真是非常非常NB啊，不得不佩服大牛們～
原本我以為會很簡單的就可以部署成功呢，為啥呢，因為準備工作做好之後只有一條命令，那就是now，然後就等待就行了，結果真是慘不忍睹，各種問題各種踩坑，所以分享給大家踩坑經歷吧～
可以看到，部署失敗了六次，第七次才部署成功～艱難險阻啊
事先宣告，now-cli很強大，我只用來部署Next.js專案了，其實它可以支援很多很多種部署，具體如下圖
準備工作
首先就是安裝now工具了，官方提供下載地址，各種版本的。我習慣直接npm了，大家按需安裝。
// 安裝now
npm install -g now
複製程式碼部署踩坑
安裝完之後迫不及待的進行嘗試，我其實就是按照文件一步一步來做的，文件地址zeit-now docs以及now-next docs。
具體的大家自己去讀吧，我只是負責幫你們踩坑，一步一步來。
第一次嘗試 - add now.json
新建now.json配置檔案，鍵入如下程式碼：
{
"version": 2,
"builds": [{ "src": "next.config.js", "use": "@now/next" }]
}
複製程式碼然後執行部署命令:
now
複製程式碼沒錯，我什麼都沒做，就直接執行命令了。顯而易見，我失敗了，哈哈。now的好處就是失敗了會有詳細的部署日誌，失敗原因。
no serverless pages，這是個什麼東西我不太清楚，因為next.js正常部署是不會有這個東西的，那麼就去查文件，發現如下：
第二次嘗試 - serverless
我們對程式碼進行了如下修改：
// next.config.js
...
module.exports = {
...
+ target: 'serverless'
...
}
...
複製程式碼再次進行部署：
now
複製程式碼不出意外，又失敗了：
Next.js的部署文件也提供了now的注意事項，所以我們如果看的特別仔細，也會避免這種問題。 那麼，我們就修改吧，把程式碼裡所有的提前配置都修改掉。修改方式有很多種，官方也給了方案，比如：
還有就是可以通過babel-plugin-transform-define或者Webpack DefinePlugin。
第三次嘗試 - 修改config
ok ,沒問題了，部署成功就可以直接訪問了部署後線上地址。預覽一下，也基本沒什麼問題，覺得還是挺簡單的，可能我太笨了，哈哈。
這次單純是我想寫，從開始到結束也就兩個小時各種截圖，沒什麼技術，純當是沒有伺服器的同學免費嘗試免費玩一玩了。
最後部署的分支是腳手架的now分支。部署過程是拿master分支嘗試的，大家注意了哦。
Next-antd-scaffold腳手架可以正式用了，沒有人提issue和貢獻一下嗎～哈哈