How to setup the environment variable in Next.js

Taimoor Sattar

The environment variables are the secrets that you don’t want to share in public. We need to create the environment variable that is accessible to both the client and server-side function in Next.js

For this, create a .env file that is load initially when the next.js run with command build or in development. Also, You can specify .env.local (if you are working locally on your system). In the .env file specify your environment variable as below:

REACT_APP_BACKENDURL=http://localhost:8080

Now, the REACTAPPBACKENDURL environment variable will load during the build and development process. But… It is only accessible in server-side function in Next.js, not client-side.

For a client-side environment variable, create a file next.config.js. In the next.config.js file specify your environment variable as below.

module.exports = {
    env: {
        REACT_APP_BACKENDURL: process.env.REACT_APP_BACKENDURL
    },
  }

Now, your environment variable is set up both on the client and server-side of Next.js. You just need to restart the server with the command using npm run dev, or npm run build.

About the Author

Written by Taimoor Sattar I'm Taimoor Sattar, full-stack developer. I've experience to develop websites in JavaScript, Node and CSS. But, better I am a problem solver. I used to break down large chunck of problem into small puzzle pieces. You should follow them on Twitter. You can contact me on this page.