How to use Environment Variables in Next.js?
Environment variables from.env.local can be loaded into process.env using Next.js' built-in support.
env.local
DB_HOST=localhost
DB_USER=codingninjas
DB_PASS=codingninjas101
This automatically loads the process.env.DB HOST, process.env.DB USER, and process.env.DB PASS environment variables into Node.js, allowing you to utilise them in Next.js data fetching methods and API routes.
Using getStaticProps as an example.
// pages/index.js
export async function getStaticProps() {
const db = await myDB.connect({
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASS,
})
// ...
}
You can also try this code with Online Javascript Compiler
Note: At build time, Next.js replaces process.env.* with the necessary settings to protect server-only secrets. Because process.env isn't a regular JavaScript object, you can't perform object destructuring on it. Environment variables should be referred to as process.env.PUBLISHABLE KEY rather than const PUBLISHABLE KEY = process.env.PUBLISHABLE KEY.
Next.js will automatically expand variables ($VAR) in your.env* files. This enables you to make references to other secrets, such as:
# .env
HOSTNAME=localhost
PORT=8080
HOST=http://$HOSTNAME:$PORT
If you want to utilise a variable that has a $ in its name, you must escape it like follows: \$.
Consider the following scenario.
# .env
A=codingninjas
# becomes "precodingninjas"
WRONG=pre$A
# becomes "pre$A"
CORRECT=pre\$A
How to use Environment Variables in Browsers?
By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser.
Environment variables are only available in the Node.js environment by default, which won't be visible in the browser.
You must precede a variable with NEXT PUBLIC_ to expose it to the browser.
For example:
NEXT_PUBLIC_ANALYTICS_ID=codingninjas
The process.env.NEXT PUBLIC ANALYTICS ID variable is immediately loaded into the Node.js environment, allowing you to use it anywhere in your code. Because of the NEXT PUBLIC_ prefix, the value will be inlined into JavaScript delivered to the browser. Because inlining happens at build time, all of your NEXT PUBLIC_ envs must be set before the project is constructed.
index.js
import setupAnalyticsService from '../lib/my-analytics-service'
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)
function HomePage() {
return <h1>Hello World</h1>
}
export default HomePage
You can also try this code with Online Javascript Compiler
Default Environment Variables
Only one.env.local file is required in most cases. However, for the development (next dev) or production (next start) environments, you may want to set certain defaults.
Defaults can be defined in.env (all environments),.env.development (development environment), and.env.production (production environment) in Next.js, but.env.local will always override the defaults.
Note that the files.env,.env.development, and.env.production should all be included in your repository because they set defaults. Because those files are meant to be ignored,.env*.local should be added to.gitignore. Secrets can be kept in the.env.local directory.
How to use Environment Variables in Vercel?
Environment Variables in Next.js can be specified in the Project Settings when deploying your Next.js application to Vercel.
There should be settings for all types of Environment Variables. Even Development Environment Variables – which can be downloaded to your local device afterwards.
If you've set up Development Environment Variables, you may use the following command to pull them into a.env.local file for use on your local machine:
vercel env pull .env.local
When deploying with the Vercel CLI(Command Line Interface), make sure to include a.vercelignore file that lists files that should not be uploaded; these are typically the same items listed in.gitignore.
Test Environment Variables
In addition to development and production settings, there is a third option: testing. In the same manner that you can create defaults for development and production environments, you can do the same for the testing environment with a.env.test file (though this one is not as common as the previous two).
This is important for running tests with jest or cypress, where you need to establish certain environment variables just for testing. If NODE ENV is set to test, default values will be loaded; however, you shouldn't have to do this manually because testing tools will handle it for you.
You should be aware of a minor distinction between the test environment and both development and production environments:.env.local will not be loaded because you want all tests to yield the same results. By disregarding your.env.local, every test execution will utilise the same env defaults across different executions (which is intended to override the default set).
Note that, like Default Environment Variables, the.env.test file should be included in your repository, but the.env.test.local file should not, as.env*.local files are meant to be ignored via.gitignore.
By using the loadEnvConfig function from the @next/env package while running unit tests, you can ensure that your environment variables are loaded in the same way as Next.js does.
import { loadEnvConfig } from '@next/env'
export default async () => {
const projectDir = process.cwd()
loadEnvConfig(projectDir)
}
You can also try this code with Online Javascript Compiler
Frequently Asked Questions (FAQs)
1.What is Next.js?
Next.js is a React framework that allows you to create single-page Javascript apps. This framework has various advantages for our clients' applications and our development team.
2.What are environmental variables?
The environment variable is a variable whose value is set outside of the programme, usually through the operating system or microservice capability. A name/value pair makes up an environment variable, and any number of them can be generated and referenced at any time.
3.What is the prefix we use to expose our environment variables in Next.js?
We can expose environment variables in Next.js to the browser by prefixing with NEXT_PUBLIC_.
Key Takeaways
In this article, we learned about the environment variables in Next.js. We also learnt about how to implement it and how to set them. We also learned how to expose the environment variables in Next.js to the browser. We saw what default environment variables and test environment variables are.
For more information about the react framework for frontend development, get into the entire Frontend web development course.
Happy Learning!
19+ registered 
