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
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.
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
You can update the dependencies by running the following command:
npx npm-check-updates -u
Then, you can install the updated packages by running the following command:
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.
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.
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