Compiler infrastructure

‍

Last year, the Next.js team started the transition to get rid of javascript-based compilation by replacing Babel and Terser with their Rust compiler.

‍

This year they completed the transition by introducing Turbopack“the Rust-powered successor to Webpack” as mentioned in the website.

‍

Guillermo Rauch (CEO at Vercel) defined this new compiler architecture as  “the fastest compiler infrastructure for js and typescript projects” with a focus on “not doing the same work twice.”

‍

The improvements on bundling time are huge, mostly on larger projects, and the good news is that it works directly out of the box on Next.js 13, simply running next dev --turbo.

‍

‍

Rendering infrastructure

‍

The other significant change on Next.js 13 is the introduction of a new Next.js router.

‍

This router works in a new directory named app, replacing the pages one. To allow for incremental adoption, they keep fully supporting and maintaining the pages directory. It also includes support for nested routes by nesting folders inside each other.

‍

All the components under this new directory are now React Server Components, allowing developers to automatically adopt Server Components without requiring some extra configurations.

‍

This enables dynamic and static data fetching in every component bringing the possibility to fetch and stream data from the server while preventing large amounts of javascript and waterfalls on the client

‍

In this new router, Next.js provides some new special files to handle different tasks on each route: layout, template, error, loading & page.

‍

When thinking about these files as a UI structure, it can be represented as:

‍

‍

Next.js also brings a new data fetching model, simplifying and unifying how components get external data. We can finally forget about getServerSideProps, getStaticProps, and getInitialProps; they are not supported inside the app directory. 

‍

In this new model, it is recommended calling the fetch method directly in the component where we need the data since React will automatically cache requests with the same input in a temporary cache.

‍

Component toolkit

‍

In this category, three main changes were presented:

‍

@next/image

A powerful update on the current Image component, is presented in Next.js v10.

The improvements all across the component include native lazy loading, better performance, improved accessibility, and reduced size.

‍

@next/font

This new component will automatically optimize font management and improve privacy and performance by removing external network requests.

‍

@vercel/og - Vercel OG Image generation

A new Vercel solution for open graph images. This is a new library for generating dynamic social cards. It converts HTML and CSS into pictures up to 5x faster than existing solutions by using Vercel Edge Functions. It also includes support for using tailwind for styling content.

‍

To sum up

‍

These are the main changes presented during the conference, and for technical details, you can see Next.js 13 blog.

‍

In my opinion, this new version brings powerful features to developers in a very simple way, making some of them work out of the box. I find it very interesting that with minimal knowledge about ISR, SSG or SSR concepts you can take advantage of the benefits of these rendering techniques all in one solution.

‍

I’m also very excited to start using Turbopack and test it in real projects with the promise of saving a tremendous amount of time on each build.

‍

Finally, it’s known that it will take some time to get used to the new routing structure, but I think it will lead the projects to a more comprehensive and precise way to solve the route management.

‍

Thanks for reading, and let’s keep making great digital products!