Next.js 9 官方版

Next.js 9是一个轻量级的 React 服务端渲染应用框架。主要功能包括代码自动分割、CSS、预加载页面、动态导入、自定义服务端路由等，仅支持支持React 16，需要的朋友快快下载吧！

使用方法

1、代码自动分割

每个页面只会导入import中绑定以及被用到的代码. 也就是说并不会加载不需要的代码!

import cowsay from 'cowsay-browser'

export default () =>

{cowsay.say({ text: 'hi there!' })}

2、导出静态页面Examples

Static export

next export可以输出一个 Next.js 应用作为静态资源应用而不依靠 Node.js 服务。 这个输出的应用几乎支持 Next.js 的所有功能，包括动态路由，预获取，预加载以及动态导入。

next export将把所有有可能渲染出的 HTML 都生成。这是基于映射对象的pathname关键字关联到页面对象。这个映射叫做exportPathMap。

页面对象有2个属性:

page - 字符串类型，页面生成目录

query - 对象类型，当预渲染时，query对象将会传入页面的生命周期getInitialProps中。默认为{}。

常见问题

这个产品可以用于生产环境吗?https://zeit.co 都是一直用 Next.js 写的。

它的开发体验和终端用户体验都很好，所以我们决定开源出来给大家共享。

体积多大?

客户端大小根据应用需求不一样大小也不一样。

一个最简单 Next 应该用 gzip 压缩后大约65kb

这个像 `create-react-app`?

是或不是.

是，因为它让你的 SSR 开发更简单。

不是，因为它规定了一定的目录结构，使我们能做以下更高级的事：

服务端渲染

自动代码分割

此外，Next.js 还提供两个内置特性：

路由与懒加载组件: (通过引入 next/link)

修改的组件: (通过引入 next/head)

如果你想写共用组件，可以嵌入 Next.js 应用和 React 应用中，推荐使用create-react-app。你可以更改import保持代码清晰。

怎么解决 CSS 嵌入 JS 问题?

Next.js 自带styled-jsx库支持 CSS 嵌入 JS。而且你可以选择其他你喜欢的嵌入方法到你的项目中，可参考文档嵌入样式。

哪些语法会被转换?怎么转换它们?

我们遵循 V8 引擎的，如今 V8 引擎广泛支持 ES6 语法以及async和await语法，所以我们支持转换它们。但是 V8 引擎不支持修饰器语法，所以我们也不支持转换这语法。

可以参照这些 以及 这些

为什么使用新路由?

Next.js 的特别之处如下所示:

路由不需要被提前知道

路由总是被懒加载

顶层组件可以定义生命周期getInitialProps来阻止路由加载(当服务端渲染或路由懒加载时)

因此,我们可以介绍一个非常简单的路由方法,它由下面两部分组成:

每个顶层组件都将会收到一个url对象，来检查 url 或修改历史记录

组件用于包装如()标签的元素容器，来执行客户端转换。

我们使用了些有趣的场景来测试路由的灵活性，例如，可查看nextgram。

我怎么定义自定义路由?

我们通过请求处理来添加任意 URL 与任意组件之前的映射关系。

在客户端，我们组件有个属性as，可以装饰改变获取到的 URL。

怎么获取数据?

这由你决定。getInitialProps是一个异步函数async(也就是函数将会返回个Promise)。你可以在任意位置获取数据。