Next 3.0前瞻：静态导出和动态导入
原文链接：Next 3.0 Preview: Static Exports and Dynamic Imports
作者：Arunoda Susiripala
译者：周余飞，数观科技前端搬运工，工作之余喜欢研究Canvas和WebGL，痴迷数据可视化，TypeScript重度使用者。博客地址：http://supperjet.github.io。
Next.js是一种基于服务端渲染React应用的通用JavaScript框架，已经在Github上开源。目前，最新版本是Beta版的Next.js 3.0。对于还不了解Next.js为何物的同学，可以前去官网体验一下Next.js的新玩法。本文主要介绍即将到来的Next.js 3.0版本中的两个新特性：next-export和动态组件（Dynamic Components）。
Next.js提供了一系列的新特性，它可以使我们编写的React应用在服务端完成渲染（server-rendering），其代码自动拆分功能（Automatic Code Splitting）可以使你的页面无需加载不相关的代码，并且可以在组件内编写CSS，你所要做的只是在相应的位置加上{…}，就像下面这样。
export default () => (
<div>
Hello world
<p>scoped!p>
<style jsx>{
`
p {
color: blue;
}
div {
background: red;
}
@media (max-width: 600px) {
div {
background: blue;
}
}
`}style>
<style global jsx>{
`
body {
background: black;
}
`}style>
div>更多关于Next.js的使用可以到这里查看。
简单入门
Next.js上手非常简单，就如官网中所介绍的那样。在文件的根目录下创建pages/my-route.js，在my-route.js中加入以下代码。
export default () => (
<p>Welcome to my React App!p>
)然后配置package.json。
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}执行
npm install next@beta react react-dom --save然后运行
npm run dev访问http://localhost:3000/my-route。Welcome to my React App!就这么轻松的跃然屏上。That’s it! 就是这么简单。想要了解更多，请阅读官方提供的这两篇文章《5-minute README》或《2.0 announcement blogpost》。
特性一：Next-Export
Next.js提供了next、next build和next start这三个简单的指令来完成项目的开发，编译和服务。而今天我们要介绍的是在beta版的3.0中引入的的一个新指令——next export。它可以无缝地构建你的Next.js应用程序作为一个独立的静态网站，这意味着您可以在没有服务端的情况下部署它！So Cool!
并且导出的应用程序几乎支持Next.js的所有功能，包括动态URL(dynamic URLs)，prefetching，预加载（preloading）和动态导入（Dynamic Imports）等。
我们来看一个例子。
（1）使用方法
首先，使用Next.js构建一个简单的应用程序。然后，创建一个自定义的Next.js配置文件next.config.js。
// next.config.js
exports.exportPathMap = () => ({
"/": { page: "/" },
"/about": { page: "/about" },
"/p/hello-nextjs": { page: "/post", query: { title: "hello-nextjs" } },
"/p/learn-nextjs": { page: "/post", query: { title: "learn-nextjs" } },
"/p/deploy-nextjs": { page: "/post", query: { title: "deploy-nextjs" } }
})这段代码是页面与路由之间的简单映射，可选参数query传递给方法getInitialProps。 然后，执行：
$ next build
$ next export当然，在执行上面的命令前，需要修改一下package.json配置文件。
{
"scripts": {
"build": "next build && next export"
}
}然后，立即运行。
$ npm run build这时你会发现文件目录中多了一个out文件夹，out内就是你应用程序的静态版本。当然，这些都是可以自己设定的（更多参数配置使用next export -h命令查看）。
最后，cd到out目录下，执行下面的命令，就可以立即免费的将你的应用部署到now上。
$ now（2）一些限制
使用next-export，我们构建了一个HTML版本的应用程序。在构建的过程中会自动执行getInitialProps方法并存储初始化过程中获取的数据。
getInitialProps接受一个context object（始终认为叫上下文对象不准确）作为参数，并包含以下属性：
- pathname - path section of URL
- query - query string section of URL parsed as an object
- asPath - the actual url path
- req - HTTP request object (server only)
- res - HTTP response object (server only)
- jsonPageRes - Fetch Response object (client only)
- err - Error object if any error is encountered during the rendering
这就意味着类似req和res这样的只能在服务端运行的参数不能使用了，而pathname、query、asPath则完全不受影响。
基本上，当我们预先构建HTML文件时，你无法在服务端做内容的动态渲染。 如果需要，你可以使用next start运行你的应用。
动态导入
Next.js 3.0中模块的动态导入特性基于TC39草案对动态导入的支持。这意味着，你可以像使用Promise一样，使用import（）来动态引入模块。模块的动态导入需要使用到高阶组件next/dynamic，其使用方法如下。
import dynamic from 'next/dynamic'
const DynamicComponent1 = dynamic(import('../components/hello1'))
const DynamicComponent2 = dynamic(import('../components/hello2'))
export default () => (
HOME PAGE is here!
)在这种情况下，DynamicComponent1或DynamicComponent2并不会包含在该页面主程序中，相反它们将在客户端进行懒加载。只有真正渲染DynamicComponent1或DynamicComponent2时，相关的代码程序才会包含进来，并与其它的程序并行加载。
正如 James Kyle 说的那样，动态加载的组件可以为你的应用提供更加细致的代码分割能力。比如，在一个具有不同消息类型的聊天线程中。如果您只是依靠静态导入声明进行代码拆分，那么最终会在客户端加载许多不必的消息类型！
服务端渲染
对于组件的动态导入，Next.js同样支持其在服务器端进行渲染。比如，在上面的例子中，我们可以在服务端加载DynamicComponent1，并对其进行同步渲染。Next.js这一独特的特性，使得动态导入功能变得异常强大。
具体来说，动态导入（dynamic imports）可以避免在客户端显示空白页面，或是程序加载过程中发生的闪烁现象，同样也能解决程序加载一直处于loading的状态。
Get it now
Next.js 3.0 完全向后兼容，你可以用它做一些实验性质的尝试或是在预生产中使用。正式版的API能会有些许变化，但不会是特别大的改变。所以，放心使用吧！
- 执行npm install next@beta。
- 查看最新的文档。
- 看看这个例子
- 加入ZEIT社区的 #next提出问题或联系我们！
诚邀多位国内外知名企业前端技术专家，共话当前主流、热门前端技术，分享企业优秀前端项目研发实践，CSDN携手w3ctech &&前端圈发起人周裕波全力打造的“前端开发创新实践”线上峰会即将召开。
如果您对该峰会感兴趣，请扫描以下二维码，加入“前端开发创新实践”线上峰会交流群。
