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 输出：生产构建输出现在以更易于理解的格式显示 gzipped 文件大小。
新的内置 Polyfill：fetch()、URL 和 Object.assign：应用程序可以在旧版浏览器中利用 fetch() API、URL 和 Object.assign，而无需担心兼容性问题。
优化的页面加载：更好的 FCP 和 TTI：我们与 Google Chrome 团队密切合作，最大限度地提高页面加载性能。这带来了更好的最终用户体验。
支持最新的 JavaScript 功能：我们致力于确保您始终可以使用最新的 JavaScript 功能，包括可选链式调用、空值合并和其他稳定的 ES2020 功能。
对 next export 应用程序的零配置部署支持：现在可以将 next export 驱动的应用程序零配置部署到 Vercel。
React 严格模式兼容性和选择加入：Next.js 的所有客户端运行时现在都与 React 的严格模式兼容。我们还添加了一个配置选项，可以为您的整个应用程序启用此模式。
针对 React 每晚构建版本的自动化测试：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 包的客户端版本，该版本构建于 URL API 之上。

通过为常用软件包提供内置的小型 polyfill，实现了更多的尺寸减小。您可以在此处阅读有关这些 polyfill 的更多信息。

最后，我们优化了 JSX 输出，这将直接与应用程序中 JSX 的数量相关联地引入节省。

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

为了清晰起见，CLI 的生产构建输出已重新设计。由于 Next.js 是一个混合应用程序框架，因此每个页面可能具有不同的特征。

新的输出将每个页面归类为以下之一

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

此外，新输出显示每个页面的 Gzipped 大小——这些大小不包括所有页面共享的文件（单独显示）。

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

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

The New Next.js Production CLI Output — 新的 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() — 替换：whatwg-fetch 和 unfetch。
URL — 替换：url 包 (Node.js API)。
Object.assign() — 替换：object-assign、object.assign 和 core-js/object/assign。

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

此更改是完全非破坏性的，并且所有 polyfill 均采用最符合规范的版本制作。结果是在现代浏览器上从您的生产包中消除了高达 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) 等等！

在此版本中，我们很高兴宣布支持可选链式调用（第 4 阶段）和空值合并（第 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;

空值合并运算符 (??)

将来，我们计划通过自动 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 来完成安装。

终端

now

React 严格模式兼容性和选择加入

完整的 Next.js 运行时现在与严格模式兼容。这包括对 Next.js 的 head 管理器 (<Head>)、next/dynamic 和其他核心功能的更新。这意味着运行时现在利用 hooks 或已消除已弃用的生命周期，并正在使用 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 名成员。加入我们！

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