使用Next.js開發React(一)建立專案
Next.js是一款非常受歡迎的React框架，你也許沒有聽過他，但你一定使用過基於Next.js開發的網站，像是Netflix, Docker, GitHub 和 Uber 這些大公司都使用了 Next.js。 在開始之前先來簡單介紹 Next.js 的優點與缺點，了解我們為什麼要使用它。
為甚麼選擇Next.js
- 建立開發環境
Next.js 一個很棒的優點是容易上手，對於初學者來說要開始一個 React 專案，還要先學會編譯、打包等等工具，還要寫設定檔……可能還沒開始寫 code 半條命就去了。 這時候 create-react-app 是一個選擇，它也非常簡單容易上手，不過和 Next.js 相比少了許多功能。
要開始一個 Next.js 專案只需要下載好 react 和 next，設定好執行專案的腳本，然後一行指令就可以讓專案動起來，開始寫 code 了，對於初學者來說非常友善。
- 伺服器端渲染(Server Side Rendering)
不過，容易上手不是最重要的事。Next.js 最大的特色以及優點就是應用了伺服器端渲染(Server Side Rendering)的技術，一般的 React 專案應用的則是用戶端渲染 (Client-Side-Rendering)。 用戶端渲染 (Client-Side-Rendering)的機制是server 返回一個 html 檔給用戶，瀏覽器透過html檔上的 script 讀取 js 檔完成渲染，再把內容塞進 html 檔上預留的 Dom 節點。在 Single Page Application 的概念和前端框架出現前，上網的流程一般來說是用戶送出 request後，所有內容都在後端生成，然後返回一堆 html 到瀏覽器。隨著瀏覽器效能提升加上前端框架開始流行，流程才變成現在的用戶端渲染這樣。
這樣的流程在使用上優點很多，卻有一個致命的缺點，就是不利於SEO。因為當伺服器端收到request的第一時間大部分動態生成的內容還沒渲染出來，用戶端的瀏覽器從伺服器得到的會是空白的html，搜尋引擎的爬蟲在爬取資料時就會得到這樣的結果，造成網站在排序上非常吃虧，流量和曝光率是任何一個網站的命脈，再好的內容沒有人看到都是沒有意義的。
使用伺服器端渲染的優點就是伺服器會返回內容已經渲染完成的html給瀏覽器，之後再透過用戶端發ajax更新，等於結合了之前兩種不同方法的優點，不過伺服器端渲染也是有缺點的，自行實作伺服器端渲染是很麻煩的事，會讓專案變得更複雜、難度更高。不過有了Next.js之後這個問題就解決了。
開始動手吧
- 建立專案
首先建立一個新資料夾，初始化這個專案，並且下載react, react-dom, next.js。
mkdir learn-nextcd learn-nextnpm init -ynpm install react react-dom next
進入package.json，更改scripts的配置。
然後在根目錄下新增 pages 資料夾，在pages 路徑下新增 index.js。Next.js 的路由概念非常簡單，pages 路徑下的index.js 檔會自動生成一個路由，成為網站的進入點。在pages路徑下其他資料夾裡的index.js 檔都會生成一個相對應資料夾名稱的路由，例如：pages/About/index.js在本地的port 3000就會自動生成localhost:3000/About這個頁面。
如果想要在原本的路由下新增路由，就去pages路徑下新增資料夾，這個資料夾的名字就會成為新的路由的名字，然後在這個資料夾下新增一個index.js，內容就寫在這。
通常良好的next.js專案架構是在根目錄下的component資料夾寫好所有的code，再從pages下的index.js import寫好的component，這樣專案不但更整潔也更容易維護。
- 新增內容
在pages/ index.js 裡新增一個簡單的function component，然後執行指令 npm run dev，前往 http://localhost:3000 馬上就可以看到我們的專案動起來了！
npm run dev
接下來馬上來試試看 Next.js 強大的 routing 功能，在 pages 下新增一個 About 資料夾，在 About 資料夾下新增一個 index.js 檔，然後在 index.js 裡寫一個 function component 。
注意 url 的結構和我們的資料夾結構是一樣的，因為這個強大的 routing 功能，使用 Next.js 佈局真的是非常舒服、輕鬆。
- 完成專案架構
接下來我們要完成專案的架構，像上圖那樣。首先要新增的是public資料夾，這個資料夾主要是用來放我們在專案中會使用的外部資源，例如圖片、文件、資料等等。
然後是自定義的設定檔，雖然next.js預設的配置已經很強大了，不過開發中還是會有配置上的需求，所以我們需要新增next.config.js。以next-images的應用來舉例，這是一個在next.js專案中處理圖片資源的好幫手。
npm install --save next-imagesor
yarn add next-images下載完之後在next.config.js新增配置
const withImages = require('next-images')
module.exports = withImages()如此一來在專案中要引入圖片就很方便了。
需要注意的是module只會export一次，有多重配置的時候很容易寫成分開的module.exports，這樣前面的export會被覆蓋掉。正確的方法是將多重配置寫在同一個module.exports裡。
恭喜！我們已經完成了專案的建置，接下來就可以開心地開發了，好好體會next.js的強大。不過next.js也不是完美的，開發過程中還是有許多地雷，之後的文章除了基本的操作也會來分享一些自己踩過的坑和常見的問題，我們下一篇見！
