Nextjs
Published in

Nextjs

NextJs

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

This article is full 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, serve the safest and fast website to users.

How to update the library in nextjs?

There are two major javascript packages 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 Nextjs library use 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 base 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, make sure 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 npm 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.

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.

--

--

--

Nextjs Publication is an unofficial publication of Nextjs. Our goal is to bring beginners and pro developer in one place, and everybody understands the basic concept of next.js.

Recommended from Medium

React Native — Background Location Tracking without Timeout and with App killed

From vue-class-component to Composition API

This is driving me crazy!

React Native file storage in AWS S3 Bucket.

MDN學習紀錄20201222

Multi-project setup for Angular and Ionic applications

Multi-projects setup for Angular and Ionic applications

What is TensorFlow.js

Logo by TensorFlow

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/

More from Medium

Next.js - what is it and why do we use it?

React Hook Form — Conditional Form Fields with Chakra UI

How to configure EsLint in Nextjs?

How to configure EsLint in Nextjs By Rajdeep Singh

Convert your Reactjs code into Nextjs