Next.js 10.1

We are excited to introduce Next.js 10.1, featuring:

• 3x Faster Refresh: 200ms faster refresh with no changes necessary.
• Improved Installation Time: 58% smaller install size and 56% fewer dependencies.
• next/image Improvements: Apple Silicon (M1) Support, plus more layout and loader options.
• Next.js Commerce Shopify Integration: Flexible data layer for composable e-commerce apps.
• Custom 500 Page: Add your own logo and branding to error pages.
• Strict PostCSS Configuration Loading: Improved caching with Webpack 5.
• Support for extends in tsconfig.json: Extensible configuration for large TypeScript apps.
• Detect When Preview Mode Is Enabled: Conditionally show content when viewing previews.
• Router Methods Scroll to Top: Automatically scroll to the top, now consistent for all routing.
• Documentation Improvements: Incremental adoption, migration, and Docker deployment.

Copy link to heading3x Faster Refresh

Starting with v9.4, Next.js brought Facebook's 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.

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.

Copy link to headingImproved 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.

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.

Copy link to headingnext/image Improvements

Copy link to headingApple Silicon Support

When Next.js 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. 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 M1 MacBooks.

We're continuing to improve our WebAssembly performance by taking advantage of SIMD extensions and multi-threading.

Copy link to headingAdditional 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)
• layout=fixed: Native img behavior. (Demo)
• layout=responsive: Flexible width with fixed aspect ratio. (Demo)
• layout=intrinsic: Won't grow, but can shrink with fixed aspect ratio. (Demo)
• objectFit=cover: Background images. (Demo)

For more information, check out the layout documentation.

Copy link to headingImproved Image Optimization Support

We've expanded on the built-in image loaders 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.

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}
    />
  );
};

For more information, check out the next/image documentation.

Copy link to headingNext.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. 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 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 and try out our Shopify Demo. Support for more commerce providers is coming soon.

Copy link to headingCustom 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.

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

Copy link to headingStrict PostCSS Configuration Loading

If you're using PostCSS and Webpack 5, you can improve performance (through caching) with a new future flag.

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.

Copy link to headingSupport 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:

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

For more information, check out the TypeScript documentation.

Copy link to headingDetect When Preview Mode Is Enabled

You can now detect when Preview Mode is enabled, allowing you to render certain components only for editors.

import { useRouter } from 'next/router';
 
function MyComponent() {
  const { isPreview } = useRouter();
  return <>{isPreview ? <h1>Preview Mode Enabled</h1> : null}</>;
}

For more information, check out the Preview Mode documentation.

Copy link to headingRouter 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.

Copy link to headingDocumentation Improvements

We've also added a variety of new guides, resources, and documentation, including:

• Incrementally Adopting Next.js
• Migrating from Gatsby
• Migrating from Create React App
• Migrating from React Router
• Authentication
• Deploying with Docker

Copy link to headingCommunity

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. 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.

Copy link to headingCredits

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!