跳到内容
返回博客

2021年3月29日，星期一

Next.js 10.1

发布者
Belén Curcio
Belén Curcio@okbel
JJ Kasper
JJ Kasper@_ijjk
Joe Haddad
Joe Haddad@timer150
Lee Robinson
Lee Robinson@leerob
Luis Alvarez
Luis Alvarez@luis_fades
Shu Ding
Shu Ding@shuding_
Steven
Steven@styfle
Tim Neutkens
Tim Neutkens@timneutkens

我们很高兴推出 Next.js 10.1，它具有：

3 倍更快的刷新

从 v9.4 开始，Next.js 引入了 Facebook 的 快速刷新，用于即时反馈您对 React 组件所做的编辑。

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

今天，我们将使每次编辑速度快 200 毫秒，无需您更改任何代码。平均而言，这使得快速刷新速度提高了 3 倍。

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

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

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

改进的安装时间

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

10.010.1变化
平均安装时间~15 秒~5 秒速度快 3.0 倍
安装大小96.5MB39.9MB减小 58%
依赖项数量424187减小 56%

作为我们优化依赖项目标的一部分，我们还更新和/或替换了作者标记为已弃用的 npm 包——即使它们嵌套在依赖项树的深层。Fresh install of Next.js 10.1 now will result in no package warnings.

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 优化图像。

components/my-image.js
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、Wal-Mart、McDonald's 和 Nike 等公司都信赖 Next.js。

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

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

Lighthouse metrics for Next.js Commerce around the globe.
全球 Next.js Commerce 的 Lighthouse 指标。

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

自定义 500 页面

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

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

严格的 PostCSS 配置加载

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

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

立即尝试并告知我们您的反馈。有关更多信息，请参阅 PostCSS 配置文档。

支持 tsconfig.json 中的 extends

您现在可以在 Next.js 使用的 tsconfig.json 中使用 extends 来扩展项目中的其他 tsconfig.json。例如，您可以按如下方式从项目中的 tsconfig.base.json 进行扩展

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

有关更多信息，请参阅 TypeScript 文档。

检测预览模式何时启用

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

components/MyComponent.js
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 的采用率持续增长

  • 我们有超过1,540名独立贡献者，自 10.0 发布以来新增了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！