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

创作场景

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