DocumentationNext.js and Supabase V2

Environment Variables in the Next.js Supabase Starter Kit

Learn how to configure environment variables in the Next.js Supabase Starter Kit.

Environment variables are defined in the .env file in the root of the apps/web package.

  1. Shared Environment Variables: Shared environment variables are defined in the .env file. These are the env variables shared between environments (e.g., development, staging, production).
  2. Environment Variables: Environment variables for a specific environment are defined in the .env.development and .env.production files. These are the env variables specific to the development and production environments.
  3. Secret Keys: Secret keys and sensitive information are not stored in the .env file. Instead, they are stored in the environment variables of the CI/CD system.
  4. Secret keys to be used locally: If you need to use secret keys locally, you can store them in the .env.local file. This file is not committed to Git, therefore it is safe to store sensitive information in it.

Core Configuration Variables

Essential variables that define your application's basic settings:

NEXT_PUBLIC_SITE_URL=https://example.com
NEXT_PUBLIC_PRODUCT_NAME=Your Product
NEXT_PUBLIC_SITE_TITLE="Your Site Title"
NEXT_PUBLIC_SITE_DESCRIPTION="Your site description"
NEXT_PUBLIC_DEFAULT_LOCALE=en

NEXT_PUBLIC_SITE_URL

The URL of your site, used for generating absolute URLs. Must include the protocol (e.g., https://) and be a valid URL.

NEXT_PUBLIC_SITE_URL=https://example.com

NEXT_PUBLIC_PRODUCT_NAME

Your product's name, used consistently across the application interface.

NEXT_PUBLIC_PRODUCT_NAME=Makerkit

NEXT_PUBLIC_SITE_TITLE

The site's title tag content, crucial for SEO and browser display.

NEXT_PUBLIC_SITE_TITLE="Makerkit - The easiest way to start your next project"

NEXT_PUBLIC_SITE_DESCRIPTION

Your site's meta description, important for SEO optimization.

NEXT_PUBLIC_SITE_DESCRIPTION="Makerkit is the easiest way to start your next project"

NEXT_PUBLIC_DEFAULT_THEME_MODE

Controls the default theme appearance. Options: light, dark, or system.

NEXT_PUBLIC_DEFAULT_THEME_MODE=light

NEXT_PUBLIC_DEFAULT_LOCALE

Sets the default language for your application.

NEXT_PUBLIC_DEFAULT_LOCALE=en

Authentication Configuration

Settings that control user authentication methods:

NEXT_PUBLIC_AUTH_PASSWORD=true
NEXT_PUBLIC_AUTH_MAGIC_LINK=false
NEXT_PUBLIC_CAPTCHA_SITE_KEY=
CAPTCHA_SECRET_TOKEN=

NEXT_PUBLIC_AUTH_PASSWORD

Enables or disables password-based authentication.

NEXT_PUBLIC_AUTH_PASSWORD=true

Enables or disables magic link authentication.

NEXT_PUBLIC_AUTH_MAGIC_LINK=false

NEXT_PUBLIC_CAPTCHA_SITE_KEY

Your Cloudflare Captcha site key for form protection.

NEXT_PUBLIC_CAPTCHA_SITE_KEY=your-captcha-site-key

CAPTCHA_SECRET_TOKEN

Your Cloudflare Captcha secret token for backend verification.

CAPTCHA_SECRET_TOKEN=your-captcha-secret-token

Settings that control the navigation and layout of your application:

NEXT_PUBLIC_USER_NAVIGATION_STYLE=sidebar
NEXT_PUBLIC_HOME_SIDEBAR_COLLAPSED=false
NEXT_PUBLIC_TEAM_NAVIGATION_STYLE=sidebar
NEXT_PUBLIC_TEAM_SIDEBAR_COLLAPSED=false
NEXT_PUBLIC_SIDEBAR_COLLAPSIBLE_STYLE=icon

NEXT_PUBLIC_USER_NAVIGATION_STYLE

Controls user navigation layout. Options: sidebar, header, or custom.

NEXT_PUBLIC_USER_NAVIGATION_STYLE=sidebar

NEXT_PUBLIC_HOME_SIDEBAR_COLLAPSED

Sets the default state of the home sidebar.

NEXT_PUBLIC_HOME_SIDEBAR_COLLAPSED=false

NEXT_PUBLIC_TEAM_NAVIGATION_STYLE

Controls team navigation layout. Options: sidebar, header, or custom.

NEXT_PUBLIC_TEAM_NAVIGATION_STYLE=sidebar

NEXT_PUBLIC_TEAM_SIDEBAR_COLLAPSED

Sets the default state of the team sidebar.

NEXT_PUBLIC_TEAM_SIDEBAR_COLLAPSED=false

NEXT_PUBLIC_SIDEBAR_COLLAPSIBLE_STYLE

Defines sidebar collapse behavior. Options: offscreen, icon, or none.

NEXT_PUBLIC_SIDEBAR_COLLAPSIBLE_STYLE=icon

UI/UX

Settings that control the UI/UX of your application:

NEXT_PUBLIC_DEFAULT_THEME_MODE=light
NEXT_PUBLIC_ENABLE_THEME_TOGGLE=true
NEXT_PUBLIC_ENABLE_SIDEBAR_TRIGGER=true

NEXT_PUBLIC_DEFAULT_THEME_MODE

Controls the default theme appearance. Options: light, dark, or system.

NEXT_PUBLIC_DEFAULT_THEME_MODE=light

NEXT_PUBLIC_ENABLE_THEME_TOGGLE

Controls visibility of the theme toggle feature.

NEXT_PUBLIC_ENABLE_THEME_TOGGLE=true

NEXT_PUBLIC_ENABLE_SIDEBAR_TRIGGER

Controls visibility of the sidebar trigger feature.

NEXT_PUBLIC_ENABLE_SIDEBAR_TRIGGER=true

Feature Flags

NEXT_PUBLIC_ENABLE_THEME_TOGGLE=true
NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_DELETION=true
NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_BILLING=true
NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS=true
NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_CREATION=true
NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_DELETION=true
NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING=true
NEXT_PUBLIC_ENABLE_NOTIFICATIONS=true
NEXT_PUBLIC_REALTIME_NOTIFICATIONS=true

NEXT_PUBLIC_ENABLE_THEME_TOGGLE

Controls visibility of the theme toggle feature.

NEXT_PUBLIC_ENABLE_THEME_TOGGLE=true

NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_DELETION

Allows users to delete their personal accounts.

NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_DELETION=true

NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_BILLING

Enables billing features for personal accounts.

NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_BILLING=true

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS

Master switch for team account functionality.

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS=true

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_CREATION

Controls ability to create new team accounts.

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_CREATION=true

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_DELETION

Allows team account deletion.

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_DELETION=true

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING

Enables billing features for team accounts.

NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING=true

Notifications

Control notification behavior:

NEXT_PUBLIC_ENABLE_NOTIFICATIONS=true
NEXT_PUBLIC_REALTIME_NOTIFICATIONS=true

NEXT_PUBLIC_ENABLE_NOTIFICATIONS

Controls the notification system.

NEXT_PUBLIC_ENABLE_NOTIFICATIONS=true

NEXT_PUBLIC_REALTIME_NOTIFICATIONS

Enables real-time notifications using Supabase Realtime.

NEXT_PUBLIC_REALTIME_NOTIFICATIONS=true

Supabase Configuration

Required variables for Supabase integration:

NEXT_PUBLIC_SUPABASE_URL=https://yourproject.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
SUPABASE_DB_WEBHOOK_SECRET=your-webhook-secret

NEXT_PUBLIC_SUPABASE_URL

Your Supabase project URL.

NEXT_PUBLIC_SUPABASE_URL=https://yourproject.supabase.co

NEXT_PUBLIC_SUPABASE_ANON_KEY

Your Supabase anonymous API key.

NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

SUPABASE_SERVICE_ROLE_KEY

Your Supabase service role key (keep this secret!).

SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

SUPABASE_DB_WEBHOOK_SECRET

Secret key for Supabase webhook verification.

SUPABASE_DB_WEBHOOK_SECRET=your-webhook-secret

Billing Configuration

NEXT_PUBLIC_BILLING_PROVIDER

Your chosen billing provider. Options: stripe or lemon-squeezy.

NEXT_PUBLIC_BILLING_PROVIDER=stripe

Stripe Configuration

Required when using Stripe:

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-publishable-key
STRIPE_SECRET_KEY=your-secret-key
STRIPE_WEBHOOK_SECRET=your-webhook-secret

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY

Your Stripe publishable key.

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-publishable-key

STRIPE_SECRET_KEY

Your Stripe secret key.

STRIPE_SECRET_KEY=your-secret-key

STRIPE_WEBHOOK_SECRET

Your Stripe webhook secret.

STRIPE_WEBHOOK_SECRET=your-webhook-secret

Lemon Squeezy Configuration

Required when using Lemon Squeezy:

LEMON_SQUEEZY_SECRET_KEY=your-secret-key
LEMON_SQUEEZY_STORE_ID=your-store-id
LEMON_SQUEEZY_SIGNING_SECRET=your-signing-secret

LEMON_SQUEEZY_SECRET_KEY

Your Lemon Squeezy secret key.

LEMON_SQUEEZY_SECRET_KEY=your-secret-key

LEMON_SQUEEZY_STORE_ID

Your Lemon Squeezy store ID.

LEMON_SQUEEZY_STORE_ID=your-store-id

LEMON_SQUEEZY_SIGNING_SECRET

Your Lemon Squeezy signing secret.

LEMON_SQUEEZY_SIGNING_SECRET=your-signing-secret

Email Configuration

Setup email functionality:

MAILER_PROVIDER=nodemailer
EMAIL_SENDER=info@yourapp.com
CONTACT_EMAIL=contact@yourapp.com # contact form email
# For Resend
RESEND_API_KEY=your-resend-api-key
# For Nodemailer
EMAIL_HOST=smtp.provider.com
EMAIL_PORT=587
EMAIL_USER=your-email-user
EMAIL_PASSWORD=your-email-password
EMAIL_TLS=true

MAILER_PROVIDER

Your email service provider. Options: nodemailer or resend.

MAILER_PROVIDER=nodemailer

EMAIL_SENDER

Default sender email address.

EMAIL_SENDER=info@yourapp.com

CONTACT_EMAIL

Email address for contact form submissions.

CONTACT_EMAIL=contact@yourapp.com

Resend Configuration

Required when using Resend:

RESEND_API_KEY=your-resend-api-key

Nodemailer Configuration

Required when using Nodemailer:

EMAIL_HOST=smtp.provider.com
EMAIL_PORT=587
EMAIL_USER=your-email-user
EMAIL_PASSWORD=your-email-password
EMAIL_TLS=true

CMS Configuration

Setup CMS functionality:

CMS_CLIENT=keystatic

CMS_CLIENT

Your chosen CMS system. Options: wordpress or keystatic.

CMS_CLIENT=keystatic

Keystatic Configuration

NEXT_PUBLIC_KEYSTATIC_STORAGE_KIND=local # local, cloud, github
KEYSTATIC_PATH_PREFIX=apps/web
NEXT_PUBLIC_KEYSTATIC_CONTENT_PATH=./content # apps/web/content
# if Github mode
NEXT_PUBLIC_KEYSTATIC_STORAGE_KIND=github
NEXT_PUBLIC_KEYSTATIC_STORAGE_REPO=makerkit/next-supabase-saas-kit-turbo-demo
NEXT_PUBLIC_KEYSTATIC_CONTENT_PATH=./content
KEYSTATIC_GITHUB_TOKEN=github_**********************************************
KEYSTATIC_PATH_PREFIX=apps/web

NEXT_PUBLIC_KEYSTATIC_STORAGE_KIND

Your Keystatic storage kind. Options: local, cloud, github.

NEXT_PUBLIC_KEYSTATIC_STORAGE_KIND=local

NEXT_PUBLIC_KEYSTATIC_STORAGE_REPO

Your Keystatic storage repo.

NEXT_PUBLIC_KEYSTATIC_STORAGE_REPO=makerkit/next-supabase-saas-kit-turbo-demo

KEYSTATIC_GITHUB_TOKEN

Your Keystatic GitHub token.

KEYSTATIC_GITHUB_TOKEN=github_**********************************************

KEYSTATIC_PATH_PREFIX

Your Keystatic path prefix.

KEYSTATIC_PATH_PREFIX=apps/web

NEXT_PUBLIC_KEYSTATIC_CONTENT_PATH

Your Keystatic content path.

NEXT_PUBLIC_KEYSTATIC_CONTENT_PATH=./content

KEYSTATIC_PATH_PREFIX

Your Keystatic path prefix.

KEYSTATIC_PATH_PREFIX=apps/web

Wordpress Configuration

WORDPRESS_API_URL

Required when using WordPress:

WORDPRESS_API_URL=https://your-wordpress-site.com/wp-json

Best Practices 🔑

  1. Environment File Structure
    • .env: Shared, non-sensitive variables
    • .env.development: Development-specific settings
    • .env.production: Production-specific settings
    • .env.local: Local sensitive variables (git-ignored)
  2. Security Considerations
    • Never commit secret keys
    • Use CI/CD environment variables for sensitive data
    • Rotate keys regularly