Next.js 9.4-快速刷新、增量静态再生

2020-05-12 00:19:25

新的环境变量支持:内置对.env和NEXT_PUBLIC_PREFIX的支持,如CRA中所示。

改进的内置获取支持:对于Node.js和所有浏览器(构建和运行时),放弃节点获取和同构获取导入,转而使用内置获取多边形填充。

集成的Web Vitals报告:捕获推动灯塔得分的指标,但要从您的实际流量中获取。

快速刷新是一种全新的热重新加载体验,可为您提供对Reaction组件所做编辑的即时反馈。现在,对于Next.js 9.4或更高版本上的所有项目,它现在都是默认启用的。

热重新加载已经存在很长一段时间了,但从历史上看,它太脆弱了,无法在您的工作流中默认启用。正因为如此,Next.js以前实现了一种粗略的热重新加载形式,它将重置应用程序的整个状态。

旧的热重新加载实现对编译或运行时错误没有弹性,如果您在编辑CSS或JavaScript时输入错误,则会执行应用程序的完全重新加载。这不是最优的,打乱了你的思路。

FAST Refresh深度集成到Reaction本身(通过Reaction Refresh),允许Next.js对Reaction组件树执行可预测的精确更新。

这意味着Next.js将只更新您编辑的文件中的代码,并且只重新呈现该组件,而不会丢失组件状态。这包括样式(内联、CSS-in-JS或CSS/Sass模块)、标记、事件处理程序和效果(通过useEffect)。

作为这次体验的一部分,我们完全重新设计了错误覆盖,以使其更有帮助,并使您的应用程序对打字错误或运行时错误具有弹性。这包括但不限于:

准确的错误位置,在编译前解析到代码的原始行和列。

js在9.3中引入了静态站点生成方法,目标很明确:我们应该获得静态(始终快速、始终在线、全球分布)的好处,但要出色地支持动态数据,这正是Next.js所熟知的。

为了两全其美,Next.js支持增量静态生成,即在构建站点后更新静态内容。例如,在9.3中,我们在getStaticPath中引入了Fallback:true选项,它允许您在运行时添加新页面。

我们最近整理了一个示例,展示了Next.js如何以这种方式静态预呈现无限数量的页面:

今天,我们还引入了增量静态再生(Beta),这是一种更新现有页面的机制,当流量传入时,通过在后台重新呈现它们。受过时而重新验证的启发,这确保了流量始终以静态方式不间断地提供服务,并且只有在新构建的页面完成生成之后才会将其推送。

