Next.js9.5-重定向和重写,webpack 5测试版

2020-07-28 03:49:54

支持重写、重定向和标题:重写虚URL、重定向旧URL以及向静态页面添加标题。

URL中的可选尾部斜杠:一致强制不带或存在尾部斜杠。

生产反应分析:衡量项目渲染“成本”的新旗帜。

Webpack 5支持(测试版):可以选择加入webpack 5的下一个版本,以提高构建大小和速度。

Next.js在9.3中引入了静态站点生成方法,目标很明确:我们应该享受静态站点的好处(Alwaysfast,AlwaysOnline,and Global Replicated),但要对动态数据提供出色的支持,这是Next.js出名的。

为了两全其美,Next.js引入了增量StaticGeneration,在构建站点后更新静态内容。通过使用tgetStaticPath中的“Fallback:True”选项,您可以在运行时注册新的静态页面。

无论您的数据集有多大,Next.js都可以按需以这种方式静态预呈现无限数量的页面。

今天,我们宣布全面推出Incremental StaticRe-Generation,这是一种更新现有页面的机制,在流量传入时在后台重新呈现它们。

受重新验证时过期的启发,后台重新生成确保流量始终从静态存储不间断地提供服务,并且只有在取消生成新构建的页面后才会将其推送。

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

重新验证标志是最多发生一次生成以防止https://en.wikipedia.org/wiki/Cache_stampede.的秒数。

增量功能(添加页面和延迟更新)和预览模式现在都是稳定的,并且已经被Next Start和Vercel edge平台开箱即用完全支持。

为了展示这一新特性,我们创建了一个示例,其中显示了重新生成非静态页面,该页面显示了特定问题的各种GitHub反应的计数:https://reactions-demo.now.sh/。

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

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

Next.js项目并不总是从域的根提供服务。有时,您可能希望将Next.js项目托管在/docs这样的子路径下,以便Next.js项目只复盖域的该子部分。

虽然到目前为止这是可能的,但这是以相当多的额外配置为代价的。例如,为每个<;Link>;添加前缀,并确保Next.js从正确的路径提供JavaScript包。

为了解决这一痛点,我们引入了一个新的配置选项。Basepath允许您轻松地在域的子路径上托管Next.js项目。

配置基本路径后,您的项目将自动从提供的路径路由。在本例中为/docs。

当使用NEXT/LINK或NEXT/ROUTER链接到项目中的其他页面时,基本路径将自动添加前缀。这允许您在不更改项目的情况下更改基本路径。

从';下一步导入/link';导出默认函数(){Return(文档页面)}。

以这种方式使用NEXT/LINK将导致以下HTML呈现到Web浏览器:

在构建Next.js项目时,您可能希望将某些路由代理到另一个URL。例如,如果您希望在堆栈中逐步采用Next.js,您可能希望路由Next.js项目中存在的页面,然后路由与您重新迁移出的旧项目不匹配的所有页面。

在Next.js9.5中,我们将引入一个名为重写的新配置选项,它允许您将传入请求路径映射到不同的目的地路径,包括外部URL。

//next.config.js模块。Exports={异步重写(){Return[{Source:';/Backend/:路径*';,目标:';https://example.com/:path*';}]}}。

您还可以检查您的Next.js项目路由是否匹配,如果不匹配,则重写到前一个项目。这对于逐步采用Next.js非常有用:

