QCon 全球软件开发大会(北京站)门票 9 折倒计时 4 天,点击立减 ¥880 了解详情
写点什么

Next.js 9.5 正式发布:支持 Webpack 5

2020 年 7 月 28 日

Next.js 9.5 正式发布:支持 Webpack 5

Next.js 9.5 今天正式发布了,其改进包括:


  • 稳定的增量静态再生 :部署后以毫秒为单位重建静态页面

  • 可自定义的基本路径 :在域的子路径上轻松托管 Next.js 项目

  • 支持重写、重定向和标头 :重写虚拟 URL,重定向旧 URL,向静态页面添加标头

  • URL 中的可选尾斜杠 :始终强制去除/显示尾斜杠

  • 永久缓存页面包 :未更改页面的 JavaScript 文件现在可以在各个版本之间继承

  • 快速刷新增强 :增强了 Next.js 实时编辑体验的可靠性

  • Production React Profiling :衡量项目渲染“成本”的新标志

  • 可选的“捕获所有路由” :动态路由现在为 SEO 驱动的用例提供了更大的灵活性

  • Webpack 5 支持(测试版) :可选地加入 Webpack 5,以改进构建体积和速度


稳定的增量静态再生

Next.js 在 9.3 版中引入了静态网站生成方法,其目标很明确:我们应该获得静态的优势(一直很快,一直在线,全局复制),但是对动态数据的出色支持也不能丢,后者是 Next.js 的看家本领。


为了两全其美,Next.js 引入了 增量静态生成 ,在你构建站点之后更新静态内容。使用 getStaticPaths 中的 fallback: true 选项,可以 在运行时注册新的静态页面


无论你的数据集有多大,Next.js 都可以按需静态地预渲染无数个页面。



今天, 增量静态再生 功能已对所有用户开放了,这是一种在流量进入时于后台重新渲染现有页面来 更新它们 的机制。


受 stale-while-revalidate 的启发,后台再生可确保始终从静态存储中无间断地处理流量,并且仅在生成完成后才推送新建页面。


