Back返回博客

Next.js 9.1.7 版本发布

Next.js 9.1.7 在坚实的基础上进一步优化，完善了企业级 9.1 发布通道。升级后可获得更小的客户端 JavaScript 包体积、重新设计的 CLI 输出、更快的首次内容渲染 (FCP) 和可交互时间 (TTI) 等改进！

Next.js 9 发布于六个月前，随后在三个月前推出了 Next.js 9.1。

这两个版本为 Next.js 添加了非常强大的新功能，同时没有增加基础客户端运行时体积。

此后，我们重点对整个框架进行了细化和改进：9.1.1、9.1.2、9.1.3、9.1.4、9.1.5、9.1.6 和 9.1.7。

让我们深入了解这些版本的改进！

所有这些改进都是非破坏性且完全向后兼容的。只需运行以下命令即可更新：

Terminal
npm i next@latest react@latest react-dom@latest

客户端 JavaScript 体积减少 3%-8%+

与 Google Chrome 团队合作，所有 Next.js 应用都将受益于 7.5kB 或更多 的体积缩减。

基础应用可减少 3-4% 的体积，更复杂的应用可能减少 6-8% 或更多！

9.0.x9.1.x差异
基础应用68.9kB66.1kB4.1% 缩减

部分体积节省归功于 用基于 URL API 的版本替换 url 包的客户端部分。

更多体积缩减通过为常用包提供内置的小型 polyfill 实现。您可 在此阅读更多关于这些 polyfill 的信息。

最后，我们优化了 JSX 输出，节省的体积与您应用中 JSX 的数量直接相关。

重新设计的生产构建 CLI 输出

为提升清晰度，我们重新设计了 CLI 的生产构建输出。由于 Next.js 是混合应用框架，每个页面可能具有不同特性。

新输出将每个页面分类为以下类型之一：

  • 服务端渲染 (Server)：页面在运行时通过服务端渲染，意味着使用了 getInitialProps 或 getServerProps (提案)
  • 自动静态优化 (Static)：页面在构建时渲染为静态 HTML，将作为静态文件提供（不使用初始 props）
  • 使用计算数据静态生成 (SSG)：页面在构建时生成为静态 HTML/JSON，将作为静态文件提供（使用 getStaticProps (提案)）

此外，新输出显示每个页面的 Gzip 压缩大小——这些大小排除了所有页面共享的文件（单独显示）。

每个页面的大小将根据其感知用户体验着色：

  • 小于 130kB：绿色 —— 您的应用在大多数网络和设备条件下都应表现良好。
  • 130kB 至 170kB 之间：黄色 —— 您的应用在 全球基准设备 + 网络条件 下接近 5-6 秒加载时间。
  • 大于 170kB：红色 —— 您的应用在 相同条件 下可能需要超过 6 秒加载。

新版 Next.js 生产 CLI 输出

新版 Next.js 生产 CLI 输出

我们期待您对新构建输出的反馈。

不久的将来，Next.js 还将引入体积预算功能，帮助您确保页面大小处于特定范围内。

新增内置 Polyfill：fetch()、URL 和 Object.assign

通过分析许多用户应用和示例，我们发现大多数应用都携带了相似的 polyfill 集合。某些情况下，应用甚至为同一功能重复加载 polyfill。

为解决此问题，我们与 Google Chrome 团队合作，内置了三个最常用 API 的 polyfill。

通过差异化加载，这些 polyfill 不会为全球 83% 的网络流量加载。这意味着大多数用户不会下载这些 polyfill 相关的字节——仅在必要时才会下载。

此外，任何我们现已内置的知名 polyfill 将从您的生产构建中完全消除。这意味着您无需为依赖项无意中导入这些 API 的 polyfill 付出代价。

内置 API 及其替代的 polyfill 如下：

如果您在服务端使用 fetch()，仍需导入 isomorphic-fetch 或 isomorphic-unfetch。

此变更完全非破坏性，所有 polyfill 均采用最符合规范的版本实现。结果是在现代浏览器上，您的生产包可减少 高达 18kB 的 JavaScript。

