Next.js 10.1 | Next.js

Back to BlogMonday, March 29th 2021Next.js 10.1Posted byBelén Curcio@okbelJJ Kasper@_ijjkJoe Haddad@timer150Lee Robinson@leerobLuis Alvarez@luis_fadesShu Ding@shuding_Steven@styfleTim Neutkens@timneutkensWe 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. 3x 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. next.config.jsmodule.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. 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.010.1deltaAverage installation time~15s~5s3.0x fasterInstallation size96.5MB39.9MB58% smallerNumber of dependencies42418756% 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 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. 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) 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. Improved 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. components/my-image.jsimport 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. 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. 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. Lighthouse metrics for Next.js Commerce around the globe. 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. 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. pages/500.jsexport default function Custom500() { return <h1>500 - Server-side error occurred</h1>; } Strict PostCSS Configuration Loading If you're using PostCSS and Webpack 5, you can improve performance (through caching) with a new future flag. next.config.jsmodule.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. 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: tsconfig.json{ "extends": "./tsconfig.base.json" } For more information, check out the TypeScript documentation. Detect When Preview Mode Is Enabled You can now detect when Preview Mode is enabled, allowing you to render certain components only for editors. components/MyComponent.jsimport { 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. 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. Documentation 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 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. 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. 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!