最近在學習React的服務端的東西， 感覺有些難度， 最近看的多了， 有點感覺了，比如React16.x中的服務端渲染（SSR）寫的不錯，很很簡單，後來發現Next框架 很簡單， 所以抄錄下來了。

伺服器端渲染
服務端渲染是指頁面的渲染和生成是在服務端完成的，並將渲染好的頁面返回客戶端。

Next.js是什麼
Next.js是一個使用React構建服務呈現Web的應用程式。它使用React語法，可以很好的實現程式碼的模組化，有利於程式碼的開發和維護。

Next.js的特性
1、預設服務端渲染模式 
2、程式碼自動分隔使頁面載入更快 
3、以頁面為基礎的簡潔的客戶端路由 
4、支援webapck熱替換 
5、可以執行在Express和其他Node.js的HTTP 伺服器上 
6、可以定製化專屬的babel和webpack配置 
7、基於React語法，可以實現程式碼模組化，有利於維護和開發

開始構建專案
1、在命令列依次輸入如下命令：

D:\>mkdir next-demo
D:\>cd next-demo && npm init -y
D:\>npm install react react-dom next --save//本地依賴
D:\>mkdir pages

2、修改next-demo資料夾下的package.json中的“script”

{
  "scripts": {
    "dev": "next"
  }
}

3、開啟專案服務

D:\>npm run dev

服務啟動完成以後，在瀏覽器中訪問http://localhost:3000 

404頁面是Next.js預設生成的頁面，之所以訪問的頁面是404是因為我們沒有設定專案主頁。

建立主頁
Next.js是從服務端渲染生成頁面，再返回給客戶端展示。Next.js預設從 pages 目錄下獲取頁面進行渲染並返回給客戶端展示，且預設取 pages/index.js 作為專案的首頁進行展示。 
注意，pages 是預設存放頁面的目錄，路由的根路徑也是pages目錄。

import React from 'react';
export default class Index extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return (<div>
         <p>Index Page!</p>
        </div>)
    }
}
 

//或者

const Index = ()=>(<div>
         <p>Index Page!</p>
        </div>)
export default Index

由於Next.js預設使用Webpack構建專案，使用它的熱部署功能。建立完 pages/index.js 後，再訪問 http://localhost:3000 即可看到我們設定的專案主頁。

至此，基於React伺服器渲染Next.js框架構建一個簡單專案完成。

關於Next.js的更高階的用法，可以參考官方的例子：Next.js。

如果有寫的不對的，或者理解不到位地方，歡迎各位指正。