Environment variables in NextJS

Next.js has built-in support for loading environment variables from .env.local into process.env.

1
DB_HOST=localhost
2
DB_USER=myuser
3
DB_PASS=mypassword
4

5
// you can use variables
6
HOSTNAME=localhost
7
PORT=8080
8
HOST=http://$HOSTNAME:$PORT

1
export async function getStaticProps() {
2
  const db = await myDB.connect({
3
    host: process.env.DB_HOST,
4
    username: process.env.DB_USER,
5
    password: process.env.DB_PASS,
6
  })
7
  // You cannot use destructuring, it will fail:
8
  // const { NEXT_PUBLIC_PUBLISHABLE_KEY } = process.env.
9
  // ...
10
}

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_

1
import setupAnalyticsService from '../lib/my-analytics-service'
2

3
// NEXT_PUBLIC_ANALYTICS_ID can be used here as it's prefixed by NEXT_PUBLIC_
4
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)
5

6
function HomePage() {
7
  return <h1>Hello World</h1>
8
}
9

10
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.