As a Next.js developer, it's important to keep your project up to date with the latest version. That's because the Next.js team is constantly working to improve the framework by adding new features and fixing bugs. By updating Next.js, you can expect a better developer experience and a more secure application.
In version 13, Next.js has added a new app folder to the project structure. It allows you to have nested layouts, server components, Streaming, etc. in Next.js. Next.js also introduces a new image component that ships with less JavaScript and uses the native lazy loading.
Before we can enjoy these new features of Next.js 13, we need to update our project. And, in this article, I'll show you how to automatically update your Next.js project to version 13 from the command line. With the right tool, the process can be straightforward.
Update NPM packages
First, you need to update the project dependencies in your package.json file. You can manually go through the file and update the version of each package one by one. But, it's a tedious process and can take a lot of time.
Instead, you can use the npm-check-updates package to update all the dependencies in your package.json file. This package will check for the latest version of each dependency and update the version in your package.json file.
You can update the dependencies by running the following command:
npx npm-check-updates -uThen, you can install the updated packages by running the following command:
npm installUpdate the source code
In this article, we'll focus on the source code related to Next.js 13. So, we'll skip the other source code changes related to other packages.
Most features from Next.js 13 are backward compatible. But, there are still some breaking changes that you need to fix in your source code.
Remove <a> tag in <Link> component
In Next.js 13, the <Link> component no longer supports the <a> tag. So, you need to remove the <a> tag from the <Link> component. You can manually go through the source code and remove the <a> tag. Or, you can use the next-codemod package to automatically do the job for you by running the following command:
npx @next/codemod new-link .Now, without the <a> tag, the <Link> is much simpler and cleaner.
Enjoy Next.js 13 new features
After updating the package.json file and the source code, you can enjoy the new features from Next.js 13. You can check the Next.js release notes for more information about the new features.
In Next.js, you can use the new image component to optimize your images. If your codebase already uses the <Image> component from next/image, you'll automatically get the new image component without any changes.
Another feature I like in Next.js 13 is the new font system with @next/font. It allows you to use any font with great performance.
Finally, you can use the new app folder from Next.js 13. But, for your information, the feature is still in beta and not recommended for production. As soon as it's stable, I'll write another article to show how to use the new Next.js structure with the app folder.
