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 的 快速刷新 (Fast Refresh) 引入开源生态，实现了对 React 组件编辑的即时反馈。

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

现在，我们让每次编辑的刷新速度 再快 200 毫秒，且 无需您修改任何代码。平均而言，快速刷新速度提升了 3 倍。

想要更快的性能和构建速度？立即通过新的 future 标志启用 Webpack 5。该标志目前是候选版本 (RC)，Webpack 5 将很快成为默认配置。启用后请向我们反馈。

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

要了解 Webpack 5 如何以向后兼容的方式应用到您的应用，请查阅相关文档。

安装时间优化

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

作为优化依赖项目标的一部分，我们还更新或替换了已被作者标记为废弃的 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 增长最快的行业之一。苹果、沃尔玛、麦当劳和耐克等公司都信赖 Next.js。

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

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

Next.js Commerce 在全球的 Lighthouse 指标

只需点击几下，Next.js 开发者即可克隆、部署并完全自定义自己的电商店铺。了解更多请访问 nextjs.org/commerce，体验我们的 Shopify 演示。更多电商提供商支持即将推出。

自定义 500 页面

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

export default function Custom500() {
  return <h1>500 - 服务器端发生错误</h1>;
}

严格的 PostCSS 配置加载

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

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

立即试用并反馈意见。更多信息请查阅 PostCSS 配置文档。

支持 tsconfig.json 的 extends 配置

现在可以在 Next.js 使用的 tsconfig.json 中使用 extends 来扩展项目中的其他配置。例如，您可以这样扩展项目中的 tsconfig.base.json：

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

更多信息请查阅 TypeScript 文档。

预览模式检测

现在可以检测预览模式是否启用，从而只为编辑者渲染特定组件。

import { useRouter } from 'next/router';
 
function MyComponent() {
  const { isPreview } = useRouter();
  return <>{isPreview ? <h1>预览模式已启用</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 次星标

加入 GitHub Discussions 上的 Next.js 社区。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！