next.js/examples/with-dotenv

With Dotenv example

How to use

Using create-next-app

Download create-next-app to bootstrap the example:

npx create-next-app --example with-dotenv with-dotenv-app
# or
yarn create next-app --example with-dotenv with-dotenv-app

Download manually

Download the example or clone the repo:

curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-dotenv
cd with-dotenv

Install it and run:

npm install
npm run dev

Deploy it to the cloud with now (download)

now

The idea behind the example

This example shows the most basic idea of babel replacement from multiple environment. We have 1 env variable: TEST which will be replaced in development env and in production env with different babel plugin. In local development, babel reads .env file and replace process.env.* in your nextjs files. In production env (such as heroku), babel reads the ENV and replace process.env.* in your nextjs files. Thus no more needed to commit your secrets anymore.

Of course, please put .env* in your .gitignore when using this example locally.

Troubleshooting

Environment variables not showing on the page

If for some reason the variable is not displayed on the page, try clearing the babel-loader cache:

rm -rf ./node_modules/.cache/babel-loader