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 }
}
}
