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 Mac 笔记本电脑的支持。

我们正在继续改进 WebAssembly 性能，方法是利用 SIMD 扩展和多线程。

新增布局

根据您的反馈，我们为 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 发展最快的行业之一。苹果、沃尔玛、麦当劳和耐克等公司都信任 Next.js。

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

在提供商之间切换只需在配置中进行 一行更改。我们还创建了一个功能 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 讨论区。 讨论区是一个社区空间，您可以与其他 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！