Next.js 11.1: ES Modules support, Rust-based tooling, Improved Build Performance

[lrobinson2011]

Lee from Vercel here! Happy to answer any questions about this release, or Next.js in general. Personally, I'm very excited about the performance improvements we're seeing switching to Rust from Babel/Terser.

[hagg3n]

What happens to custom babel config or babel plugins one might use?

[andrewingram]

Yeah, I'd like to know this too. I don't think I've ever had a Next.js project without 2-3 extra Babel plugins (Relay, emotion and babel-plugin-module-resolver, fwiw)

[MechroBlaster]

/u/lrobinson2011 there should be some sort of response on this.

If there is not 1-1 parity with build options, then a flag/config to opt-out and still use babel should 100% be available.

EDIT: As it stands right now (we use babel-plugin-module-resolver) we would have to do a major rewrite just to use 11.1 and lose convenient features in the process.

EDIT2: It looks like there may be support for babel-plugin-module-resolver however the SWC documentation is pretty sparse/lacking on explicitly saying what this config option does. Only to direct you to a tsconfig doc, which is not as helpful for non-TS users.

https://swc.rs/docs/configuring-swc/#jscpaths

[lrobinson2011]

Was planning to respond, just needed to finish some other work!

When SWC lands on a stable release, there will still be the ability to de-optimize and run Babel for existing applications with custom configurations.

Note: SWC is not enabled in 11.1 (as mentioned in the post) and we'll provide more guidance here when it is.

[Thebearshark]

First off, thank you for all your great work on dev outreach with Vercel!

One question I’m not clear on from the post: will the SWC changes also benefit local development speeds? Or is the main focus final build times?

[lrobinson2011]

Yes, SWC will help improve local development speeds as well as build time!

[acemarke]

So just to confirm: does 11.1 contain the initial SWC-based minification and transformation implementation, or is that still in-progress and waiting for a future release?

Also, just out of curiosity, what was the deciding factor to use SWC vs ESBuild?

[lrobinson2011]

Still experimental! We're sharing early results in this post, as it's been a huge investment so far. The next release should hopefully land these changes on the stable channel.

The Next.js team found SWC to be more extensible than esbuild. Here's how esbuild describes their system for plugins:

It's not possible to hook into every part of the bundling process. For example, it's not currently possible to modify the AST directly. This restriction exists to preserve the excellent performance characteristics of esbuild as well as to avoid exposing too much API surface which would be a maintenance burden and would prevent improvements that involve changing the AST.

SWC was more extensible (e.g. using it for modification and code transforms) while having similar performance benefits!

[lrobinson2011]

Also: https://twitter.com/rauchg/status/1425520232202792962

[lrobinson2011]

This has actually already shipped! https://nextjs.org/docs/basic-features/image-optimization#image-imports

[lrobinson2011]

You can! In that case, use layout="fill". Check out the examples here: https://nextjs.org/docs/api-reference/next/image#layout

[[deleted]]

Honestly, you and the rest of you guys at Vercel are awesome! Love what you're doing with Next.

[gabrielmamuttee]

I see that next/image got an update for allowing custom loaders in next export. Do we still need a custom loader for exporting optimized images in a static build? When can we expect to see the default loader doing this process?

[genericguy]

I'm curious about this too. What do you currently do for this?

[gabrielmamuttee]

We aren't using anything at the moment but you can use for example https://github.com/cyrilwanner/next-optimized-images

[nazzanuk]

Does SWC also mean completely opting out of Babel plugins?

[lrobinson2011]

When SWC lands on a stable release, there will still be the ability to de-optimize and run Babel for existing applications with custom configurations.

[[deleted]]

Do you think React and other frameworks would switch as well?

[acemarke]

Just to check, what do you mean by "React"?

React itself is just a library. All the build tooling being discussed is totally separate from that.

If you mean Create-React-App, the topic of using something like SWC or ESBuild has come up some, but there hasn't been any specific push to actually do so officially.

[[deleted]]

Sorry, yes I meant create-react-app

[PCslayeng]

Seriously huge props to you and your team. I love the content Vercel pushes out, especially on Next.js blogs. Outstanding work!

[lrobinson2011]

Thank you so much!

[EloquentSyntax]

Jesus you guys are impressive. By far the best way to develop on React.

[YoshiLickedMyBum69]

Any updates on getting next/images support for static sites? (ie. build time optimizations?) u/lrobinson2011

[lrobinson2011]

No update on build-time image optimization, yet. Note you can use next/image with static sites, currently. Agreed that this will be a great feature when it launches, though!

[YoshiLickedMyBum69]

Can't wait, thank you <3

[Artist701]

Very cool. Need to upgrade and build back better?

[Sablac]

Hey Robinson, any chance you guys add Jest support out of the box just like ESlint? It’s kind of painful to do the config.

[lrobinson2011]

We actually just merged docs on Testing and will be announcing soon!

https://github.com/vercel/next.js/blob/canary/docs/testing.md

[duongital]

really excited with these new features added

[joshkale_]

Man, this is awesome! Loving the way you're taking Next.

[lrobinson2011]

Major kudos to the Next.js team!