close

[Solved] next.js environment variables are undefined (Next.js 10.0.5)

Hello Guys, How are you all? Hope You all Are Fine. Today I get the following error next.js environment variables are undefined (Next.js 10.0.5) in next.js. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

Table of Contents

How To Solve next.js environment variables are undefined Error ?

  1. How To Solve next.js environment variables are undefined Error?

    To Solve next.js environment variables are undefined Error This envs just works in Server Side. To access this envs in Client Side, you need to declare in the next.config.js

  2. next.js environment variables are undefined (Next.js 10.0.5)

    To Solve next.js environment variables are undefined Error This envs just works in Server Side. To access this envs in Client Side, you need to declare in the next.config.js

Solution 1

This envs just works in Server Side. To access this envs in Client Side, you need declare in the next.config.js

This way:

module.exports = {
  reactStrictMode: true,
  env: {
    BASE_URL: process.env.BASE_URL,
  }
}

Solution 2

Restarting the server worked for me.

  1. Edit & save .env.local
  2. Stop the server and restart it, npm run dev
  3. You should get an output on the next line like this:
> [email protected] dev
> next dev

Loaded env from [path]/.env.local

Solution 3

create .env.local file in the root file and next.js will automatically add those as env variables. syntax in this file should be like this:

DJANGO_API_URL=http://localhost:8000
BASE_URL=http://localhost:3000

this file is already in .gitignore

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment