iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
3

介紹

在設定一個 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的router的目錄是在pages底下使用 file-system架構目錄來替代 router 這部分的 code splitting已經內建了

2.CSS
Built-in CSS support
next之中有內建一套 style jsx 的css in js 的功能,如下面的風格

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

PS. next是很彈性的也可以使用其他如jss或是 styled-component....等等的css in js套件
CSS-in-JS
另外他除了內建的 style jsx之外也提供了 inline的 開發

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

3.Static file serving
靜態檔案的約定目錄,可以把一些靜態檔案都放在這裡例如圖檔,聲音檔案等等都可以在根目錄下的static

4.Populating
在next.js中因為是使用 react render 所有的程式碼都會render在一個dom節點下,如果今天要改變document的head 裡面的或是等等就可以使用 next提供的 head元件

import Head from 'next/head'

5.Fetching data and component 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 提供Link 工具可以使用 import Link from 'next/link'

6.1.with Link 在轉Routing的時候next 有綁定一些功能,例如Perfetch功能
Link prefetch 這樣就可以提前幫忙把會連結的下一頁也幫忙預處理好增加ux體驗

6.2.Imperatively
Link有點是使用tag A href的方式 如果要在程式中使用 Api link的功能
import Router from 'next/router' 可以直接使用Router 範例如下

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

6.3.Router Events
通常可以用在過場的時候,可以使用以下的一些event來管理 Loading的圖樣效果
onRouteChangeStart(url) - 開始轉換Router時觸發
onRouteChangeComplete(url) - 完成時
onRouteChangeError(err, url) - 有錯誤時
onBeforeHistoryChange(url) - 如果有異動 browser's history 時

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

8.Using a Higher Order Component
react 常用的 Hoc 在 next 元件中也是可以使用的

9.Prefetching Pages
同上述 Router功能 使用 import Link from 'next/link' 達到預先load 資料的功能

  1. Custom server and routing
    自訂server 與 routing next提供了常用的server綁定 express koa2 hapi connect....等routing部分也非常彈性可以完全自定義

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

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

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

   module.exports = {
    distDir: 'build'
   }

12.3 Customizing webpack config
因為next把基本會用 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"]
}
  1. 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' : ''
}

  1. Production deployment

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

  1. Static HTML export
    靜態頁面輸出 不要server part的功能的時候使用 可以參考以下網址
    https://github.com/zeit/next.js/tree/canary/examples/with-static-export

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

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


下一篇
next.js with server
系列文
next.js + 各種套件組合8

尚未有邦友留言

立即登入留言