Next.js v13 is here

Today, October 25th, Next.js v13 was released with some amazing new features. If you missed Next.js Conf "Dynamic without limits", we have listed all the major features that have launched:

• App directory
• Turbopack
• New next/image
• New @next/font
• Improved next/link

To install the latest update, run:

New app/ Directory (beta)

In order to align with the future of React, they are improving the routing and layouts experience. This is still in beta so it is not production ready.

The app directory supports:

• Layouts: Share UI between routes while preserving state and avoiding re-renders-
• Server Components: Making server-first the default for dynamic applications
• Streaming: Display instant loading states and stream in units of UI  as they are rendered
• Support for Data Fetching: Async server components and extended fetch API enables component-level fetching

Turbopack (Alpha)

Next.js v13 brings a new Rust-based successor to Webpack. Next.js reached the limits of what was possible with JavaScript-based tooling, so it was time to go fully native.

Using Turbopack the results are:

• 700x faster updates than Webpack
• 10x faster updates than Vite
• 4x faster cold starts than Webpack

New image component

Next.js v13 introduces a powerful new image component. The new update allows you to easily display images without layout shifts and optimize files on-demand for increased performance.

The new component:

• Ships less JavaScript
• Easier to style and configure
• More accessible requiring alt tags
• Aligns with Web platform
• Faster because native lazy loading doesn't require hydration

There is a codemod which will automatically update your code from the old image component to the newly improved version.  

Run this in your console:

New font system

There is a new font system that:

• Automatically optimizes your fonts, including custom fonts
• Removes external network requests for improved privacy and performance
• Built-in automatic self-hosting for any font file
• Zero layout shift automatically using the CSS size-adjust property

This new font system allows you to use all Google Fonts with performance and privacy gains. The fonts are downloaded at build time and self-hosted with your static assets.

New link system

You now don't have to add a <a> tag as a child.

There is a codemod to automatically update:

Breaking Changes

• The minimum React version has been bumped from 17.0.2 to 18.2.0.
• The minimum Node.js version has been bumped from 12.22.0 to 14.6.0, since 12.x has reached end-of-life
• The swcMinify config property was changed from false to true.
• The next/image import was renamed to next/legacy/image
• The next/link child can no longer be an <a>
• Routes are no longer prefetched when the User-Agent is a bot
• The deprecated target option of next.config.js has been removed
• Internet Explorer support has been dropped

Conclusion

This sums up everything that is new in Next.js v13. If you want to see more posts like this then sign up as a member and get the latest posts in your inbox.