Next.js 3.0

我们非常兴奋地宣布Next.js 3.0的稳定版本。自从我们测试版发布以来，我们一直在使用它来为zeit.co提供支持，并收到了很多来自我们社区的反馈和贡献。

让我们来看看已经改进了什么，完全是新的，或者从npm获取最新版本！

新的Next.js？Next.js是React应用程序的零配置单命令工具链，具有内置的服务器渲染，代码分割等功能。看看学习Next.js开始吧！

静态导出支持

这是GitHub社区最需要的功能。我们已经交付了！

只需将项目导出到一个带有.html和.css文件的目录，就是配置您的项目并运行：

$ next export

多产的Next.js社区已经为您提供了一些静态的博客生成器来下载：

• next-blog
• next-static
• nextein

动态导入支持

Next.js现在完全支持TC39动态导入。

通过动态导入，我们的代码库被分割成一组可以动态加载的块。开发人员可以完全控制随时间加载代码，具体取决于用户交互或数据本身。

这很容易使用。只要导入你的模块作为promise ，如下所示：

const moment = import('moment')
setTimeout(function() {
  moment.then(moment => {
  // Do something with moment
  })
}, 15000)

当我们开始使用它时，模块将被下载。在上面的例子中，moment当setTimeout 回调运行时（页面加载后约15秒），模块将被下载。这加速了我们的主要JavaScript包，只有在我们需要的时候才加载代码。

动态React组件

此外，Next.js还附带了一个强大的选择实用工具，可以帮助您轻松创建动态加载的React组件。 next/dynamic

动态组件可以按需加载React代码，但最有趣的特性是，如果它们包含在初始渲染中，则服务器渲染仍然有效！

我们来看一些例子！

import dynamic from 'next/dynamic'
const DynamicComponent = dynamic(import('../components/hello'))

export default () => (
  

    

    
    
HOME PAGE is here!
  
)

加载一个组件，动态。

import dynamic from 'next/dynamic'

const HelloBundle = dynamic({
  modules: (props) => {
    const components = {
      Hello1: import('../components/hello1'),
      Hello2: import('../components/hello2')
    }
    // you can add / remove components based on props
    return components
  },
  render: (props, { Hello1, Hello2 }) => (
    

      
{props.title}
      
      
    
  )
})

export default () => (
  
)

根据动态属性加载不同的组件！

直到今天，代码拆分都是基于路由，或者是用户加载的应用程序部分。展望未来，您将能够根据用户所呈现的数据加载代码。

我们很高兴人们用这个新的范例创建的应用程序。

更美丽的错误

感谢Krisztian Puska，我们已经更新了我们的错误颜色主题，使其在眼睛上更容易，更易于访问。

显示一个语法错误正在被新的颜色重新加载

改进的热模块更换

我们已经提出了各种各样的情况，这会使得HMR（热模块替换）在之前无效，特别是在错误恢复周围。

向前发展，当出现任何类型的错误时，您将能够更改您的代码，保存并查看错误更改，替换为其他错误或完全消失！

HMR：Node.JS 8.0支持

我们已经解决了在新的Node.js 8.x发行版中使用Next.js时显示的开发工具中的错误。 ERR_INCOMPLETE_CHUNK_ENCODING

你不会再看到这一个！

HMR：导航到错误

如果您导航到出现任何错误的页面，则会立即进行适当的处​​理，呈现错误消息并使您能够实时进行更正。

们导航到有错误的索引页面，修复它们并观察页面恢复。

HMR：404错误成功

我们已经解决了导航到缺失页面（正确呈现为404）的错误，但填充它时出错。

在我们创建页面之后，我们会引入一个错误，然后及时修复它。

HMR：更好的坏的回报

如果您碰巧返回了错误的类型，我们现在可以顺利处理这种情况。

正确的类型返回后，页面成功恢复。

HMR：未定义可以是一个功能

现在正确地捕捉到评估模块时的任何类型的运行时错误。实时调试即将到来。 undefined is not a function

我们首先发生语法错误，恢复到运行时错误，恢复到页面。

更快：无服务器就绪

启动时间为基线Next.js应用程序现在快了5倍，从1000毫秒降低到200 毫秒。请继续关注与Now无关的无服务器Next.js的一些令人兴奋的公告！

更小：优化的核心包

我们已经进一步优化了核心Next.js包，现在已经有10％的精简了！只有最重要的生产代码才包含在您的最终捆绑包中。

4.0和超越

正如我们在其他主要版本之后所做的那样，我们将很快公开分享我们的Next.js 4.0路线图。

重点将放在更精简的核心上，更快的启动时间和渲染速度，与React 16的整合以及在开发过程中更好地使用缓存，以避免重新编译。

本文翻译自：https://zeit.co/blog/next3