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.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的整合以及在开发过程中更好地使用缓存,以避免重新编译。

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,398评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 项目地址 从头开始建立一个React App - 项目基本配置 npm init 生成 package.json ...
    瘦人假噜噜阅读 89,487评论 33 78
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,041评论 2 35
  • 今天想说的是关于认知升级,认知,是我们决定自己高度的方面,也是体现我们成长的地方。 罗辑思维,推荐了三篇傅盛关于认...
    自天佑之吉无不利阅读 103评论 1 2