Versioning can be a nightmare to deal with, especially for new software engineers. In this article, we’ll take a look at how you can check the version of NextJS in your project and how you can update it
NextJS version
The heart of every NextJS project is the package.json file. It lists all the dependencies used in the application. If you pay attention to the property dependencies, you will be able to see that next is one of them.
{
"name": "upmostly-nextjs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "12.1.5",
"react": "18.0.0",
"react-dom": "18.0.0"
},
"devDependencies": {
"eslint": "8.13.0",
"eslint-config-next": "12.1.5"
}
}
From this, we can deduce that my version of NextJS is 12.1.5
You may be wondering why does the version number look so weird? That’s because we are using the semantic versioning policy in the format of X.Y.Z, where
- X changes during a major, often breaking change
- Y changes during minor patches and updates
- Z changes during critical bug fixes
Updating NextJS version
We can downgrade our NextJS version by running the below command. Remember to substitute the relevant versions, which in my case will be 11 nad 17.
$ npm install --save next@<version> react-dom@<version>
{
"name": "upmostly-nextjs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "^11.1.4",
"react": "18.0.0",
"react-dom": "^17.0.2"
},
"devDependencies": {
"eslint": "8.13.0",
"eslint-config-next": "12.1.5"
}
}
As you can see, we have successfully downgraded the versions.
To update the NextJS to the newest version, which at the time of writing this article is 12.1.5, you need to execute the below command.
$ npm install next@latest
Now you can see that my dependencies section of the package.json has been successfully updated.
{
"name": "upmostly-nextjs",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "^12.1.5",
"react": "18.0.0",
"react-dom": "18.0.0"
},
"devDependencies": {
"eslint": "8.13.0",
"eslint-config-next": "12.1.5"
}
}
💬 Leave a comment