优化页面加载：更好的 FCP 和 TTI

Next.js 优化了预加载实现，以减少首次内容渲染 (FCP) 和整体可交互时间 (TTI)。

通过修复浏览器问题，CSS（当使用时）现在正确优先于 JavaScript。这带来了更快的首次内容渲染，为终端用户提供视觉上更快的网站。

此外，我们优化了页面预取，使用更低优先级的网络请求。

这些请求仅在浏览器空闲时发生，从而缩短可交互时间。因为浏览器会优先使您的应用可交互，而非乐观预取。

优化前后的 FCP/TTI

优化前后的 FCP/TTI

支持最新 JavaScript 特性

Next.js 拥有先进、高度优化的编译管道，允许您使用最新 JavaScript 特性。我们最近引入的优化直接促成了 3-8% 的应用体积缩减。

您可以无忧使用这些 JavaScript 特性，因为我们自动将代码编译为支持所有浏览器（不包括已终止支持的版本）。这包括 ES6+ 特性，如 async/await (ES2017)、对象剩余/展开属性 (ES2018)、动态 import() (ES2020) 等！

在此版本中，我们很高兴地宣布支持 可选链式操作符 (Stage 4) 和 空值合并操作符 (Stage 4)。

pages/index.js
function Page(props) {
  return (
    <p>{props?.deeply?.nested?.value}</p>
    /* ⬆ 如果 deeply.nested.value 不可用则不会渲染 */
  );
}
 
export default Page;

可选链式操作符 (?.)

pages/index.js
function Page(props) {
  return (
    <p>{props.something ?? '默认值'}</p>
    /* ⬆ 结果为 "默认值" */
  );
}
 
export default Page;

空值合并操作符 (??)

未来，我们计划通过自动 module / nomodule 构建 输出更优化的包。

next export 应用的零配置部署支持

Next.js 的 next export 命令现在开箱即用地支持 Vercel 的 零配置部署。在此变更前，使用 next export 的用户需要创建自定义 now.json。

在 Vercel 上使用 Next.js 的导出模式非常简单，只需在 package.json 中包含以下 build 脚本：

package.json
{
  "scripts": {
    "build": "next build && next export"
  }
}

然后，您可以通过 仅一个命令 将 Next.js 应用部署到 Vercel。如果尚未安装 Vercel，可通过安装 Vercel CLI 实现。

Terminal
now

React 严格模式兼容与启用选项

完整的 Next.js 运行时现已兼容严格模式。这包括对 Next.js 的 head 管理器 (<Head>)、next/dynamic 和其他核心功能的更新。这意味着运行时现在使用钩子或已弃用生命周期，并采用 React 的新 Context API。

我们还添加了方便的选项，供您为应用启用严格模式。

为此，在 next.config.js 中配置以下选项：

next.config.js
module.exports = {
  reactStrictMode: true,
};

如果您或团队尚未准备好全应用使用严格模式，没关系！您可以 使用 <React.StrictMode> 逐页迁移。

虽然 非必需，但严格模式将解锁未来的许多优化。因此，我们建议您尽早了解它！

针对 React 每日构建版本的自动化测试

与 React 核心团队 紧密合作 下，我们现在每 12 小时 测试 Next.js 与 React 的 next 通道版本。

这些测试帮助我们确保与 React 未来版本的准备和兼容性。兼容性是 Next.js 非常重视的事项，我们致力于 Next.js 的长期 API 稳定性。

React 核心团队已 记录此过程，希望 React 生态系统的其他项目效仿。

社区

我们对即将到来的变更感到兴奋，这些变更将提升所有 Next.js 应用的体积和性能。

此外，Next.js 社区仍在扩展：

  • 我们已有超过 865 位独立贡献者。
  • 在 GitHub 上，项目已获得超过 43,700 次星标。
  • 示例目录 包含超过 220 个示例。

Next.js 社区现拥有超过 13,600 名成员。加入我们！

我们感谢社区以及所有外部反馈和贡献，这些帮助塑造了此版本。