# Environment Variables

Sneat comes with support for environment variables, which allows you to use .env to load the environment variables.


We recommend you to read the official guide (opens new window) given by Next.js for using environment variables.

# Loading Environment Variables

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

An example .env.local:


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 data fetching methods (opens new window) and API routes (opens new window).

For example, using getStaticProps (opens new window):

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

# Exposing Environment Variables to the Browser

By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser.

In order to use an environment variable inside a component and to expose a variable to the browser, you have to prefix the variable with NEXT_PUBLIC_. For example:



Do not store any secrets (such as private API keys or passwords) in the public variables! These environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

# Private Variables

Having access to the NODE_ENV is also useful for performing actions conditionally:

if (process.env.NODE_ENV !== 'production') {

Read more nextjs official documentation for more info on environment variables from here (opens new window).

# Environment variables used in the template

We have use the fake-db and fake-db API calls are not supported to access the environment variables. Hence, we have used NEXT_PUBLIC prefix with our environment variables. You can find the environment variables' file .env.development in the root of the project. The environment variables that we have used in the .env.development file are as follows:


Make sure to replace JWT secrets and token with your actual values and it's advisable to remove the NEXT_PUBLIC prefix if you are using the Next.js data fetching method or API routes.

Last Updated: 6/22/2023, 7:12:49 AM