Next.js 10.1

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

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

3 倍速刷新

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

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

今天，我们在每次编辑时都使其速度提高 200 毫秒，而无需您进行任何代码更改。 平均而言，这使快速刷新速度提高了 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 的请求后，我们使用与提供商无关的 UI 更新了 Next.js Commerce — 使您能够引入您选择的任何无头电子商务解决方案。

在提供商之间切换是您配置中的单行更改。 我们还创建了一个 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 的采用持续增长

• 我们有超过 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！