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 严格模式兼容性和选择启用：现在，所有 Next.js 的客户端运行时都与 React 的严格模式兼容。我们还添加了一个配置选项，可以为您的整个应用程序启用此模式。
针对 React Nightly 构建的自动化测试：Next.js 会自动针对 React 的 next channel 进行测试，以确保与未来版本的兼容性。

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

终端

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 (提案)）

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

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

小于 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 小时针对 React 的 next channel 测试 Next.js。

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

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

社区

我们对即将到来的变更感到兴奋，这些变更将改善所有 Next.js 应用程序的大小和性能。

此外，Next.js 社区仍在不断扩大

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

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

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