Welcome to the new era of Next JS 13. I've experienced attending config22 and what a startling presentation by Guillermo Rauch, CEO of Vercel. I believe it is bringing some exceptional new features, and all would love to work with them. Some of the main topics are mentioned below.
Turbopack
Next JS 13 is introducing Turbopack which is the fastest compiler infrastructure for JS and Typescript projects. We are moving to a world where running your app locally and making an incremental change can happen in as little as 10 milliseconds. Building for production will happen in single-digit seconds, even for large code bases. Turbopack is 10x faster updates than Vite, 4x faster cold starts than Webpack, and 700x faster updates than Webpack. Here are some visual comparisons according to the Next JS team.
New Next JS router
Next JS has introduced Layouts in the router. Previously we create a component and use it as a layout. We can either add it inside _app.js or with the help of middleware. But the new router-optimized layout issue means that all the benefits of ISR, static data fetching, service side data fetching, and even SWR are now all in one hybrid solution. Thanks to the new React primitives, we're enabling ergonomic ways to handle loading and error states, streaming UI as it's rendered, and in the future, even mutate data. Here is a visual of the file and folder structure for layout.
Improved Next JS Image and Font component
Improved image component that performs better and maintains its familiar interface. Next JS team has also reimagined how developers use fonts with a brand-new font system developed in collaboration with the chrome team.
This built-in module, not only optimizes your fonts but also removes any external request for improved privacy and performance by eliminating connection setup times to third-party hosts. The new font module can automatically avoid 99% of layout shifts caused by custom fonts and 100% of visual disruption from missing fonts.
Open Graph Images
We all know how much social sharing is important these days. This is also an important part of Social media optimization (SMO). According to a study, Facebook has the highest conversion rate, on the second it's Instagram, and then Twitter, LinkedIn, YouTube, etc.
Next 13, announcing Vercel OG image generation, a new solution for instantaneously generating dynamic social cards. This approach is five times faster than existing solutions.
(All images by Next13 via config22)
Top comments (0)