Naming & Branding

Learn how to change the app name, description, and metadata throughout your application.

App Name and Description

The app name and description are used throughout the application. Update them in the configuration file:

config/app.config.ts

export const appConfig = {
  appName: 'Your App Name',
  description: 'A fantastic SaaS to make your life easier.',
  baseUrl: 'https://yourdomain.com'
  // ...
};

This configuration is used in:

Navigation and headers
Email templates
SEO metadata
Social sharing

Metadata

The metadata in app/layout.tsx automatically uses values from appConfig:

app/layout.tsx

import { appConfig } from '@/config/app.config';

export const metadata: Metadata = {
  metadataBase: new URL(appConfig.baseUrl),
  title: {
    absolute: appConfig.appName,
    default: appConfig.appName,
    template: `%s | ${appConfig.appName}`
  },
  description: appConfig.description,
  openGraph: {
    type: 'website',
    locale: 'en_US',
    siteName: appConfig.appName,
    title: appConfig.appName,
    description: appConfig.description
  },
  twitter: {
    card: 'summary_large_image',
    title: appConfig.appName,
    description: appConfig.description
  }
};

Package.json

Update the name and description in package.json:

package.json

{
  "name": "your-app-name",
  "version": "1.0.0",
  "description": "Your app description",
  "author": "Your Name",
  "license": "MIT"
  // ...
}

Environment Variables

The baseUrl in appConfig uses getBaseUrl() which reads from NEXT_PUBLIC_SITE_URL if set, otherwise falls back to the request URL. You can set it in your .env:

.env

NEXT_PUBLIC_SITE_URL=https://yourdomain.com

Email Branding

Update email templates to reflect your branding. Email templates are located in lib/email/templates/:

lib/email/templates/welcome-email.tsx

export function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to Your App Name!</Preview>
      <Body>
        <Container>
          <Heading>Welcome to Your App Name!</Heading>
          <Text>Hi {name},</Text>
          <Text>Welcome to Your App Name! We're excited to have you.</Text>
        </Container>
      </Body>
    </Html>
  );
}