最近看到許多2018評論JavaScript的文章，出現一個特殊關鍵字Next.js，感覺這命名好潮又是什麼鬼東西。最近在其它地方看到簡短描述"react server-rendered"看完這我看是不太懂??第30天我們也來next一下，先從官網爬文它到底有什麼用。

• next簡化環境建置，它包進babel、webpack...等
• 頁面只要放置pages就能進行路由
• server rendered
• 寫react code不用學習其它語法

想想這29天，我們裝了一大堆plugin三不五時就要設定webpak，實際上還沒開發半行程式就花一堆時間設定環境。這讓我想到早期Java Web光把環境設好就三五天。它簡化很多東西可以讓我們快速開發，但這種東西有好有壞，壞的是跟周遭資源整合如何?會不會引用其它東西問題一堆，這有待研究但環境設定的確很省時。

Install package

npm install --save next react react-dom

script add"dev, build, start"

package.json

{
  "name": "react-next",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^4.2.3",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }
}

以下router程式引用官網，我們先前用react-router進行路由，但Next.js預設就有路由只要照目錄放置就可以。

pages/index.js

import Link from 'next/link'

export default () =>
  <div>
    Click{' '}
    <Link href="/about">
      <a>here</a>
    </Link>{' '}
    to read more
  </div>

pages/about.js

export default () => <p>Welcome to About!</p>

npm run dev (http://localhost:3000)

click here to about

2018/01/18 完賽

參考資料
next.js
https://github.com/zeit/next.js