Next.js 功能及介紹

2018 iT 邦幫忙鐵人賽

DAY 1

Modern Web

Next.js + 各種套件組合系列第 1 篇

2018鐵人賽

polo

團隊線上讀書會

2017-12-04 15:11:10

39118 瀏覽

介紹

在設定一個 React 專案時候，通常會使用 create-React-app 這個套件來快速產出開發樣板環境,而另外一個選擇 Next.js 則包好了許多功能,例如Server Side Render (SSR),Webpack,Router....不需要額外再多花時間在設定方面,但同時又有彈性可以擴充,非常的快速可以馬上開發專案,在使用next時候因為是基於React,如果沒有React基礎要記得補一下,在這30天中會以Next.js的各種組合來介紹

功能
Next.js功能一直快速增加中,目前以下列出來的是 Next4 版的功能
1.Automatic Code Splitting
CODE SPLITTING可以在切換 Router的時候把需要的程式碼做分割達到最輕量化而加快速度，因為 Next.js 的Router的目錄是在pages底下使用 File-System 架構目錄來替代 Router 這部分的 Code Splitting 已經內建了

2.Css
Built-In Css Support
Next.js之中有內建一套 style jsx 的Css In Js 的功能，如下面的風格

export default () =>
  <div>
    Hello world
    <p>scoped!</p>
    <style jsx>{`
      p {
        color: blue;
      }
     </style>
   </div>

除了內建的 Style Jsx之外也提供了 Inline的 開發寫作

export default () => <p style={{ color: 'red' }}>hi there</p>

PS. Next.js是很彈性的也可以使用其他如Jss或是 styled-component....等等的Css In Js套件
3.Static File Serving
靜態檔案的約定目錄，可以把一些靜態檔案都放在這裡例如圖檔，聲音檔案等等都可以在根目錄下的static(約定目錄),也可以透過Express去指定

4.Populating

在Next.js中因為是使用 React Render 所有的程式碼都會 Render在一個DOM節點下,如果今天要改變Document 的 Head 裡面的或是等等就可以使用 Next.js 提供的 Head 元件

import Head from 'next/head'

5.Fetching Data And ComponentT LifeCycle
Next.js提供了 Server Side Render 功能當網站使用了SSR 的部分的時候為了SPA與SSR同步所以提供了一個生命週期 getInitialProps 方便前後端一致

  static async getInitialProps({ req }) {
    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
    return { userAgent }
  }

6.Routing

Client-Side的部分 Next.js 提供 Link 工具可以使用 import Link from 'next/link'
在轉 Routing 時候 Next.js 綁定一些功能,例如 Prefetch 功能可以提前把指定的下一頁預處理好增加ux體驗
除了Link 像使用tag A href 的方式寫在 JSX 中外 ,如果要在程式中使用 API LINK 的功能可以使用
import Router from 'next/router' 範例如下

export default () =>
  <div>
    Click <span onClick={() => Router.push('/about')}>here</span> to read more
  </div>

6.3.ROUTER EVENT
通常可以用在過場的時候,使用以下的一些EVENT管理, 常見可以用在LOADING的圖樣效果
onRouteChangeStart(url) - 開始轉換ROTUER時觸發
onRouteChangeComplete(url) - 完成時
onRouteChangeError(err, url) - 有錯誤時
onBeforeHistoryChange(url) - 如果有異動 BROWSER時

7.ShallowW Routing
再換頁的時候不去執行 getInitialProps 如果希望在同一頁底下每次的參數改變時候不執行 getInitialProps 就可以打開Shallow

8.Useing a High Order Component
React 常用的 HOC 在 Next.js 元件中也是可以使用的

9.Prefetching Pages
同上述 Router功能，使用 import Link from 'next/link' LINK有提供PREFETCH功能可以預先 Preload 資料的功能

10.custom Server And Routing
Next.js 可以客製化綁定常見的Server Express Koa2 Hapi Connect....等 Routing 部分也非常彈性可以完全自定義

11.Dynamic Import
動態載入通常可以先顯示某些頁面，然後元件可以再慢慢加載，通常也會使用在 Loading 效果, SSR 部分可以自己決定需不需要使用,同時也支援多元件包成同一個動態載入元件

12.Custom
在預設 React DOM 結點 Render 之外，如果要填加一些設定就可以在目錄中的 pages 中增加一個 _document.js 的檔案
在這裡就可以在編輯更多自訂義的玩意兒

12.1 Custom Error HandLing
NEXT提供了 ERROR 元件可以使用
import Error from 'next/error'
12.2 Custom Congiuation
一般NEXT預設輸出目錄是在.next底下，如果要設定輸出為其他目錄可以在 next.config.js 底下設定

   module.exports = {
    distDir: 'build'
   }

12.3 Customing Webpack Config
因為 Next.js 把基本會用倒的 Webpack 都包好了，如果要增加功能的話可以到 next.config.js 設定

module.exports = {
  webpack: (config, { buildId, dev }) => {
    return config
  },
  webpackDevMiddleware: config => {
    return config
  }
}

12.4 CUSTOMIZING BABEL CONFIG
如果想要掛一些BABEL的新功能就可以在跟目錄底下設定一個.babelrc的檔案
在掛入想要增加的PLUGIN 例如

{
  "presets": ["next/babel", "stage-0"]
}

CDN SUPPORT WITH ASSET PREFIX
支援CDN 設置方法如下可以替換 PREFIX 變成CDN模式

const isProd = process.env.NODE_ENV === 'production'
module.exports = {
  // You may only need to add assetPrefix in the production.
  assetPrefix: isProd ? 'https://cdn.mydomain.com' : ''
}

14.PRODUCTION DEPLOYMENT

Next.js 可以使用 now 直接發布到 now 提供的主機上 https://zeit.co/now
now 主機有提供 http2 功能，透過 now 提供的 cli 介面在專案目錄下直接下 now 即可部署

15.STATIC HTML EXPORT
靜態頁面輸出不需要 Server Part 的功能的時候使用，可以參考以下網址
https://github.com/zeit/Next.js/tree/canary/examples/with-static-export

以上是 Next.js 提供的功能，接下來的30天將會介紹 Next.js 與各種套件的組合走向開心的開發之路 GoGo

Next.js 相關資源在github 可以找到 https://github.com/zeit/Next.js