7ebff31475
Version 3 of the kit: - Radix UI replaced with Base UI (using the Shadcn UI patterns) - next-intl replaces react-i18next - enhanceAction deprecated; usage moved to next-safe-action - main layout now wrapped with [locale] path segment - Teams only mode - Layout updates - Zod v4 - Next.js 16.2 - Typescript 6 - All other dependencies updated - Removed deprecated Edge CSRF - Dynamic Github Action runner
134 lines
4.9 KiB
Plaintext
134 lines
4.9 KiB
Plaintext
---
|
|
status: "published"
|
|
label: "Application Configuration"
|
|
title: "Application Configuration in the Next.js Supabase SaaS Kit"
|
|
description: "Configure your app name, URL, theme colors, and locale settings in the Next.js Supabase SaaS Kit using environment variables."
|
|
order: 1
|
|
---
|
|
|
|
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
|