--- title: Next.js 10.1 description: "Next.js 10.1 introduces 3x faster refresh, 58% smaller install size, 56% less dependencies, WebAssembly Image Optimization, improved next/image support, and more!" url: "https://nextjs.org/blog/next-10-1" publishedAt: March 29th 2021 authors: - Belén Curcio - JJ Kasper - Joe Haddad - Lee Robinson - Luis Alvarez - Shu Ding - Steven - Tim Neutkens --- We are excited to introduce Next.js 10.1, featuring: - **[3x Faster Refresh](#3x-faster-refresh)**: 200ms faster refresh with no changes necessary. - **[Improved Installation Time](#improved-installation-time)**: 58% smaller install size and 56% fewer dependencies. - **[`next/image` Improvements](#nextimage-improvements)**: Apple Silicon (M1) Support, plus more layout and loader options. - **[Next.js Commerce Shopify Integration](#nextjs-commerce-shopify-integration)**: Flexible data layer for composable e-commerce apps. - **[Custom 500 Page](#custom-500-page)**: Add your own logo and branding to error pages. - **[Strict PostCSS Configuration Loading](#strict-postcss-configuration-loading)**: Improved caching with Webpack 5. - **[Support for `extends` in `tsconfig.json`](#support-for-extends-in-tsconfigjson)**: Extensible configuration for large TypeScript apps. - **[Detect When Preview Mode Is Enabled](#detect-when-preview-mode-is-enabled)**: Conditionally show content when viewing previews. - **[Router Methods Scroll to Top](#router-methods-scroll-to-top)**: Automatically scroll to the top, now consistent for all routing. - **[Documentation Improvements](#documentation-improvements)**: Incremental adoption, migration, and Docker deployment. ## 3x Faster Refresh Starting with [v9.4](https://nextjs.org/blog/next-9-4), Next.js brought Facebook's [Fast Refresh](/docs/architecture/fast-refresh) into open-source for instantaneous feedback on edits made to your React components. This means Next.js only updates code in the file you edited, and only re-renders that component, without losing component state. This includes styles (inline, CSS-in-JS, or CSS/Sass Modules), markup, event handlers, and effects (via `useEffect`). Today, we're making it **200ms faster** on every edit **without any code changes on your side**. On average, this makes Fast Refresh 3x faster. Want even faster performance and better build times? Opt-in to Webpack 5 today with a new `future` flag.This flag is a release candidate (RC) and Webpack 5 will become the default soon. After you've enabled this flag, please [share any feedback with us](https://github.com/vercel/next.js/discussions/23498). ```js filename="next.config.js" module.exports = { future: { webpack5: true, }, }; ``` To learn more about how Webpack 5 is being rolled out to your application in a backward-compatible way, check out [the documentation](/docs/messages/webpack5). ## Improved Installation Time We've optimized Next.js' dependency graph to decrease install time and dependency size. It's now faster than ever to create a Next.js project, both locally and in your CI/CD process. | | 10.0 | 10.1 | delta | | ------------------------- | ------ | ------ | ----------- | | Average installation time | ~15s | ~5s | 3.0x faster | | Installation size | 96.5MB | 39.9MB | 58% smaller | | Number of dependencies | 424 | 187 | 56% smaller | As part of our goal to optimize dependencies, we also updated and/or replaced npm packages that were marked as deprecated by their authors – even when they were deeply nested in the dependency tree. A fresh install of Next.js 10.1 will now result in no package warnings. ## `next/image` Improvements ### Apple Silicon Support When [Next.js 10](https://nextjs.org/blog/next-10) was released, Image Optimization was powered by a native dependency. This led to a slower installation time, with native dependencies consuming 50% of Next.js' total install size. Further, this removes post-install running scripts and causing on-demand compilation. We're excited to share Automatic Image Optimization through `next/image` is now powered by [WebAssembly](https://web.dev/squoosh-v2/). This optimization works out of the box using `next dev` and `next start`. By using WASM, we've reduced install size by ~30MB and **added support for [Apple Silicon](https://www.apple.com/mac/m1/) M1 MacBooks**. We're continuing to improve our WebAssembly performance by taking advantage of [SIMD](https://v8.dev/features/simd) extensions and multi-threading. #### Additional Layouts Based on your feedback, we've added a variety of new layouts and options for `next/image`: - `layout=fill`: You don't need to provide `width` and `height`. ([Demo](https://image-component.nextjs.gallery/layout-fill)) - `layout=fixed`: Native `img` behavior. ([Demo](https://image-component.nextjs.gallery/layout-fixed)) - `layout=responsive`: Flexible width with fixed aspect ratio. ([Demo](https://image-component.nextjs.gallery/layout-responsive)) - `layout=intrinsic`: Won't grow, but can shrink with fixed aspect ratio. ([Demo](https://image-component.nextjs.gallery/layout-intrinsic)) - `objectFit=cover`: Background images. ([Demo](https://image-component.nextjs.gallery/background)) For more information, check out the [`layout` documentation](/docs/pages/api-reference/components/image#layout). #### Improved Image Optimization Support We've expanded on the [built-in image loaders](/docs/pages/building-your-application/optimizing/images#loader) for `next/image` with the ability to add any custom loader. By using the new `loader` prop, you can **optimize images with any provider or CDN**. ```jsx filename="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 ( Picture of the author ); }; ``` For more information, check out the [`next/image` documentation](/docs/pages/api-reference/components/image#loader). ## Next.js Commerce Shopify Integration E-commerce is one of the fastest-growing industries adopting Next.js. Companies like Apple, Wal-Mart, McDonald's, and Nike trust Next.js. We wanted to give you a high-performance starting point for building e-commerce applications, so we released [Next.js Commerce](https://nextjs.org/commerce). After thousands of requests for Shopify, we've updated Next.js Commerce with a **provider-agnostic UI** — enabling you to bring any headless e-commerce solution of your choice. Switching between providers is a [single-line change](https://github.com/vercel/commerce#configuration) in your configuration. We've also created a Features API, allowing you to toggle functionality based on your use case – all while retaining best-in-class performance. With a few clicks, Next.js developers can clone, deploy, and fully customize their own e-commerce store. Learn more at [nextjs.org/commerce](https://nextjs.org/commerce) and try out our [Shopify Demo](https://shopify.demo.vercel.store/). Support for more commerce providers is coming soon. ## Custom 500 Page You can now create a custom `pages/500.js` to add your own logo and branding when displaying errors. Similar to `pages/404.js`, this file is statically generated at build time. ```jsx filename="pages/500.js" export default function Custom500() { return

500 - Server-side error occurred

; } ``` ## Strict PostCSS Configuration Loading If you're using PostCSS and Webpack 5, you can improve performance (through caching) with a new `future` flag. ```js filename="next.config.js" module.exports = { future: { webpack5: true, strictPostcssConfiguration: true, }, }; ``` Try it out today and let us know your feedback. For more information, check out the [PostCSS Config documentation](/docs/pages/building-your-application/configuring/post-css). ## Support for `extends` in `tsconfig.json` You can now use `extends` in the `tsconfig.json` used by Next.js to extend from a different `tsconfig.json` in your project. For example, you can extend from a `tsconfig.base.json` in your project as follows: ```json filename="tsconfig.json" { "extends": "./tsconfig.base.json" } ``` For more information, check out the [TypeScript documentation](/docs/pages/building-your-application/configuring/typescript). ## Detect When Preview Mode Is Enabled You can now detect when Preview Mode is enabled, allowing you to render certain components only for editors. ```jsx filename="components/MyComponent.js" import { useRouter } from 'next/router'; function MyComponent() { const { isPreview } = useRouter(); return <>{isPreview ?

Preview Mode Enabled

: null}; } ``` For more information, check out the [Preview Mode documentation](/docs/pages/building-your-application/configuring/preview-mode). ## Router Methods Scroll to Top When navigating using `next/link`, Next.js will automatically scroll to the top. With Next.js 10.1 `router.push` and `router.replace` will also automatically scroll to the top to match the `next/link` behavior. You can opt-out of the automatic scrolling using the `scroll` option. For more information, check out the [`next/router` documentation](/docs/pages/api-reference/functions/use-router). ## Documentation Improvements We've also added a variety of new guides, resources, and documentation, including: - [Incrementally Adopting Next.js](/docs/migrating/incremental-adoption) - [Migrating from Gatsby](/docs/migrating/from-gatsby) - [Migrating from Create React App](/docs/app/building-your-application/upgrading/from-create-react-app) - [Migrating from React Router](/docs/migrating/from-react-router) - [Authentication](/docs/pages/building-your-application/routing/authenticating) - [Deploying with Docker](/docs/pages/building-your-application/deploying#docker-image) ## Community We're excited to see the continued growth in Next.js adoption: - We have had over **1,540** independent contributors, with over **240** new contributors since the 10.0 release - On GitHub, the project has been starred over **64,950** times. Join the Next.js community on [GitHub Discussions.](https://github.com/vercel/next.js/discussions) Discussions is a community space that allows you to connect with other Next.js users and freely ask questions or share your work. You can also join the official [Next.js Discord](https://nextjs.org/discord). ### Credits We are thankful to our community, including all the external feedback and contributions that helped shape this release. This release was brought to you by the contributions of: @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, and @scottmacdonnell!