Environment Variables

Learn how to use environment variables in your Next.js Supabase project.

The starter project comes with three different environment variables files:

.env: this is a shared environment file. Here, you can add variables shared across all the environments.
.env.development: the configuration file loaded when running the dev command

Use this file for your development configuration.

.env.production: the configuration file loaded when running the build command locally or deployed to Vercel.

Use this file for your actual project's configuration (without private keys!).

.env.test: this environment file is loaded when running the Cypress E2E tests. You would rarely need to use this.

Additionally, you can add another environment file named .env.local: this file is never added to Git and can be used to store the secrets you need during development.

<span className='block'> Never ever add secrets to your .env files. It's not safe, and you risk leaking confidential data. </span>

<span> Instead, add your secrets using your Vercel Console, or use the .env.local file during development. </span>

Makerkit provides templates for configuring your environment variables correctly and the minimum environment variables to run your local environment.

To push your project to production, you must fill these variables by creating your Supabase project and adding the required values.

Development Environment Variables

The development environment variables set your application up for the Supabase environment:

NEXT_PUBLIC_SITE_URL=
ENVIRONMENT=production
# SUPABASE
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
NEXT_PUBLIC_REQUIRE_EMAIL_CONFIRMATION=true
# STRIPE
STRIPE_WEBHOOK_SECRET=
STRIPE_SECRET_KEY=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
# EMAIL
EMAIL_HOST=
EMAIL_PORT=587
EMAIL_USER=
EMAIL_PASSWORD=
EMAIL_SENDER='MakerKit Team <info@makerkit.dev>'

Use your CI/CD to set environment variables for your production environment

Some of the variables above are secret. You must add these from your CI/CD environment:

# SUPABASE
SUPABASE_SERVICE_ROLE_KEY=
# STRIPE
STRIPE_WEBHOOK_SECRET=
STRIPE_SECRET_KEY=
# EMAIL
EMAIL_HOST=
EMAIL_PORT=587
EMAIL_USER=
EMAIL_PASSWORD=
EMAIL_SENDER='MakerKit Team <info@makerkit.dev>'

You can safely add public or non-secret variables to your .env.production file for your production environment.

Website Configuration

The following variables are used to configure your website:

DEFAULT_LOCALE

The default locale for your application. This is used by the i18next library to set the default locale for your application.

SITE_URL

The URL of your application. This is used across the application to generate links to your application.

Supabase Configuration

The following variables are used to configure your Supabase project:

NEXT_PUBLIC_SUPABASE_URL

The URL of your Supabase project. This is used by the Supabase client to connect to your Supabase project. It is a public variable.

NEXT_PUBLIC_SUPABASE_ANON_KEY

The anonymous key of your Supabase project. This is used by the Supabase client to connect to your Supabase project. It is a public variable.

SUPABASE_SERVICE_ROLE_KEY

The service role key of your Supabase project. This is used by the Supabase client to connect to your Supabase project. It is a secret variable - so please add it to your CI/CD environment and never add it to Git.

Stripe Configuration

The following variables are used to configure your Stripe project:

STRIPE_WEBHOOK_SECRET

The webhook secret of your Stripe project (also referred to as Signing Secret within the Stripe dashboard). This is used by the Stripe client to connect to your Stripe project. It is a secret variable - so please add it to your CI/CD environment and never add it to Git.

STRIPE_SECRET_KEY

The secret key of your Stripe project. This is used by the Stripe client to connect to your Stripe project. It is a secret variable - so please add it to your CI/CD environment and never add it to Git.

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY

The publishable key of your Stripe project. This is used by the Stripe client to connect to your Stripe project. It is a public variable and it's used to create the embedded checkout with the Stripe SDK.

Email Configuration

The following variables are used to configure your email provider:

EMAIL_HOST

The SMTP host of your email provider. This is used by the email client to connect to your email provider. It is a secret variable - so please add it to your CI/CD environment and never add it to Git.

EMAIL_PORT

The SMTP port of your email provider. This is used by the email client to connect to your email provider. It is a secret variable - so please add it to your CI/CD environment and never add it to Git.

EMAIL_USER

The SMTP user of your email provider. This is used by the email client to connect to your email provider. It is a secret variable - so please add it to your CI/CD environment and never add it to Git.

EMAIL_PASSWORD

The SMTP password of your email provider. This is used by the email client to connect to your email provider. It is a secret variable - so please add it to your CI/CD environment and never add it to Git.

EMAIL_SENDER

The sender of your emails. This is used by the email client to send emails to your users. It is a public variable. Use the format Sender Name <email@app.com>.