Next.js

Next.js是什么

Next.js是一套基于React的服务器端渲染框架。在React模块化的基础上，带来以下几点好处：

1、默认服务端渲染模式

2、代码自动分隔使页面加载更快

3、以文件系统为基础的客户端路由

4、以webpack的热替换为基础的开发环境

5、使用React的JSX和ES6的module，模块化和维护更方便

6、可以运行在Express和其他Node.js的HTTP 服务器上

7、可以定制化专属的babel和webpack配置

总之一句话：保持强大的同时更好用！

Next.js的小零碎

安装

// 将react和next安装到本地依赖

$ npm install --save react react-dom next

工具

// 开发模式，开启开发服务器，默认3000端口。热加载

$ next

// 打包

$ next build

// 启动

$ next start

路由

1、基于文件系统的路由。从项目目录开始，pages目录是根目录，并默认取 pages/index.js 作为系统的首页进行展示；其他目录，比如static，对应“/static”路径。

2、每个路由都是一个ES6模块（一个函数或者React.Component的子类）

CSS

next.js支持css in js

import React from 'react'

import css from 'next/css'

export default () =>

Hi there!

const style = css({

                            color: 'red',

                            ':hover': { color: 'blue' },

                            '@media (max-width: 500px)': { color: 'rebeccapurple' }})

组件初始化

next.js提供了一个基于React组件的约定，就是getInitialProps，可以在getInitialProps做一些初始化操作，比如加载、组装数据。

getInitialProps必须返回一个js对象或者能够解析成js对象的Promise实例，这个js对象将会成为React组件的props属性。

示例代码：

import React from 'react'

import 'isomorphic-fetch'

export default class extends React.Component {

    static async getInitialProps () {

        const res = await fetch('https://api.company.com/user/123')

        const data = await res.json()

        return { username: data.profile.username }

    }

}