NextJs

How to update Next.js' old version to the latest version?

This article is full of details article how to update the nextjs old version to the new version with npm and yarn. This article is part of next.js #SeriesPart9.

Nextjs library based on the reactjs javascript library. Both libraries are open-source projects developed with javascript language.

In Nextjs, lots of updates are released from time to time. nextjs and reactjs team resolve many bugs weekly in nextjs. As developers, our responsibility is to update our library package and serve the safest and fast website to users.

How to update the library in nextjs?

There are two major javascript package managers in the market.

1. NPM
2. YARN

Both packages manage work differently to update packages locally.

NPM

Npm is a widely used package managed in javascript. There are lots of companies used to install and build packages locally.

How to update Nextjs library use to YARN command?

Using the npm outdated command, you check outdated packages locally.

npm outdated

This command checks your current working directory package—based on your package.json file.

Check the outdated global packages in npm with cli.

npm outdated --global

How to update the Nextjs library using to NPM command?

Update Nextjs package process is based on your nextjs installation.

• Globaly update nextJs

If you install nextjs globally on your laptop, use create-next-app. Then firstly, update yours create-next-app with npm.

npm update -g create-next-app

In some cases, you also update the nextjs package using the npm install command. Both commands work properly. In the install command, you install create-next-app again in your laptop.

npm install -g create-next-app

• Folder based nextJs

Secondly, you create a nextjs app using create-next-app and installing nextjs, react, and react-dom separately In a folder or directory. Now you update the package in your folder. Now you run the npm update command without --globalkeywords.

npm update

Before running the update command, ensure you have the latest version of the npm package. Otherwise, firstly update npm with the latest version. then run npm update command in your terminal or laptop.

Now npm update command run successfully in the terminal. You also verify your installation using anpm outdated command or check your package.json file.

Error

If you face an error when updating the nextjs package. This Error shows you because npm does not resolve the dependency, and the second reason, you update your npm package now, your npm binary is changed and broken. So that reason you face an error.

Now you run the following command, your problem is resolved.

npm update --force
 
or
npm update --legacy-peer-deps

Deep dive into learning more about this Error, so I recommended you, too, read these articles.

https://exerror.com/eresolve-unable-to-resolve-dependency-tree-error-when-installing-npm-packages/

https://stackoverflow.com/questions/64573177/unable-to-resolve-dependency-tree-error-when-installing-npm-packages

YARN

Yarn is a new package manager in javascript as compared to npm. Yarn also started widely used to build projects and share a project with others. Yarn also uses a package.json file to check your package installation list in your project app.

Yarn installation separately in node.js. Npm by default provided with node js package. But yarn installs separately.

Installation of yarn with npm command.

npm install --global yarn

How to update Nextjs library use to YARN command?

Firstly check the outdated package in your project using the yarn outdated command.

yarn outdated

This command checks your package based on the package.json file.

Note

Yarn does not provide global outdated package Check functionality.

How to update Nextjs library use to YARN command?

Update Nextjs package process is based on your nextjs installation.

• Globaly update nextJs

If you install nextjs globally on your laptop, use create-next-app. Then firstly, update yours create-next-app with yarn.

yarn global upgrade
or
yarn global upgrade --latest
or
yarn global upgrade <package-name>

This command upgrades your all global install package in yarn.

yarn global upgrade create-next-app

With the help of this command, you upgrade a specific package. For example, I upgrade create-next-app the package in yarn.

• Folder base nextJs

Secondly, you create a nextjs app using create-next-app and installing nextjs, react, and react-dom Spratly In a folder or directory. Now you update the package in your folder and run the yarn upgrade command without --globalkeywords.

yarn upgrade

Before running the update command, make sure you have the latest version of the yarn package. Otherwise, firstly update yarn with the latest version. Then run the yarn install command in your terminal or laptop.

Now yarn upgrade command run successfully in the terminal. You also verify your installation using yarn outdated command or check your package.json file.

Reference

CLI documentation | npm Docs

Yarn

Getting Started |. Next.js

Read the previous post

How to add an image in next.js?

How to Create Pages in Next.js?

Conclusion

I hope your update your nextjs old version to the new version very easily. If you have any questions and suggestions, please tell me in the comment section.

Read More content at Nextjs. Sign up for a free newsletter and join the nextjs community on medium.