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
/appfolder 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
getServerSidePropsare now replaced by a mix of React server components and the native
- 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
- 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.
@vercel/oglibrary has been added to create open graph images for social cards
- 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.