In this blog, we will talk a little about how to use the environmental variables of this multifunctional technology.
What are Next.js environment variables?
Next.js, in its most recent update, comes with support for environment variables, which will allow the developer to:
- Use .env.local to load environment variables
- Expose environment variables to the browser with the prefix NEXT_PUBLIC_
Loading environment variables
Support for this type of variable is already integrated into the recent update of Next.js, this is an example using .env.local:
DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword
This loads process.env.DB_HOST, process.env.DB_USER, and process.env.DB_PASS into the Node.js environment automatically, allowing you to use them in Next.js API routes and getter methods.
How to expose environment variables to the browser
By default, environment variables are only available in the Node.js environment, this means that they will not be exposed to the browser. To achieve this, a variable must be prefixed using NEXT_PUBLIC_
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
On the Next.js website, they explain “This loads process.env.NEXT_PUBLIC_ANALYTICS_ID into the Node.js environment automatically, allowing you to use it anywhere in your code. The value will be inserted into JavaScript sent to the browser due to the NEXT_PUBLIC_ prefix. This addition happens at build time, so multiple NEXT_PUBLIC_ envs need to be set when the project is built.”
// pages/index.js
import setupAnalyticsService from '../lib/my-analytics-service'
// 'NEXT_PUBLIC_ANALYTICS_ID' can be used here as it's prefixed by 'NEXT_PUBLIC_'.
// It will be transformed at build time to `setupAnalyticsService('abcdefghijk')`.
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)
function HomePage() {
return <h1>Hello World</h1>
}
export default HomePage
Default environment variables
Only one variable is needed .env.local, but you may need to use other variables for the development environment (next dev) and production environment (next start).
“Next.js allows you to set default values in .env (all environments), .env.development (development environment) and .env.production (production environment)” they explain in a document posted on the official website.
Test phase of environment variables
A third option available for these variables is test: test, you can use this way .env.test to test the environment. Next.js will not load the .env.development or .env.production environment variables in the test environment.
There are differences between the test phase with respect to the development and production phase that the user must consider. The biggest difference to note is that .emv.local will not load as it expects the tests to produce the same results on all.
On the official page they explain "This way each test run will use the same environment defaults across different runs by ignoring your .env.local (which is meant to override the default set)".
// The below can be used in a Jest global setup file or similar for your test set-up
import { loadEnvConfig } from '@next/env'
export default async() => {
const projectDir = process.cwd()
loadEnvConfig(projectDir)
}
These are the different ways in which environment variables can be used in Next.js, one of its many features for development.
As an optimized Node.js framework, Next.js has everything a developer could need and more. Within this framework, default capabilities include making sure applications are stable and can withstand the test of time and any vulnerabilities that may come their way.
On their own official website, they define it this way “Next.js is a flexible React framework that gives you the building blocks to build fast web applications. By framework, we mean that Next.js handles the necessary tools and configuration for React and provides additional structure, features, and optimizations for your application.”
At Rootstack we have a team of Next.js experts who have been able to troubleshoot technical issues for our international customers. If you want to be part of this team, just click here and one of our recruiters will contact you.
We recommend you on video
