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