ReferenceError: process is not defined after upgrading to Next.js 12 from 11.x.x

Question

Getting this issue after upgrading to latest version 12 from 11.x.x

Unhandled Runtime Error: ReferenceError: process is not defined

Here is my package.json:

{
  "name": "tnhc-fe",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^2.8.2",
    "axios": "^0.23.0",
    "jwt-decode": "^3.1.2",
    "local-storage": "^2.0.0",
    "moment": "^2.29.1",
    "next": "12",
    "next-i18next": "^8.9.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.17.4",
    "yup": "^0.32.11",
    "zustand": "^3.5.13"
  },
  "devDependencies": {
    "@types/jest": "^27.0.3",
    "@types/node": "^16.11.0",
    "@types/react": "17.0.30",
    "autoprefixer": "^10.3.7",
    "eslint": "8.0.1",
    "eslint-config-next": "11.1.2",
    "jest": "^27.4.3",
    "postcss": "^8.3.9",
    "tailwindcss": "^2.2.17",
    "typescript": "4.4.4"
  }
}

Answer 1

If you are on serverside, you need to declare your variables in next.config.js:

// next.config.js

module.exports = {
  ...
  env: {
    // declare here all your variables
    BASE_URL: process.env.BASE_URL,
  }
}