next.js 簡單使用

1. 介紹

一個react.js  服務器端渲染開源項目（不只是服務器端渲染，直接也可以生成純靜態站點）
類似的解決方案有好多，比如react.js 自身的服務器渲染方案（但是使用起來就是比較怪異）
gatsbyjs 也是一個不錯的解決方案

2. 初始化項目

// 依賴
npm install --save next react react-dom
// package.json 添加啟動腳本

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

3. 進行開發

// 創建目錄
mkdir  pages
// 簡單代碼
touch index.js
nano index.js
export default () => <div>Welcome to next.js!</div>
// 啟動
npm run dev
ok  就是這么簡單

4. 效果

 

5. 生成的頁面

 

說明：

本身進行了優化，而且和以前的react.js 項目是不一樣的，有自己的一套路由，以及錯誤處理，還有就是styled-jxs 還是比較方便的 ， 類似的方式有 styled-components https://www.styled-components.com/

的react.js 項目是不一樣的，有自己的一套路由，以及錯誤處理，還有就是styled-jxs 還是比較方便的 ， 類似的方式有 styled-components https://www.styled-components.com/

6. 生成純靜態站點

touch next.config.js

module.exports = {
  exportPathMap: function() {
    return {
      '/': { page: '/' },
      '/about': { page: '/about' },
      '/index': { page: '/index' }
    }
  }
}

// 修改 package.json

"scripts": {
    "dev": "next",
    "build": "next build && next export",
    "start": "next start"
  }
  
// 啟動並生成

npm run build 

// 效果  out 目錄

.
├── about
│   └── index.html
├── index
│   └── index.html
├── index.html
└── _next
    ├── 0b64b5d8-c35c-4475-81e3-a13779e823be
    │   └── page
    │       ├── about
    │       │   └── index.js
    │       ├── _error
    │       │   └── index.js
    │       └── index.js
    └── fa86b6114a1f9591804ca6129852ceb2
        └── app.js

備注：

  實際項目需要使用的話，直接放到nginx 后者 varnish traffice server 等類似的靜態緩存服務器即可
  類似 now 的發布模式就