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/site.ts

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

This configuration is used in:

Navigation and headers
Email templates
SEO metadata
Social sharing

Metadata

Update the metadata in app/layout.tsx for SEO and browser display:

app/layout.tsx

export const metadata: Metadata = {
  title: {
    default: 'Your App Name',
    template: '%s | Your App Name'
  },
  description: 'Your app description',
  keywords: ['your', 'keywords'],
  authors: [{ name: 'Your Name' }],
  creator: 'Your Name',
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://yourdomain.com',
    siteName: 'Your App Name',
    title: 'Your App Name',
    description: 'Your app description'
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your App Name',
    description: 'Your app description',
    creator: '@yourhandle'
  }
};

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

Update any environment-specific branding in your .env:

.env

NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_APP_NAME=Your App Name

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>
  );
}