# Application Configuration in the Next.js Supabase SaaS Kit

> Configure your app name, URL, theme colors, and locale settings in the Next.js Supabase SaaS Kit using environment variables.

*Canonical: https://makerkit.dev/docs/next-supabase-turbo/configuration/application-configuration*

---

The application configuration at `apps/web/config/app.config.ts` defines your SaaS application's core settings: name, URL, theme, and locale. Configure these using environment variables rather than editing the file directly.

{% alert type="default" title="Configuration Approach" %}
All configuration is driven by environment variables and validated with Zod at build time. Invalid configuration fails the build immediately, preventing deployment of broken settings.
{% /alert %}

## Configuration Options

| Variable | Required | Description |
|----------|----------|-------------|
| `NEXT_PUBLIC_PRODUCT_NAME` | Yes | Your product name (e.g., "Acme SaaS") |
| `NEXT_PUBLIC_SITE_TITLE` | Yes | Browser title tag and SEO title |
| `NEXT_PUBLIC_SITE_DESCRIPTION` | Yes | Meta description for SEO |
| `NEXT_PUBLIC_SITE_URL` | Yes | Full URL with protocol (e.g., `https://myapp.com`) |
| `NEXT_PUBLIC_DEFAULT_LOCALE` | No | Default language code (default: `en`) |
| `NEXT_PUBLIC_DEFAULT_THEME_MODE` | No | Theme: `light`, `dark`, or `system` |
| `NEXT_PUBLIC_THEME_COLOR` | Yes | Light theme color (hex, e.g., `#ffffff`) |
| `NEXT_PUBLIC_THEME_COLOR_DARK` | Yes | Dark theme color (hex, e.g., `#0a0a0a`) |

## Basic Setup

Add these to your `.env` file:

```bash
NEXT_PUBLIC_SITE_URL=https://myapp.com
NEXT_PUBLIC_PRODUCT_NAME="My SaaS App"
NEXT_PUBLIC_SITE_TITLE="My SaaS App - Build Faster"
NEXT_PUBLIC_SITE_DESCRIPTION="The easiest way to build your SaaS application"
NEXT_PUBLIC_DEFAULT_LOCALE=en
NEXT_PUBLIC_DEFAULT_THEME_MODE=light
NEXT_PUBLIC_THEME_COLOR="#ffffff"
NEXT_PUBLIC_THEME_COLOR_DARK="#0a0a0a"
```

## How It Works

The configuration file parses environment variables through a Zod schema:

```typescript
const appConfig = AppConfigSchema.parse({
  name: process.env.NEXT_PUBLIC_PRODUCT_NAME,
  title: process.env.NEXT_PUBLIC_SITE_TITLE,
  description: process.env.NEXT_PUBLIC_SITE_DESCRIPTION,
  url: process.env.NEXT_PUBLIC_SITE_URL,
  locale: process.env.NEXT_PUBLIC_DEFAULT_LOCALE,
  theme: process.env.NEXT_PUBLIC_DEFAULT_THEME_MODE,
  themeColor: process.env.NEXT_PUBLIC_THEME_COLOR,
  themeColorDark: process.env.NEXT_PUBLIC_THEME_COLOR_DARK,
  production,
});
```

## Environment-Specific Configuration

Structure your environment files for different deployment stages:

| File | Purpose |
|------|---------|
| `.env` | Shared settings across all environments |
| `.env.development` | Local development overrides |
| `.env.production` | Production-specific settings |
| `.env.local` | Local secrets (git-ignored) |

**Example for development:**

```bash
# .env.development
NEXT_PUBLIC_SITE_URL=http://localhost:3000
```

**Example for production:**

```bash
# .env.production (or CI/CD environment)
NEXT_PUBLIC_SITE_URL=https://myapp.com
```

## Common Configuration Scenarios

### B2C SaaS Application

```bash
NEXT_PUBLIC_PRODUCT_NAME="PhotoEdit Pro"
NEXT_PUBLIC_SITE_TITLE="PhotoEdit Pro - Edit Photos Online"
NEXT_PUBLIC_SITE_DESCRIPTION="Professional photo editing in your browser. No download required."
NEXT_PUBLIC_SITE_URL=https://photoedit.pro
NEXT_PUBLIC_DEFAULT_THEME_MODE=system
```

### B2B SaaS Application

```bash
NEXT_PUBLIC_PRODUCT_NAME="TeamFlow"
NEXT_PUBLIC_SITE_TITLE="TeamFlow - Project Management for Teams"
NEXT_PUBLIC_SITE_DESCRIPTION="Streamline your team's workflow with powerful project management tools."
NEXT_PUBLIC_SITE_URL=https://teamflow.io
NEXT_PUBLIC_DEFAULT_THEME_MODE=light
```

## Common Pitfalls

1. **HTTP in production**: The build fails if `NEXT_PUBLIC_SITE_URL` uses `http://` in production. Always use `https://` for production deployments.
2. **Same theme colors**: The build fails if `NEXT_PUBLIC_THEME_COLOR` equals `NEXT_PUBLIC_THEME_COLOR_DARK`. They must be different values.
3. **Missing trailing slash**: Don't include a trailing slash in `NEXT_PUBLIC_SITE_URL`. Use `https://myapp.com` not `https://myapp.com/`.
4. **Forgetting to rebuild**: Environment variable changes require a rebuild. Run `pnpm build` after changing production values.

## Accessing Configuration in Code

Import the configuration anywhere in your application:

```typescript
import appConfig from '~/config/app.config';

// Access values
console.log(appConfig.name);        // "My SaaS App"
console.log(appConfig.url);         // "https://myapp.com"
console.log(appConfig.theme);       // "light"
console.log(appConfig.production);  // true/false
```

## Related Topics

- [Environment Variables](/docs/next-supabase-turbo/configuration/environment-variables) - Complete environment variable reference
- [Feature Flags](/docs/next-supabase-turbo/configuration/feature-flags-configuration) - Enable or disable features
- [Going to Production](/docs/next-supabase-turbo/going-to-production/checklist) - Production deployment checklist