Environment variables in NextJS
Next.js has built-in support for loading environment variables from .env.local
into process.env
.
// .env.local DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword // you can use variables HOSTNAME=localhost PORT=8080 HOST=http://$HOSTNAME:$PORT
// 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 cannot use destructuring, it will fail: // const { NEXT_PUBLIC_PUBLISHABLE_KEY } = process.env. // ... }
By default all environment variables loaded through .env.local
are only available in the Node.js environment, meaning they won’t be exposed to the browser. In order to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_
// 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_ setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID) function HomePage() { return <h1>Hello World</h1> } export default HomePage
Note: .env
, .env.development
, and .env.production
files should be included in your repository as they define defaults. .env*.local
should be added to .gitignore
, as those files are intended to be ignored. .env.local
is where secrets can be stored.