Highlight on the new features of Next JS 13 config 2022
Tags: nextjs, javascript, react, news
Published: 2022-11-01 05:32:51

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.



1. [Turbopack.](https://dev.to/muhammadazfaraslam/highlight-on-the-new-features-of-next-js-13-config-2022-1a3i#turbo-pack)
2. [New Next JS router.](https://dev.to/muhammadazfaraslam/highlight-on-the-new-features-of-next-js-13-config-2022-1a3i#new-next-js-router)
3. [Improved Next JS Image and Font component.](https://dev.to/muhammadazfaraslam/highlight-on-the-new-features-of-next-js-13-config-2022-1a3i#improved-nextjs-image-and-font-component)
4. [Open Graph Images.](https://dev.to/muhammadazfaraslam/highlight-on-the-new-features-of-next-js-13-config-2022-1a3i#open-graph-images)

## [Turbopack](#turbo-pack)

![Turbopack next 13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywzxmunvdd17rekp2050.png)

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.



![3000 turbo comparison](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k27f1oe3yh8xdmm3pk2a.png)


![5000 turbo comparison](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03dmqumkcszj4n5dvx5k.png)


![1000 turbo comparison](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwanbdhenu4igcbi8fyy.png)


## [New Next JS router](#new-next-js-router)

![Next 13 router cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8o0lasgxw2pri5ykw608.png)

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.


![folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5giyvtig597z5ixf8e2r.png)


## [Improved Next JS Image and Font component](#improved-nextjs-image-and-font-component)

![Toolkit Next js cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8rxnll0ajgea9zzmgv3.png)

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](#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](https://nextjs.org/) via config22)

__________________________________________________________________

## Other links:

1. [How to configure React JS app on WSL2 Windows 10](https://dev.to/muhammadazfaraslam/how-to-configure-react-js-app-on-wsl2-windows-10-3d1n)
2. [Custom 'Tooltip' component using Tailwind and React Js](https://dev.to/muhammadazfaraslam/custom-tooltip-component-using-tailwind-and-react-js-186g)
3. [JavaScript: Falsy(False) and Truthy(True) values explanation with example](https://dev.to/muhammadazfaraslam/falsyfalse-and-truthytrue-values-explanation-with-example-4470)