Next.js 9.1.7 | Next.js 框架

Next.js 9 于六 (6) 个月前发布，随后 Next.js 9.1 于三个 (3) 月前发布。

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

从那时起，我们一直专注于改进和完善整个框架：9.1.1，9.1.2，9.1.3，9.1.4，9.1.5，9.1.6 和 9.1.7。

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

客户端 JavaScript 大小减少 3% - 8%+：我们进一步优化了应用程序输出，使 hello world 应用程序减少了 7.5kB。更复杂的应用程序将节省高达 8% 或更多。
重新设计的生产构建 CLI 输出：生产构建输出现在以更易于理解的格式显示 gzip 后的文件大小。
新的内置 polyfill：fetch()、URL 和 Object.assign：应用程序可以在旧版浏览器中利用 fetch() API、URL 和 Object.assign，而无需担心兼容性问题。
优化页面加载：更好的 FCP 和 TTI：我们与 Google Chrome 团队紧密合作，最大程度地提高页面加载性能。这带来了更好的最终用户体验。
支持最新的 JavaScript 功能：我们致力于确保您始终可以使用最新的 JavaScript 功能，包括可选链、空值合并以及其他稳定的 ES2020 功能。
对 next export 应用程序的零配置部署支持：next export 支持的应用程序现在可以零配置部署到 Vercel。
React Strict Mode 兼容性和选择加入：Next.js 的所有客户端运行时现在都与 React 的 Strict Mode 兼容。我们还添加了一个配置选项，以启用整个应用程序的此模式。
针对 React nightly 版本的自动化测试：Next.js 会自动针对 React 的 next 渠道进行测试，以确保与未来版本的兼容性。

所有这些好处都是非破坏性的，并且完全向后兼容。您只需运行以下命令即可更新

终端

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

客户端 JavaScript 大小减少 3% - 8%+

与 Google Chrome 团队合作，所有 Next.js 应用程序都将受益于 **7.5kB 或更多** 的尺寸减小。

基本应用程序的应用程序大小应减少 3-4%，更高级的应用程序可能会减少 6-8%（或更多）！

	9.0.x	9.1.x	增量
基本应用程序	68.9kB	66.1kB	4.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 秒才能加载。

The New Next.js Production CLI Output — 新的 Next.js 生产 CLI 输出

我们希望听到您对新的构建输出的反馈。

在不久的将来，Next.js 还将具有大小预算，可帮助您确保页面在特定的尺寸范围内。

新的内置 Polyfills：fetch()、URL 和 Object.assign

在检查了许多用户的应用程序和我们的示例后，我们发现大多数应用程序都附带了类似的 polyfills 集。在某些情况下，应用程序甚至对同一功能具有重复的 polyfills。

为了解决这个问题，我们与 Google Chrome 团队合作，为我们观察到的三个最常见的 API 内置了 polyfills。

使用差异加载，这些 polyfills 在全球范围内 **不会加载 83% 的网络流量**。这意味着您的大多数用户将不会下载与这些 polyfills 相关的字节 - 它们只有在必要时才会下载。

此外，我们现在内置的任何知名 polyfills 都将完全从您的生产构建中删除。这意味着您无需为无意中导入这些 API 之一 polyfills 的依赖项付费。

内置 API 列表及其使之过时的 polyfills 如下

fetch() — 替换：whatwg-fetch 和 unfetch。
URL — 替换：url 包 (Node.js API)。
Object.assign() — 替换：object-assign、object.assign 和 core-js/object/assign。

如果您在服务器上使用 fetch()，则仍然需要导入 isomorphic-fetch 或 isomorphic-unfetch。

此更改完全不会破坏，并且所有 polyfills 均使用可用的最符合规范的版本制作。结果是 **从您的生产包中删除了多达 18kB 的 JavaScript**，适用于现代浏览器。

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

Next.js 优化了其预加载实现，以减少 FCP 和整体 TTI。

通过解决浏览器错误，CSS（如果使用）现在优先于 JavaScript。这导致更快的首屏内容绘制，从而为您的最终用户提供更快地视觉完整网站。

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

此外，这些请求仅在浏览器空闲时发生，从而导致更快的互动时间。这是因为浏览器会优先使您的应用程序具有交互性，而不是乐观的预取。

FCP/TTI Before and After Optimizations — 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>
    /* ⬆ If deeply.nested.value is not available it won't render */
  );
}
 
export default Page;

可选链运算符 (?.)

pages/index.js

function Page(props) {
  return (
    <p>{props.something ?? 'Default value'}</p>
    /* ⬆ results in "Default value" */
  );
}
 
export default Page;

空值合并运算符 (??)

将来，我们计划通过自动模块/非模块构建输出更多优化的包。

`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 来完成。

终端

now

React 严格模式合规性和选择加入

完整的 Next.js 运行时现在已与严格模式兼容。这包括对 Next.js 的头部管理器（`<Head>`）、`next/dynamic` 和其他核心功能的更新。这意味着运行时现在利用了 Hook 或已淘汰了已弃用的生命周期，并且正在使用 React 的新 Context API。

我们还添加了一个方便的选择加入选项，供您为应用程序启用严格模式。

为此，请在您的 `next.config.js` 中配置以下选项。

next.config.js

module.exports = {
  reactStrictMode: true,
};

如果您或您的团队尚未准备好将严格模式用于整个应用程序，也没关系！您可以使用 `<React.StrictMode>` 以逐页的方式逐步迁移。

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

针对 React nightly 版本的自动化测试

在与 React 核心团队密切合作的过程中，我们现在每 12 小时对 React 的下一个版本进行测试 Next.js。

这些测试有助于确保我们为 React 的未来版本做好准备并兼容。兼容性是 Next.js 非常重视的事情，我们致力于 Next.js 的长期 API 稳定性。

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

社区

我们对即将到来的更改感到兴奋，这些更改将提高所有 Next.js 应用程序的规模和性能。

此外，Next.js 社区仍在不断发展。

我们拥有超过 **865** 位独立贡献者。
在 GitHub 上，该项目已被收藏超过 **43,700** 次。
示例目录有超过 **220** 个示例。

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

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