A new version of Next.js has been released, featuring some great improvements for performance and usability, as well as some interesting new features, which I’ll talk you through in this article.
Important features in Next.js 13 are
- New app/ Directory
- Turbopack – A new module bundler to speed up your apps
- next/image – Some changes to the API to simplify its usage
- next/font – A new way to load and optimise your fonts
- next/link – Some welcome updates to make the API for the link component a bit shorter
The New “app/” Directory
If you’re familiar with routing in Next.js, you’re probably used to its file-system based routing approach, where it matches pages using their file path within your pages/ folder
Next.js 13 has introduced a new, similarly, file-system based routing approach, which uses React Server Components. These are very similar to Next.js’ server-side props but built into the components.
The aim with these is to shift more of the rendering to the server, to help reduce the amount of JavaScript sent to the client, and speed up your app.
Everything inside your pages/ folder will still work the same, and it’s up to you if you want to opt into the new app/ functionality. It’s in beta at the moment, so if you’re cautious, you might want to stick with the pages/ folder for the time being.
next/image
In a previous post on images in Next.js, we spoke about Next.js’ previous approach to images, and the experimental new Image component they planned to move to. With the new release of Next.js, the more powerful experimental version of the Image component is now the default, and the old image component has been moved to “next/legacy/image”
The changes that come with this upgrade are:
- Styling is now more in-line with a regular HTML img element, making it easier
- Uses less client-side JavaScript
- Requires “alt” tags by default (to improve accessibility)
next/link
Next.js’ link component has been simplified. Previously, you had to manually add an <a> element as a child inside the component. This was to give you some flexibility over what element the link rendered. This has been changed so that the Link component always renders an <a> element, to simplify most use cases.
next/font
Next.js 13 introduces a new font system, that provides you with easy access to all the fonts stored in Google fonts. These get downloaded when you build your app, so no requests get sent to Google client-side. This helps with speed and performance since the fonts get stored locally. Next.js also includes automatic optimization for fonts, similar to how it optimises images with its Image component.
Previously, depending on your style system, you might have something like this in your CSS to import the font:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');Now you can import any fonts from Google fonts inside your JavaScript:
import { Inter, Rubik } from '@next/font/google';
const title = Rubik();
const text = Inter();
function MyContent() {
return (
<div>
<h1 className={title.className}>New Features in Next.js 13</h1>
<p className={text.className}>
A new version of Next.js has been released, featuring some great
improvements for performance and usability, as well as some
interesting new features, which Ill talk you through in this
article.
</p>
</div>
);
}Any fonts you use are imported when you build your app, meaning it doesn’t send any requests to Google after this.
Turbopack
If you’re unfamiliar with the inner workings of Next.js, you might not know about Webpack. Webpack is a module bundler for JavaScript, that bundles your app for the browser, handling all the dependencies from your JavaScript, to images and other media you import.
In an effort to improve performance, Next.js 13 has decided to move to Turbopack, a similar bundler created by the people behind Next.js, Vercel, and the creator of Webpack. Vercel have quoted speed increases of 700x faster than Webpack, so hopefully, you should notice this when starting your apps in Next.js 13.
Conclusion
This was an introduction to the cool new features being introduced in Next.js 13. It’s a great new release with some much welcome changes. Feel free to leave a comment below if you liked this article, or with your favourite new feature introduced in Next.js 13.
💬 Leave a comment