App Configuration Settings

Application-level configuration controls your app's branding, metadata, and core settings. These values are used throughout the application for consistent branding and behavior.

Configuration Location

Primary configuration is in environment variables (apps/web/.env):

# apps/web/.env
NEXT_PUBLIC_PRODUCT_NAME="Makerkit"
NEXT_PUBLIC_SITE_URL="http://localhost:3000"
NEXT_PUBLIC_DEFAULT_LOCALE="en"
NEXT_PUBLIC_DEFAULT_THEME_MODE="light"
NEXT_PUBLIC_APP_HOME_PATH=/dashboard

Core Application Settings

Product Name

The name of your application, displayed in:

• Page titles
• Navigation headers
• Email templates
• Meta tags
• Application home path

# .env
NEXT_PUBLIC_PRODUCT_NAME="Your SaaS Name"

Usage in code:

import { appConfig } from '@config/app.config';
// Access product name
console.log(appConfig.name); // "Your SaaS Name"

Site URL

The base URL of your application:

# Development
NEXT_PUBLIC_SITE_URL="http://localhost:3000"
# Production
NEXT_PUBLIC_SITE_URL="https://yourdomain.com"

Important: Must NOT include trailing slash.

Used for:

• Generating absolute URLs
• Email links
• Social media previews
• OAuth redirects
• Canonical URLs

Localization Settings

Default Locale

Set the default language for your application:

NEXT_PUBLIC_DEFAULT_LOCALE="en"  # English
# NEXT_PUBLIC_DEFAULT_LOCALE="es"  # Spanish
# NEXT_PUBLIC_DEFAULT_LOCALE="fr"  # French

Supported locales are defined in your i18n configuration. Please refer to the internationalization documentation for more information.

Theme Configuration

Default Theme Mode

Choose the default color scheme:

NEXT_PUBLIC_DEFAULT_THEME_MODE="light"  # Light theme
# NEXT_PUBLIC_DEFAULT_THEME_MODE="dark"   # Dark theme
# NEXT_PUBLIC_DEFAULT_THEME_MODE="system" # Follow system preference

Options:

• light - Always light theme
• dark - Always dark theme
• system - Match user's OS preference

Users can override this in their settings.

App Home Path

The path to the application home page (behind authentication):

NEXT_PUBLIC_APP_HOME_PATH=/dashboard

This is customizable as you may want to change this to a different path, e.g. /home or /app. Since we need to use this path in various code paths, this environment variable allows you to change it without having to change the code.

Contact Information

Email Sender

The "From" address for outgoing emails:

EMAIL_SENDER="Your App <noreply@yourdomain.com>"

Format: Name <email@example.com>

Best practices:

• Use a no-reply address for automated emails
• Use a monitored address for support emails
• Ensure domain is verified with your email provider

For a detailed guide on how to setup email sending, please refer to the email documentation.

Per-Page Configuration

Override global configuration for specific pages:

// apps/web/app/[locale]/about/page.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
  title: 'About Us',
  description: 'Learn more about our company and mission.',
  openGraph: {
    title: 'About Us - Your SaaS',
    description: 'Learn more about our company and mission.',
    url: '/about',
  },
};
export default function AboutPage() {
  return <div>About Us</div>;
}

Dark Theme Default

# .env
NEXT_PUBLIC_DEFAULT_THEME_MODE="dark"

Next: Environment Variables →