导出异步函数getStaticProps(){return{props:await getDataFromCMS(),//我们将尝试重新生成页面://-当请求传入时//-最多每秒一次STRISTH_REVALIDATE:1}}。

页面永远不会脱机。如果后台页重新生成失败,则旧页保持不变。

Next Start和Vercel edge平台都已经完全支持增量功能(添加页面和延迟更新页面)和预览模式。

接下来,我们将开发补充RFC,以解决两个额外的增量静态生成功能:

一次重新生成多个页面并使其无效(如您的博客索引和某个博客帖子)。

在我们宣布下一代静态站点生成之后,我们想要分享从Headless CMS API获取内容并将其呈现为Next.js HTML的真实场景。

我们与世界上一些最好的CMS系统的创建者合作:Conentful、DatoCMS、棱镜、SANISH和TakeShape,还有更多的系统正在开发中。

这些示例不仅可以随时使用并获得100%开源和麻省理工学院的许可,而且它们还结合了可用的最佳实践:

我们还与TinaCMS在CMS的一个令人兴奋的新方向上进行了合作:内容的页面内编辑。请查看他们的指南,了解如何为您的项目实施它。

我们从使用Next.js的公司得到的一个常见反馈是,不清楚环境变量何时内联到浏览器包中,以及何时仅在Node.js环境中可用。

第一种方法是向浏览器公开环境变量,您可以在环境变量前面加上NEXT_PUBLIC_。当使用该环境变量时,它将内联到浏览器JavaScript包中。

您不再需要添加next.config.js和env键来公开这些变量。

//Pages/index.js//环境变量将向浏览器公开。记录(';我的应用程序版本';,进程。环境。NEXT_PUBLIC_VERSION)导出默认函数(){返回Hello World}。

第二个更改是Next.js现在默认支持.env加载。允许您轻松定义开发和生产环境变量。

在Next.js 9.1.7中,我们宣布在浏览器中对FETCH()API进行多层填充。现在,这种多层填充也扩展到了Node.js环境。

实际上,您不再需要使用任何类型的服务器端FETCH PolyFill(例如,同构-取消获取或节点-获取),因为Next.js将在所有环境中自动提供FETCH()。

导出异步函数getStaticProps(){//不再需要从同构导入FETCH-UNFETCH常量res=AWAIT FETCH(';https://./posts';)常量POST=AWAIT RES。json()return{props:{post}函数({post}){//呈现帖子.。}导出默认值。

上周,谷歌Chrome团队推出了Core Web Vitals。核心网络活力是在网络上传递伟大用户体验的关键质量信号,著名的灯塔报告就是建立在这个基础上的。

如果您希望您的网站或Web应用程序尽可能快,那么跟踪这些指标是非常有用的,这也是Next.js的核心目标之一。

Chrome团队发布了一个Core Web Vitals Chrome扩展,它允许您作为开发人员获得页面执行情况的可视反馈。

在构建生产Web应用程序时,您还希望了解您的站点对访问者和(潜在)客户的表现如何。您甚至可能希望跟踪这些度量随时间的改进或倒退,以查看您的更改是否对您的受众产生了预期的影响。

为了帮助向您的分析服务报告Core Web Vitals,我们与Google合作引入了一种名为reportWebVitals的新方法,可以从Pages/_app.js中导出:

//将为每个必须报告的指标调用一次。导出函数报告WebVitals(指标){//这些指标可以发送到任何分析服务。log(公制)}函数({,pageProps}){return}导出默认值。

要将此方法与您的分析服务结合使用,请参阅文档的将结果发送到分析部分。如果您想了解更多关于核心Web Vitals的信息,可以参考web.dev/vitals。

如果您正在处理一个大型项目,您的一些导入语句可能会受到../意大利面的影响:

在这种情况下,我们应该使用绝对进口,而不是相对进口。假设Components目录位于根目录,我们希望import语句如下所示:

我们很高兴地宣布,Next.js9.4使得设置JavaScript和TypeScript项目的绝对导入变得超级简单。您只需将baseUrl配置添加到jsconfig.json(JS项目)或tsconfig.json(TS项目)。

这将允许从的绝对导入。(根目录)。它还与VSCode和其他编辑器集成,支持代码导航和其他编辑器功能。

注意:如果您之前修改了webpack模块别名配置以启用绝对导入,则现在可以删除该配置。

此外,Next.js9.4还支持路径选项,该选项允许您创建自定义模块别名。例如,以下代码允许您使用@/design-system而不是Components/design-system:

如果指定路径,则必须指定baseUrl。您可以在TypeScript文档中了解有关路径选项的更多信息。

当在Next.js9.3中启动内置的Sass支持时,我们得到的反馈是一部分用户想要配置Sass编译器。例如,要配置include dePath,请执行以下操作。

我们重新设计了命令行输出,使其更加一致,输出的重复数据(如部署URL)更少,需要等待开发服务器启动等等。我们还更改了消息类型的间距,使其在消息之间保持一致,这意味着它们不再从一行跳到另一行。

加入有关GitHub讨论的Next.js社区。讨论是一个社区空间,允许您与其他Next.js用户联系并提出问题。

如果您使用的是Next.js,请随意与社区共享您的项目URL。

我们感谢我们的社区和所有外部反馈和贡献,这些反馈和贡献帮助塑造了这个版本。