iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 30
0
Modern Web

30天React從入門到入坑系列 第 30

DAY30:2018 key word next(Next.js)

  • 分享至 

  • xImage
  •  

最近看到許多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)
https://ithelp.ithome.com.tw/upload/images/20180118/20107317H1Asg1hfjf.png
click here to about
https://ithelp.ithome.com.tw/upload/images/20180118/20107317h5yePrWORs.png

2018/01/18 完賽
https://ithelp.ithome.com.tw/upload/images/20180118/20107317bh6b7PsfF9.png

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


上一篇
DAY29:mobx-react什麼怪東西…?
系列文
30天React從入門到入坑30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言