What are the new features and changes in NextJs 13?

DanielNovember 2, 2022November 29, 2022

NextJs 13 was announced on the 25th of October, at Next.js Conf, marking the 6th year of the initial launch of the framework. And it brings a lot: a redesigned approach to server rendering, routing, layouts, data fetching, and more.

Let's see some of the major new features and changes in Next 13:

• the new /app folder comes with some important changes to the routing system. We can now put our CSS styles, tests, or components in the same folder as your pages. Wrote this tutorial about how to set up Next13 and start using the app folder
• data fetching has changed a lot! Things like getStaticProps or getServerSideProps are now replaced by a mix of React server components and the native fetch function
• one other big change comes with the addition of layouts as a replacement for the NextJs _app file and also new situation-specific files like loading.js or error.js
• we now have a new font system: @next/font/. It automatically optimizes fonts, by removing external network requests. This improved performance and, even better, it comes with a zero font layout shift.
• the @vercel/og library has been added to create open graph images for social cards
• the image component was improved to display images without layout shift. The new image comes with native lazy loading, optimizes files on demand for better performance, and ships less client-side JavaScript code
• the Rust based Turbopack was added as a replacement for Webpack
  and finally one small, but very welcomed change, is that the Link component does not need anymore a nested tag

Great stuff 🎉😎! I am really excited about all of these changes! You can check out the official docs page here.