模块。Exports={异步重写(){Return[//在我们尝试代理之前检查Next.js项目路由是否匹配{源:';/:路径*';,目标:';/:路径*';},{源:';/:路径*';,目标:`https://example.com/:path*`}。

在本例中,我们首先匹配所有路径。如果没有匹配,我们将代理到example.com,这将是前一个项目。

大多数网站至少需要一些重定向。特别是在改变项目路线的结构时。例如,当将/blog移动到/news或类似的转换时。

以前在您的Next.js项目中有一个重定向列表需要设置一个自定义服务器或一个CUSTERROR页面来检查是否为路由设置了重定向。然而,这是以使关键的静态和无服务器优化(通过拥有服务器)无效为代价的,或者不够符合人体工程学。

从Next.js 9.5开始,您现在可以在redirects键下的next.config.js中创建重定向列表:

//next.config.js模块。Exports={异步重定向(){return[{source:';/about';,Destination:';/';,Permanent:True}]}}

Js允许您构建同时使用静态生成和服务器端呈现的混合项目。使用服务器端呈现,您可以设置传入请求的标头。对于静态页面,直到现在才能设置页眉。

//next.config.js模块。Exports={异步标头(){return[{source:';/:path*';,标头:[{key:';Feature-Policy';,//禁用麦克风和地理位置值:";麦克风';无';;地理位置';无';";}]}}。

当3年前引入Next.js时,它的默认行为是所有尾随斜杠的URL总是返回404页。

虽然很有效,但一些用户要求能够改变这一行为。例如,当将现有项目迁移到Next.js时,以前总是强制使用尾部斜杠。

自动将尾部斜杠URL重定向到不带尾部斜杠的URL,例如:/about/to/about。

当trailingSlash设置为true时,不带尾随斜杠的URL将被定向到带有尾随斜杠的URL,例如:/about to/about/。

//next.config.js模块。EXPORTS={//强制使用尾部斜杠,默认值为无尾部斜杠(FALSE)trailingSlash:true}。

在编写Next.js页面时,所有脚本包、CSS样式表和HTML的创建都是完全自动的,并且是从您那里抽象出来的。如果您检查Next.js 9.5之前生成的<;script>;标记,您会注意到它们的URL遵循如下形式:

上面的路径段ovgxWYrvKyjnlM15qtz7h就是我们所说的内部版本ID。虽然这些文件很容易在边缘和用户的机器上缓存,但是在重新构建您的应用程序后,内部版本ID会更改,所有的缓存都会被破坏。

对于大多数项目来说,这种权衡是可以接受的,然而,我们希望通过不再使浏览器缓存中未更改的页面无效来进一步优化此行为。

在与Google Chrome团队合作开发的Next.js9.2中引入了改进的代码拆分策略,为Next.js页面包生成的这些改进奠定了基础。

从Next.js 9.5开始,所有页面JavaScript捆绑包都将使用内容散列而不是构建ID。这允许在部署之间没有更改的页面保留在浏览器和边缘缓存中,而不需要再次下载。

与全局内部版本ID不同,qzfS4o5gIEXRME6sTEahL部分是大约.js包的确定性散列,如果站点该部分的代码不变,则该部分将是稳定的。此外,它现在可以通过缓存控制重新部署进行长期缓存:公共,最大年龄=31536000,Next.js自动为您设置的不可变的缓存。

我们在Next.js 9.4中引入了快速刷新功能,这是一种全新的热重新加载体验,可以即时反馈对Reaction组件所做的编辑。

Next.js 9.5进一步完善了我们的快速刷新实施,并为您提供了成功所需的工具:

易于理解的错误:所有编译和运行时错误都更新为只显示相关信息,包括导致错误的代码的代码框架。

保持组件状态的开发时提示:Next.js现在为您提供了有用的提示,以确保Fast Refresh将在尽可能多的场景中保持您的组件状态。Next.js提供的每个技巧都是完全可行的,并附有一个前后示例!

重置组件状态时的警告:当Next.js在编辑文件后无法保持组件状态时,我们现在将打印详细的警告。此警告将帮助您诊断为什么项目必须重置组件状态,从而允许您修复它并充分利用快速刷新。

新文档:我们添加了大量文档,解释了什么是Fast Refresh,它是如何工作的,以及预期会发生什么!该文档还将通过解释快速刷新的错误恢复工作原理来指导您如何更好地利用快速刷新。

用户代码故障排除指南:新文档还包括常见故障排除步骤和Tipson如何在开发过程中最大限度地利用快速刷新。

React在不久前引入了Profiler API,它允许您跟踪ReactComponents中的性能问题。虽然此功能在开发过程中会自动工作,但它需要使用独立版本的ReactDOM在生产中进行性能分析。

使用Next.js9.5,您现在可以在下一次构建中使用--profile标志为Reaction启用生产分析:

在此之后,您可以按照与开发中相同的方式使用分析器。

要了解更多关于分析Reaction的信息,您可以阅读Reaction团队在Reaction Profiler上的帖子。特别感谢@TodorTotev和@darshkpatel对此功能的贡献。

Next.js9.2增加了对包罗万象的动态路由的支持,这些路由已经被社区在各种用例中广泛采用。Catch-all路由使您可以灵活地创建由Headless CMS、GraphQL API、文件系统等支持的高度动态的路由结构。

在听取反馈时,我们听说用户希望有更大的灵活性来匹配路由的最高根级别。今天,我们很高兴为这些高级场景推出可选的、包罗万象的动态路线。

例如,Pages/blog/[[...slug]].js将匹配/blog,以及它下面的任何路由,例如:/blog/a、/blog/a/b/c等等。

与捕获所有路由一样,slug将作为路径部分数组在路由器查询对象中提供。因此,对于路径/blog/foo/bar,查询对象将是{slug:[';foo';,';bar';]}。对于路径/博客,查询对象将省略slug键:{}。

Webpack 5测试版已经在nextjs.org和vercel.com投入生产。我们鼓励您以循序渐进的方式进行试用,并在GitHub上报告您的发现。

为了支持webpack 5,我们重写了很多编译流水线,以更好地适应Next.js:

Js不再依赖webpack热中间件和webpack开发中间件,而是直接、专门针对next.js项目使用webpack。这意味着更简单的架构和更快的开发编译。

按需条目,这是next.js必须允许它在开发过程中的给定时间在YouVisit页面上编译的系统,也已经被重写,并且通过利用专门为我们的用例量身定做的新的webpack行为,变得更加可靠。

Webpack 4将继续得到全力支持。我们正在与WebPack团队密切合作,以确保从webpack 4到5的迁移尽可能顺利。

如果您的Next.js项目没有自定义的webpack配置,则不需要任何项目更改即可充分利用webpack 5。

重要提示:如果您的项目有自定义的webpack配置,可能需要进行一些更改才能过渡到webpack 5。我们建议您密切关注我们的迁移说明,或者尽量减少使用webpack扩展,以便将来进行无缝升级。

我们最近发现了webpack的一个问题,在对代码做了一些更改后,MacOS上的文件监视将会停止。您必须手动重新启动项目才能再次查看更新。在几次改变之后,这个循环就会重复。

此外,我们发现这个问题并不只发生在Next.js项目中,而是所有基于webpack的项目和框架中。

经过几天的调试,我们追踪到了webpack使用的名为Chokidar的文件监视实现的根本原因,该实现在Node.js生态系统中广泛使用。

我们向Chokidar发送了一个补丁程序来解决该问题。在补丁发布后,我们与Tobias Koppers合作,在新的webpack版本中推出了这个补丁。

自9.4发布以来,我们已经有超过1200名独立贡献者,其中超过135名是新贡献者。

加入GitHub讨论上的Next.js社区。讨论是一个社区空间,允许您与其他Next.jsuser联系并自由提问或分享您的工作。

如果您想要回馈,但不确定如何回馈,我们鼓励您尝试像我们的webpack支持这样的实验功能,并报告您的发现!

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

特别感谢Jan Potoms,他是Next.js社区的长期成员,在此版本中贡献了多项功能。

特别感谢Webpack的作者Tobias Koppers,他帮助webpack在Next.js获得了5的支持。

本新闻稿由以下人员提供:@chanda-reddy-k,@Timer,@aralroca,@artemisart,@Sospedra,@prateekbh,@Prioe,@Janpot,@merceyz,@ijjk,@PavelK27,@marbiano,@MichelleLucero,@Thorsten-stripe,@TodorTotev,@Skn0tt,@lfades,@[email protected],@vvo,@timohyis,@jazibsawar,@coeter,@Adam-Zacharski,@DanWilliams,@tywmick,@matamatanot,@Goldins,@mvllow,@its-Tayo,@sshyam-Gupta,@Wilbert-Abreu,@sebastianbenz,@jaydenseric,@developit,@dylanjha,@darshkpatel,@Spinks,@stefan prost,@eKhattak,@jpedroschmitz,@JerryGoYal,@Bowen31337,@Phillip055,@balazsorban44,@chuabingquan,@youhosi,@andresz1,@bell-Steven,@areai51,@wssn,@ndom91,@anthonyShort,@zxzl,@jBowes,@IamLizu,@PascalPixel,@ralphilius,@ysun62,@[email protected],@MalvinJay,@cristianbote,@Ashikpaul,@jensmeindertsma,@amorriscode,@abhik-b,@aweness481,@LukasPolak,@arvigeus,@romMidnight,@jackyef,@drumm2k,@kulDeep kehwar,@bogy0,@Belco90,@wawjr3d,@tanmaylaud,@sarKurd,@@robintom,@karlhorky,和@tcK1!