nexp-level-001 01 Next.js 功能及介绍

介绍

在设定一个 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 的功能，如下面的风格

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


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

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

1

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 元件

1

import Head from 'next/head'

5.Fetching Data And ComponentT LifeCycle

Next.js提供了 Server Side Render 功能当网站使用了SSR 的部分的时候为了SPA与SSR同步所以提供了一个生命周期 getInitialProps 方便前后端一致

1
2
3
4


  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’ 范例如下

1
2
3
4


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 底下设置

1
2
3


   module.exports = {
    distDir: 'build'
   }

12.3 Customing Webpack Config

因为 Next.js 把基本会用倒的 Webpack 都包好了，如果要增加功能的话可以到 next.config.js 设定

1
2
3
4
5
6
7
8


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

12.4 CUSTOMIZING BABEL CONFIG

如果想要挂一些BABEL的新功能就可以在跟目录底下设定一个.babelrc的档案在挂入想要增加的PLUGIN 例如

1
2
3


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

CDN SUPPORT WITH ASSET PREFIX 支持CDN 设置方法如下可以替换 PREFIX 变成CDN模式

1
2
3
4
5


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 提供的功能

文章目录