export async function getStaticProps() {   return {     props: await getDataFromCMS(),     // we will attempt to re-generate the page:     // - when a request comes in     // - at most once every second     revalidate: 1   } } 
复制代码


revalidate 标志是秒数,在此时间内最多有一次生成,以防止 https://en.wikipedia.org/wiki/Cache_stampede


与传统的 SSR 不同,增量静态再生可为你保留静态的优势:


  • 延迟不会暴涨。页面一直都能快速渲染。

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

  • 数据库和后端负载较低。页面最多同时重新计算一次。


增量功能(添加页面和延迟更新它们)及预览模式现在都已稳定,并得到了 next start 和 Vercel edge 平台的完全支持。


我们创建了一个示例演示了再生静态页面的过程,该页面显示了某个 GitHub 问题的各种互动的计数:



首次访问并点赞后,后台会生成新的页面。整个过程中的每个请求均由静态缓存提供。


接下来团队将开发另外两个增量静态生成功能:


  • 一次再生并作废多个页面(例如你的博客索引或某篇博文)

  • 在用户流量之前监听事件(例如 CMS webhooks)来再生


更多详细信息,请查阅 getStaticProps文档


可自定义的基本路径

Next.js 项目并非总是从域的根目录提供的。有时,你可能希望将 Next.js 项目托管在/docs 之类的子路径下,以便 Next.js 项目只覆盖域的这一子部分。


虽然之前我们也可以这样做,但它需要大量额外配置,比如在每个<Link>中添加前缀,并确保 Next.js 从正确的路径提供了 JavaScript 包。


为了解决这个痛点,新版引入了一个新的配置选项 basePath,允许你轻松将 Next.js 项目托管在域的子路径上。


要开始使用 basePath,可以将其添加到 next.config.js:


// next.config.js module.exports = {   basePath: '/docs' } 
复制代码


配置 basePath 之后,你的项目将自动从提供的路径路由。本例中为/docs。


当使用 next/link 或 next/router 链接到项目中的其他页面时,basePath 将自动添加前缀。这使你无需更改项目即可更改 basePath。


例如,使用 next/link 路由到另一个页面:


import Link from 'next/link' export default function HomePage() {   return (     <>       <Link href="/documentation-page">         <a>Documentation page</a>       </Link>     </>   ) } 
复制代码


以这种方式使用 next/link 将导致以下 HTML 渲染到 Web 浏览器:


<a href="/docs/documentation-page">Documentation page</a> 
复制代码


更多详细信息,请参阅 basePath文档


支持重写、重定向和标头

重写

在构建 Next.js 项目时,你可能希望将某些路由代理到另一个 URL。例如,如果要逐渐将 Next.js 引入技术栈,则需要路由 Next.js 项目中已有的页面,然后路由所有与要迁移的旧项目不匹配的页面。


Next.js 9.5 引入了一个名为 rewrites 的配置选项,允许你将传入的请求路径映射到其他目标路径上,包括外部 URL。


例如,你可能想重写一条通往 example.com 的路由:


// next.config.js module.exports = {   async rewrites() {     return [       { source: '/backend/:path*', destination: 'https://example.com/:path*' }     ]   } } 
复制代码


在这里,/backend 下的所有路径都将路由到 example.com。


你还可以检查 Next.js 项目的路由是否匹配,如果不匹配,则重写到之前的项目。这非常适合 渐进采用 Next.js 的场景:


module.exports = {   async rewrites() {     return [       // check if Next.js project routes match before we attempt proxying       {         source: '/:path*',         destination: '/:path*'       },       {         source: '/:path*',         destination: `https://example.com/:path*`       }     ]   } } 
复制代码


在这里我们首先匹配所有路径。如果没有匹配项,我们将代理到 example.com,也就是先前的项目。


更多信息请查看 重写文档


重定向

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


以前,在 Next.js 项目中设置重定向列表时,需要设置自定义服务器或自定义_error 页面,以检查是否为路由设置了重定向。但这会抵消静态优化和无服务器优化(因为有了服务器)的效果。


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


// next.config.js module.exports = {   async redirects() {     return [       {         source: '/about',         destination: '/',         permanent: true       }     ]   } } 
复制代码


更多信息请查看 重定向文档


标头

Next.js 允许你构建同时使用静态生成和服务端渲染的混合项目。使用服务端渲染可以为传入请求设置标头。对于静态页面,之前的版本无法设置标头。


新版在 next.config.js 中引入了 headers 属性,该属性适用于所有 Next.js 路由:


// next.config.js module.exports = {   async headers() {     return [       {         source: '/:path*',         headers: [           {             key: 'Feature-Policy',             // Disable microphone and geolocation             value: "microphone 'none'; geolocation 'none'"           }         ]       }     ]   } } 
复制代码


headers 选项允许你设置常用的标头,例如 Feature-Policy 和 Content-Security-Policy。


更多信息请查看标头文档


URL 中的可选尾斜杠

Next.js 在 3 年前刚时,其默认行为是所有带有尾斜杠的 URL 始终返回 404 页面。


一些用户要求能够更改这一行为。例如,需要迁移的旧项目可能一直强制使用尾斜杠。


Next.js 9.5 在 next.config.js 中引入了一个名为 trailingSlash 的新选项。


这一选项可确保 Next.js 自动处理斜杠行为:


  • 自动将尾斜杠 URL 重定向到没有尾斜杠的 URL,例如:/about/到/about

  • 当 trailingSlash 设置为 true 时,不带斜杠的 URL 将被重定向到带斜杠的 URL,例如:/about 到/about/

  • 确保 next/link 具有自动应用/删除的尾斜杠,以避免不必要的重定向。


// next.config.js module.exports = {   // Force a trailing slash, the default value is no trailing slash (false)   trailingSlash: true } 
复制代码


更多信息请查看 trailingSlash文档


持久缓存页面包

编写 Next.js 页面时,所有脚本包、CSS 样式表和 HTML 的创建都是完全自动化并抽象出来的。如果你在 Next.js 之前的版本中检查生成的<script>标志,会发现它们的 URL 遵循以下格式:


/_next/static/ovgxWYrvKyjnlM15qtz7h/pages/about.js 
复制代码


上面的路径段 ovgxWYrvKyjnlM15qtz7h 是所谓的内部版本 ID。尽管这些文件可以在边缘和用户机器上轻松缓存,但是在重新构建应用之后,构建 ID 将会更改并且所有缓存都将被清除。


对于大多数项目来说,这种折衷是可以容忍的,但 Next.js 团队希望不再让未更改页面的浏览器缓存失效,以进一步优化这一行为。


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


从 Next.js 9.5 开始, 所有页面 JavaScript 包都将使用内容哈希代替构建 ID 。这允许在各个部署之间未更改的页面保留在浏览器和边缘缓存中,而无需再次下载。


新的 URL 模式如下所示:


/_next/static/chunks/pages/about.qzfS4o5gIEXRME6sTEahL.js 
复制代码


qzfS4o5gIEXRME6sTEahL 部分是 about.js 包的确定哈希,而不是全局构建 ID,所以是稳定的,因为你站点的这部分代码不会更改。此外,它现在已通过 Cache-Control: public,max-age=31536000,immutable 在各个部署之间实现了长期缓存,Next.js 会自动为你设置。


快速刷新增强

Next.js 9.4 中引入了快速刷新(Fast Refresh),这是一种新的热重载体验,可为你提供对 React 组件所做编辑的即时反馈。


Next.js 9.5 进一步完善了快速刷新实现,并为你提供了很多好用的工具:


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

  • 保持组件状态的开发时提示 :Next.js 现在为你提供有用的提示,以确保“快速刷新”在尽可能多的场景中保持组件状态。Next.js 提供的每个提示都是 完全可动作 的,并带有实施前后的示例对比!

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

  • 新的文档 :新版添加了内容丰富的 文档,这些文档解释了什么是快速刷新,其工作机制以及你可以期望的内容!该文档还解释了错误恢复的机制,教你如何更好地利用“快速刷新”。

  • 用户代码故障排除指南 :新文档还包括常见的故障排除步骤,以及关于如何充分利用快速刷新的提示。


Production React Profiling

React 不久前引入了 Profiler API,通过它可以跟踪 React 组件中的性能问题。尽管此功能在开发中会自动运行,但它需要使用单独的 ReactDOM 版本在生产中做 profile。


在 Next.js 9.5 中,你现在可以在 next bulid 中使用–profile 标志启用 React 的生产 profiling:


next build --profile 
复制代码


之后,你可以像开发环境中那样使用 profiler。


更多信息,请阅读 React 团队 关于React Profiler的文章。特别感谢 @TodorTotev 和 @darshkpatel 的贡献。


可选捕获所有路由

Next.js 9.2 添加了捕获全部(catch-all)动态路由的支持,且已被社区广泛用于各种用例。捕获全部路由使你能够灵活地创建由无头 CMS、GraphQL API 和文件系统等支持的高度动态的路由结构。


用户希望有更大的灵活性来匹配路由的最根部层。新版为这些高级场景提供了 可选的捕获全部动态路由


要创建可选的捕获全部路由,可以使用[[…slug]]语法创建页面。


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


与捕获全部路由一样,在路由器查询对象中将以各个路径部分的数组形式提供 slug。因此,对于/blog/foo/bar 路径,查询对象将为{slug: [‘foo’, ‘bar’]}。对于路径/blog,查询对象将省略 slug 键:{ }。


更多信息见可选的捕获全部路由 文档


Webpack 5 支持(测试版)

Webpack 5 当前处于测试状态。它包括一些重大改进:


  • 改进的摇树优化:嵌套的导出,内部模块和 CommonJS 会被摇树优化

  • 持久缓存:允许重复使用以前版本中的工作

  • 确定性块和模块 ID:解决 Webpack 模块 ID 在构建之间更改的问题


Next.js 9.5 提供了 webpack 5 的 beta 版支持。


要试用 webpack 5,可以在 package.json 中使用 Yarn resolutions:


{   "resolutions": {     "webpack": "^5.0.0-beta.22"   } } 
复制代码


Webpack 5 beta 已推到 nextjs.org 和 vercel.com 的生产环境。你可以渐进尝试它,并在 GitHub 上报告你的发现 。


编译基础架构改进

为了支持 webpack 5,新版重写了许多编译管道,使其更适合 Next.js:


  • Next.js 不再依赖 webpack-hot-middleware 和 webpack-dev-middleware,而是直接使用 webpack 并专门针对 Next.js 项目做了优化。这意味着更简单的架构和更快的开发编译。

  • On-demand-entries 这个系统(Next.js 必须允许它在开发过程中的某个时间被访问的页面上进行编译)也已被重写,并且现在利用了专为新的用例优化的 webpack 行为,因此更为可靠。

  • React Fast Refresh 和 Next.js Error Overlay 现在与 webpack 5 完全兼容

  • 将来的 beta 版本中将启用磁盘缓存


向后兼容

Webpack 4 将继续得到完全支持。Next.js 团队正在与 webpack 团队紧密合作,以确保从 webpack4 到 5 的迁移尽可能顺利。


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


重要提示 :如果你的项目具有自定义的 webpack 配置,则可能需要进行一些更改才能过渡到 webpack 5。建议你留意迁移说明,或尽量少用 webpack 扩展程序,以实现无缝升级。


改进了 macOS 上的文件监视

Webpack 上有一个问题是,对代码进行一些更改后,macOS 上的文件监视将停止。你必须手动重新启动项目才能再次查看更新。再做一些更改后又会停止监视,如此循环。


这个问题不仅发生在 Next.js 项目中,还发生在基于 webpack 的所有项目和框架中。


其根本原因在于 webpack 使用的称为 chokidar 的文件监视实现,chokidar 是 Node.js 生态系统中广泛使用的文件监视实现。


开发团队向 chokidar 发送了补丁以解决此问题。补丁发布后,Webpack 新版中打上了它。


升级到 Next.js 9.5 时,将自动使用这个修补过的 webpack 版本。


小结

Next.js 的采用率正在持续增长:


  • 自 9.4 版本以来,项目已经有 1200 多位独立贡献者,其中有超过 135 位新贡献者。

  • 在 GitHub 上,项目已经有超过 51,100 星。


你可加入 GitHub Discussions 的 Next.js社区。这是一个社区空间,你可以与其他 Next.js 用户联系,并自由提问或分享你的工作。


原文链接:


https://nextjs.org/blog/next-9-5


2020 年 7 月 28 日 18:592311

评论 1 条评论

发布
用户头像
👍
2020 年 07 月 30 日 17:44
回复
没有更多了
发现更多内容

推荐一个GitHub上超牛b的Java进阶学习项目《Java成神之路》!已整理成了文档版本

Java成神之路

Java 程序员 架构 面试 编程语言

港美股交易系统开发框架构造简述篇

软件开发大鱼V15724971504

国际配售 港股交易系统开发 证券交易系统 资管系统 港股打新系统

话题讨论 | 程序员自己电脑中毒是甚么体验?

xcbeyond

话题讨论

我哭了!Centos6停止更新只能切换7,哪些习惯也需要切换

996小迁

Java 架构 面试 Centos6

牛皮了!头一次见有大佬把Java语言中最为晦涩的知识点「并发编程」详解得如此清晰明了。

Java成神之路

Java 程序员 架构 面试 编程语言

某美女的程序员老公半夜都还不回家,原来是偷偷在公司看Redis+JVM+Spring cloud+MySQL技术文档

Java架构之路

Java 程序员 架构 面试 编程语言

JS&Swift

ios swift

最近面试了一波Java程序员,有好几位80后的,按理说是老司机了,没想到一问三不知!

Java成神之路

Java 程序员 架构 面试 编程语言

四面腾讯pcg后端开发岗,一个星期面完成功拿到20K的offer。分享面经

Java架构之路

Java 程序员 架构 面试 编程语言

SGY奇点交易所系统软件APP开发

开發I852946OIIO

系统开发

动态高并发时为什么推荐ReentrantLock而不是Synchronized?

moon聊技术

JVM 并发 synchronized ReentrantLock 锁升级

死皮赖脸地找一位前阿里P8得大佬请教怎么学习微服务,他随手甩给我一份内部SpringCloud笔记手册,真香!

Java成神之路

Java 程序员 架构 面试 编程语言

区分Protobuf 3中缺失值和默认值

Gopher指北

golang protobuf

请问如何短时间突击 Java 通过面试?

Java架构师迁哥

《数据结构与抽象:Java语言描述》.pdf

田维常

数据结构

仅凭这份Java大纲笔记,我如愿拿到了阿里offer。

Java架构之路

Java 程序员 架构 面试 编程语言

恕我直言!有了这份MySQL学习文档,你收藏夹里的其他MySQL学习资料都可以扔了

Java架构之路

Java 程序员 架构 面试 编程语言

滴滴DoKit-功能介绍之文件同步助手

工具 文件 DoKit

训练营第八周作业

大脸猫

极客大学架构师训练营

Scala中String和Int隐式转换的问题分析

木子李G

scala 大数据 编程 隐式转换

服务于阿里、滴滴、华为等一线互联网公司的分布式消息中间件RocketMQ核心笔记

Java架构追梦

Java 架构 面试 RocketMQ 消息中间件

了解OAuth2.0

环信

DolphinDB与Elasticserach在金融数据集上的性能对比测试

DolphinDB

数据处理 金融 时序数据库 tsdb DolphinDB

官方活动 | 盘点2020有奖征文

InfoQ写作平台官方

活动专区 盘点2020

Mybatis动态映射,so easy啦

田维常

分享一个GitHub上最火的SpringCloud微服务商城系统项目实战,附全套教程

Java成神之路

Java 程序员 架构 面试 编程语言

还有谁比阿里人更懂SpringCloud Alibaba 呢?P8大牛纯手打笔记免费分享!

Java架构之路

Java 程序员 架构 面试 编程语言

助力孩子走上学霸之路,K12学习神器现已面世!

intel001

《迅雷链精品课》第十二课:PoW共识算法

迅雷链

区块链

刚拿到蚂蚁金服架构师offer!大佬教你如何成为offer收割机

比伯

Java 编程 架构 面试 计算机

我哭了!Centos6停止更新只能切换7,哪些习惯也需要切换

小Q

Java Linux centos 学习 面试

边缘计算隔离技术的挑战与实践

边缘计算隔离技术的挑战与实践

Next.js 9.5 正式发布:支持 Webpack 5-InfoQ