Next.js 10.1

我们很高兴推出 Next.js 10.1，其特点包括

• 3 倍更快的刷新：刷新速度提升 200 毫秒，无需进行任何更改。
• 改进的安装时间：安装包体积缩小 58%，依赖项减少 56%。
• next/image 改进：Apple Silicon (M1) 支持，以及更多布局和加载器选项。
• Next.js Commerce Shopify 集成：用于可组合电子商务应用的灵活数据层。
• 自定义 500 页面：将您自己的 logo 和品牌添加到错误页面。
• 严格的 PostCSS 配置加载：通过 Webpack 5 改进缓存。
• 支持 tsconfig.json 中的 extends：大型 TypeScript 应用的可扩展配置。
• 检测何时启用预览模式：在查看预览时有条件地显示内容。
• 路由方法滚动到顶部：自动滚动到顶部，现在与所有路由保持一致。
• 文档改进：增量采用、迁移和 Docker 部署。

3 倍更快的刷新

从 v9.4 开始，Next.js 将 Facebook 的 Fast Refresh 引入开源，以便对您对 React 组件所做的编辑提供即时反馈。

这意味着 Next.js 只更新您编辑的文件中的代码，并且只重新渲染该组件，而不会丢失组件状态。这包括样式（内联、CSS-in-JS 或 CSS/Sass 模块）、标记、事件处理程序和效果（通过 useEffect）。

今天，我们在每次编辑时使其速度提高 200 毫秒，而您无需进行任何代码更改。平均而言，这使 Fast Refresh 快了 3 倍。

想要更快的性能和更好的构建时间？立即使用新的 future 标志选择加入 Webpack 5。此标志是候选版本 (RC)，Webpack 5 将很快成为默认设置。启用此标志后，请与我们分享任何反馈。

module.exports = {
  future: {
    webpack5: true,
  },
};

要了解有关 Webpack 5 如何以向后兼容的方式部署到您的应用程序的更多信息，请查看文档。

改进的安装时间

我们优化了 Next.js 的依赖关系图，以减少安装时间和依赖项大小。现在，无论是在本地还是在您的 CI/CD 流程中，创建 Next.js 项目都比以往任何时候都更快。

作为我们优化依赖项目标的一部分，我们还更新和/或替换了被其作者标记为已弃用的 npm 包——即使它们深深嵌套在依赖关系树中。全新安装 Next.js 10.1 现在将不会产生任何包警告。

next/image 改进

Apple Silicon 支持

当 Next.js 10 发布时，图像优化由原生依赖项提供支持。这导致安装时间变慢，原生依赖项消耗了 Next.js 总安装包大小的 50%。此外，这还移除了安装后运行脚本，并导致按需编译。

我们很高兴地宣布，通过 next/image 实现的自动图像优化现在由 WebAssembly 提供支持。此优化开箱即用，使用 next dev 和 next start 即可。通过使用 WASM，我们将安装包大小减少了约 30MB，并增加了对 Apple Silicon M1 MacBook 的支持。

我们正在通过利用 SIMD 扩展和多线程来继续提高我们的 WebAssembly 性能。

其他布局

根据您的反馈，我们为 next/image 添加了各种新的布局和选项

• layout=fill：您无需提供 width 和 height。（演示）
• layout=fixed：原生 img 行为。（演示）
• layout=responsive：灵活的宽度，具有固定的纵横比。（演示）
• layout=intrinsic：不会增长，但可以缩小，具有固定的纵横比。（演示）
• objectFit=cover：背景图片。（演示）

有关更多信息，请查看 layout 文档。

改进的图像优化支持

我们扩展了 next/image 的 内置图像加载器，使其能够添加任何自定义加载器。通过使用新的 loader 属性，您可以使用任何提供商或 CDN 优化图像。

import Image from 'next/image';
 
