# What We're Excited About in Next.js 12 By [Paragraph](https://paragraph.com/@blog), 2021-10-29 nextjs --- *Papyrus is a blazing-fast, privacy-first, no-frills-attached platform for blogs & newsletters. [Sign up](https://papyrus.so?utm_source=papyrus&utm_medium=blogpost&utm_campaign=what_were_excited_about_next12) and start writing posts just like this one.* --- At Papyrus, we’re a heavy user of [Next.js](https://nextjs.org/). We take advantage of features like image optimization, link prefetching, and incremental static regeneration to give readers of our blogs an ultra-fast page experience (read more about all our Next optimizations [here](https://papyrus.so/@PapyrusBlog/how-we-reduced-next.js-page-size-by-3.5x-and-achieved-a-98-lighthouse-score)). So, when Next.js [announced Next.js version 12](https://nextjs.org/blog/next-12) at Next.js Conf, you can bet we were excited about all the new performance optimizations and features that come with it! This blogpost goes over a few of the things we’re excited about, and how we’re already using them (or planning to use them) at Papyrus. **Aside:** As with most Next upgrades, this was painless given the backward-compatibility and [minimal breaking changes](https://nextjs.org/blog/next-12#breaking-changes) in v12. The only thing we had to change was a bit of custom CSS targeting the `next/image` component (the generated `div` changed to a `span`); but other than that, we were up-and-running quickly. ## SWC - New Rust Compiler During development, anything that slows down the pace of actually testing your changes in the browser can become a painpoint. We don’t have a very large codebase yet, but even so, certain Next.js pages can take upwards of 10+ seconds to compile using Babel. This slows down our developers and prevents us from iterating as quickly as we’d like. Next.js 12 announced a Babel replacement - SWC - as the default compiler. It’s based on Rust, and Next claims it’s **up to 17x faster** than Babel. In our anecdotal testing we’ve certainly noticed a drastic speedup in compilation time! ## Middleware Deploying Next.js on Vercel has a ton of benefits, but also a handful of limitations compared to something like Next.js behind regular ol’ Nginx. In particular, anything involving more advanced server-side logic that runs pre-request - proxying, authentication, etc - has been challenging to do. No more! Next.js 12 supports middleware using Vercel Edge Functions, which run before the request. This opens up a slew of functionality which was not possible before, using just Next.js and Vercel without the need for a server. We intend on rewriting our authentication logic - which relies on cookies - to begin using middleware. Since we use incremental static regeneration, all of our blog post pages are just static HTML - no backends are used in the actual serving path - so we have historically not been able to (for example) check cookies pre-request in order to auth our users. We’ve had to instead check on the client-side, after the page has fully loaded (which can lead to a less-than-ideal user experience - the page fully loads, then after the auth check the URL gets redirected). Using middleware, we can now perform server-side pre-request checks like this - even for statically generated pages! \ ![](https://storage.googleapis.com/papyrus_images/763ccd68c8186c652e05e9e97e045921) ## Optimized Images Blogging platforms are image-heavy, so anything we can do to broadly reduce image size across the board will benefit bandwidth and reduce page load times. Next.js 12 announced improvements in image optimization, using a next-gen format called AVIF which is a 20% improvement over WebP. We tested this, and actually saw a greater than 20% improvement when comparing AVIF images on our homepage with WebP: \ ![AVIF](https://storage.googleapis.com/papyrus_images/43dd695a8144d577eca79f31eda2bf48) \ \ \ ![](https://storage.googleapis.com/papyrus_images/c8a277b2e8d1e8839173e9fe8a59a4de) \ Smaller images means faster loading webpages, less bandwidth, and happier users - everyone wins. ## Conclusion These are just a handful of the features we’re excited about, but this isn’t an exhaustive list by any means. Check out [the announcement blogpost](https://nextjs.org/blog/next-12) to see all the new functionality coming up in Next 12. --- *Originally published on [Paragraph](https://paragraph.com/@blog/what-we're-excited-about-in-next.js-12)*