環境安裝
node環境基礎安裝 npm init 設定完 package之後
安裝 yarn add react react-dom next 套件
(Next.js 包含 Client 與 Server 環境 ,所以SSR(server side render)部分就不需要再安裝其他的)
在package.json中設定好 script

"dev":"next"
"build":"next build"
"start":"next start"

創建一個pages 目錄 這裡是file-system架構 也就是檔案結構就是route 例如
pages/file/aboutme 在url中就可以用 http://url/file/aboutme 對應到該網址

至於build與start則是發布正式產品時候使用 dev 會有 HMR Hot Module Reload 方便開發使用,只要程式碼有更動就會自動更新,基本啟動 yarn dev 就包含 server與 client ,一般server part會有更多的需求就可以使用套件去接出來以下範例使用 express 去管理 server part

可直接參考官方範例檔案,也有其他server ,範例也有許多lib可以使用

https://github.com/zeit/next.js/blob/canary/examples/custom-server-express/server.js

一般這樣開發就可以了,但是由於node再更改後端的時後 每次都要停止 server 再啟動程式碼才會更新,如果前端模組很多的時候每次要停止再啟動 ,為了避免浪費許多時間在等待,所以通常就把後端api server 另外在建立一個目錄

.root
/client/ <--包含 next + express 做SSR使用
/server/ <--express + apollographql

總結
主要是把前端與後端環境架設好,如果簡單的應用程式就不需要分離,但是大一點的專案會建議把client與api Server分開來