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"
  }
}

👋 Hey, I'm Dawid Budaszewski

Hello! I'm Dawid. I'm a full-stack developer with a couple of years of experience under my belt. I spent most of my career working with React. I also built reacterry.com, an online portal with React coding challenges.