const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`;
};
 
const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="/me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  );
};

有关更多信息，请查看 next/image 文档。

Next.js Commerce Shopify 集成

电子商务是采用 Next.js 的增长最快的行业之一。像 Apple、沃尔玛、麦当劳和耐克这样的公司都信任 Next.js。

我们希望为您提供构建电子商务应用程序的高性能起点，因此我们发布了 Next.js Commerce。在收到数千个关于 Shopify 的请求后，我们更新了 Next.js Commerce，使其具有与提供商无关的 UI——使您能够引入您选择的任何无头电子商务解决方案。

在提供商之间切换是您配置中的单行更改。我们还创建了一个 Features API，允许您根据您的用例切换功能——所有这些都同时保持一流的性能。

只需点击几下，Next.js 开发人员就可以克隆、部署和完全自定义他们自己的电子商务商店。在 nextjs.org/commerce 了解更多信息，并试用我们的 Shopify 演示。对更多商业提供商的支持即将推出。

自定义 500 页面

您现在可以创建自定义 pages/500.js，以便在显示错误时添加您自己的徽标和品牌。与 pages/404.js 类似，此文件在构建时静态生成。

export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>;
}

严格的 PostCSS 配置加载

如果您使用的是 PostCSS 和 Webpack 5，您可以使用新的 future 标志来提高性能（通过缓存）。

module.exports = {
  future: {
    webpack5: true,
    strictPostcssConfiguration: true,
  },
};

立即试用，让我们知道您的反馈。有关更多信息，请查看 PostCSS 配置文档。

支持 tsconfig.json 中的 extends

您现在可以在 Next.js 使用的 tsconfig.json 中使用 extends，以从项目中的另一个 tsconfig.json 扩展。例如，您可以从项目中的 tsconfig.base.json 扩展，如下所示

{
  "extends": "./tsconfig.base.json"
}

有关更多信息，请查看 TypeScript 文档。

检测何时启用预览模式

您现在可以检测何时启用预览模式，从而允许您仅为编辑呈现某些组件。

import { useRouter } from 'next/router';
 
function MyComponent() {
  const { isPreview } = useRouter();
  return <>{isPreview ? <h1>Preview Mode Enabled</h1> : null}</>;
}

有关更多信息，请查看 预览模式文档。

路由方法滚动到顶部

当使用 next/link 导航时，Next.js 将自动滚动到顶部。使用 Next.js 10.1，router.push 和 router.replace 也将自动滚动到顶部，以匹配 next/link 的行为。您可以使用 scroll 选项选择退出自动滚动。

有关更多信息，请查看 next/router 文档。

文档改进

我们还添加了各种新的指南、资源和文档，包括

• 逐步采用 Next.js
• 从 Gatsby 迁移
• 从 Create React App 迁移
• 从 React Router 迁移
• 身份验证
• 使用 Docker 部署

社区

我们很高兴看到 Next.js 的采用持续增长

• 自 10.0 版本发布以来，我们拥有超过 1,540 位独立贡献者，其中新增 240 位贡献者
• 在 GitHub 上，该项目已被点赞超过 64,950 次。

加入 Next.js 社区，参与 GitHub Discussions。 Discussions 是一个社区空间，您可以在其中与其他 Next.js 用户联系，并自由提问或分享您的工作。您也可以加入官方 Next.js Discord。

鸣谢

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

本次发布由以下贡献者共同完成：@shuding, @edazpotato, @laithyounes, @ijjk, @harshitsan, @selrond, @sromexs, @melono6, @timneutkens, @madou, @mottox2, @leerob, @divmain, @nblthree, @KennethKinLum, @KarthikeyanRanasthala, @alex-safian, @rishabhpoddar, @daviavmello, @jpalmieri, @merceyz, @Segolene-Alquier, @michrome, @janicklas-ralph, @Parnswir, @giraffesyo, @balazsorban44, @Cicada95, @vzaidman, @deniseyu, @eltociear, @unimprobable, @getspooky, @Timer, @armand1m, @alexknipfer, @elitan, @atcastle, @noahfschr, @amille44420, @laanayam333, @spidgorny, @devuxer, @Janpot, @nickbabcock, @rsipakov, @NkxxkN, @dominicfraser, @alevosia, @Kerumen, @CMeeg, @Pomaio, @tim-hanssen, @lachlanjc, @lebreRafael, @AryanBeezadhur, @guybedford, @petecorreia, @kaznak, @sam3d, @fwuensche, @rafaellaurindo, @sphilee, @styxlab, @rexxars, @smitbarmase, @maerzhase, @matamatanot, @lucleray, @jeremybalog, @tarunama, @zainfathoni, @destumme, @VictorAssis, @bhbs, @ciruz, @simnalamburt, @Almad, @frol, @ludofischer, @elliottsj, @Baheya, @Lalit2005, @vldmrkl, @AriFreyr, @kaykdm, @Sharcoux, @ramasilveyra, @devknoll, @botv, @pkellner, @sumanthratna, @sokra, @lfades, @thorwebdev, @berndartmueller, @davidspiessens, @ShashiSrinath, @elsigh, @MMT-LD, @hankandre, @maxnowack, @kmjennison, @darshkpatel, @mohsen1, @DylanRJohnston, @calmonr, @imrobinized, @justintemps, @ncarchedi, @btk, @faizanv, @chulkilee, @ryan-lustre, @dfelber, @Ymirke, @Robogeek95, @mcha-dev, @youngvform, @andrehsu, @Simply007, @rokobekavac0, @ja0n, @mattruby, @xom9ikk, @niko20, @LauraBeatris, @armspkt, @xiaooye, @sungpro, @awareness481, @joebernard, @jensmeindertsma, @donavon, @DaneTheory, @Zertz, @danielyefet, @lfender6445, @tajo, @jorrit, @tvler, @mustafaKamal-fe, @prateekbh, @gregrickaby, @enochndika, @zimv, @lharries, @JstnEdr, @zbialecki, @fredmontet, @leo, @kachkaev, @mongolyy, @justinphilpott, @mjr, @fireairforce, @jvarho, @gr-qft, @thomaswang, @c316, @benbender, @michael, @damusnet, @farhankk360, @smaktacular, @webda2l, @chibicode, @bar7b, @SiTaggart, @lolobosse, @jamesgeorge007, @nikosantis, @mikan3rd, @oshdev, @UnbearableBear, @tunesmith, @jamsinclair, @ivandotv, @Arthie, @louison, @FutureKode, @wesleytian, @dennismorello, @vispaduchuri, @styfle, @caulagi, @berekuk, @jescalan, @cascandaliato, @coetry, @PepijnSenders, @dkempner, @dlackty, @aralroca, @felixmeziere, @bmvantunes, @hideokamoto, @bram-l, @craigdanj, @ErikAugust, @joiglifberg, @blvdmitry, @bragle, @ykdojo, @vitorhsb, @TrySound, @mattfwood, @ka2jun8, @rfinkley, @bannier, @karlhorky, @shihabus, @yakovlevyuri, @dav-is, @lundgren2, @NoobTW, @Cow258, @toshi1127, @jorisw, @rifaidev, @willianjusten, @willheslam, @alexvilchis, @vitordino, @matthewlilley, @Prottoy2938, @brunocrosier, @OriginalEXE, @sidthesloth92, @davidsonsns, @saitolume, @tolfino, @iczero, @WestonThayer, @galanggg, @davidgolden, @weichienhung, @ashconnell, @callumbooth, @lyderichti59, @lukyth, @FredyC, @danielstocks, @valse, @MrJmpl3, @Sm1t, @lucas-varela, @jose-donato, @chr-ge, @pocorschi, @jflayhart, @aried3r, @LittleboyHarry, @Akumzy, @xeust, @tonyspiro, @yordis, @AmrSaber, @Mzaien, @PaulPCIO, @quinnturner, @SebastianTroc, @JipSterk, @developit, @yokinist, @queq1890, @oriverk, @ospira, @danielivert, @huv1k, @minhtule, @shunkakinoki, @khades, @eric-burel, @turadg, @huozhi, 和 @scottmacdonnell！