我们非常兴奋地宣布Next.js 3.0的稳定版本。自从我们测试版发布以来,我们一直在使用它来为zeit.co提供支持,并收到了很多来自我们社区的反馈和贡献。
让我们来看看已经改进了什么,完全是新的,或者从npm获取最新版本!
新的Next.js?Next.js是React应用程序的零配置单命令工具链,具有内置的服务器渲染,代码分割等功能。看看学习Next.js开始吧!
静态导出支持
这是GitHub社区最需要的功能。我们已经交付了!
只需将项目导出到一个带有.html和.css文件的目录,就是配置您的项目并运行:
$ next export
多产的Next.js社区已经为您提供了一些静态的博客生成器来下载:
动态导入支持
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 () => (
<div>
<Header />
<DynamicComponent />
<p>HOME PAGE is here!</p>
</div>
)
加载一个组件,动态。
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 }) => (
<div>
<h1>{props.title}</h1>
<Hello1 />
<Hello2 />
</div>
)
})
export default () => (
<HelloBundle title="Dynamic Bundle" />
)
根据动态属性加载不同的组件!
直到今天,代码拆分都是基于路由,或者是用户加载的应用程序部分。展望未来,您将能够根据用户所呈现的数据加载代码。
我们很高兴人们用这个新的范例创建的应用程序。
更美丽的错误
感谢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的整合以及在开发过程中更好地使用缓存,以避免重新编译。