Website Configuration

The main configuration file that contains the core settings for the website. NEXTDEVKIT has already set up the default core settings for you, and you can customize the core settings in this file src/config/index.ts.

Core Configuration Structure

export const appConfig = {
  metadata: {
    // Website metadata and branding
  },
  ui: {
    // User interface settings
  },
  blog: {
    // Blog configuration
  },
  mail: {
    // Email service configuration
  },
  i18n: {
    // Internationalization settings
  },
  auth: {
    // Authentication settings
  },
  settings: {
    // Application settings
  },
  storage: {
    // Storage configuration
  },
  payment: {
    // Payment and pricing configuration
  },
} as const satisfies AppConfig;

🎨 Metadata Configuration

Controls the appearance and branding of your website:

Property	Type	Description
`name`	`string`	Application name displayed in the UI
`title`	`string`	SEO title for the website
`description`	`string`	SEO description for the website
`images`	`object`	Logo and social media images
`keywords`	`string[]`	SEO keywords for search engines

Images Configuration

Property	Type	Description
`logoLight`	`string`	Path to logo for light mode
`logoDark`	`string`	Path to logo for dark mode
`ogImage`	`string`	Open Graph image for social sharing

Example:

metadata: {
  name: "NEXT DEV KIT",
  title: "NEXTDEVKIT - Next.js Starter Kit",
  description: "The Ultimate Next.js Starter Kit for Your Next Project",
  images: {
    logoLight: "/logo-light.svg",
    logoDark: "/logo-dark.svg",
    ogImage: "/og-image.png",
  },
  keywords: [
    "Next.js",
    "Starter Kit",
    "Next.js SaaS Template",
    "Next.js Boilerplate",
  ],
}

🎨 UI Configuration

Controls the user interface theme and appearance:

Property	Type	Description
`theme.enabled`	`boolean`	Whether theme switching is enabled
`theme.defaultMode`	`"system" \| "light" \| "dark"`	Default theme mode

Example:

ui: {
  theme: {
    enabled: true,
    defaultMode: "system", // Choose from: light, dark, system
  },
}

📝 Blog Configuration

Configure the blog functionality:

Property	Type	Description
`pagination`	`number`	Number of blog posts per page

Example:

blog: {
  pagination: 3,
}

📧 Mail Configuration

Configure email services:

Property	Type	Description
`provider`	`"resend" \| "plunk"`	Email service provider
`from`	`string`	Default sender email address
`contact`	`string`	Contact email for receiving emails

Example:

mail: {
  provider: "resend",
  from: "noreply@nextdevkit.com",
  contact: "contact@nextdevkit.com",
}

🌍 Internationalization (i18n) Configuration

Configure language support for your application:

Property	Type	Description
`enabled`	`boolean`	Whether i18n is enabled
`defaultLocale`	`string`	Default language locale
`locales`	`Record<string, { name: string }>`	Available languages
`localeCookieName`	`string`	Cookie name for storing locale preference

Example:

i18n: {
  enabled: true,
  defaultLocale: "en",
  locales: {
    en: { name: "English" },
    zh: { name: "简体中文" },
  },
  localeCookieName: "NEXT_LOCALE",
}

🔐 Authentication Configuration

Configure authentication options:

Property	Type	Description
`enableSocialLogin`	`boolean`	Enable social login providers
`enablePasswordLogin`	`boolean`	Enable email/password authentication
`redirectAfterSignIn`	`string`	Redirect path after successful login
`redirectAfterLogout`	`string`	Redirect path after logout

Example:

auth: {
  enableSocialLogin: true,
  enablePasswordLogin: true,
  redirectAfterSignIn: "/app/dashboard",
  redirectAfterLogout: "/",
}

⚙️ Settings Configuration

Configure application settings:

Property	Type	Description
`account.canChangeEmail`	`boolean`	Whether users can change their email

Example:

settings: {
  account: {
    canChangeEmail: true,
  },
}

📁 Storage Configuration

Configure file storage:

Property	Type	Description
`provider`	`string`	Storage provider (e.g., "s3")
`bucketNames`	`Record<string, string>`	Named buckets for different file types

Example:

storage: {
  provider: "s3",
  bucketNames: {
    avatars: process.env.NEXT_PUBLIC_AVATARS_BUCKET_NAME || "avatars",
  },
}

💳 Payment Configuration

Configure payment processing and pricing plans:

Property	Type	Description
`provider`	`"stripe"`	Payment processor
`currency`	`string`	Currency code (e.g., "USD")
`redirectAfterCheckout`	`string`	Redirect path after successful payment
`plans`	`Record<string, PricePlan>`	Available pricing plans

Pricing Plans Structure

Each plan in the plans object has the following structure:

Property	Type	Description
`id`	`string`	Unique identifier for the plan
`isLifetime`	`boolean`	Whether this is a lifetime plan
`popular`	`boolean`	Whether to highlight as popular
`highlighted`	`boolean`	Whether to highlight the plan
`prices`	`Price[]`	Array of price options

Price Structure

Property	Type	Description
`type`	`PaymentType`	Payment type (ONE_TIME, RECURRING)
`priceId`	`string`	Stripe price ID
`amount`	`number`	Price amount in currency units

Example:

payment: {
  provider: "stripe",
  currency: "USD",
  yearlyDiscount: 20,
  redirectAfterCheckout: "/app/dashboard",
  plans: {
    free: {
      id: "free",
      isFree: true,
    },
    pro: {
      id: "pro",
      prices: [
        {
          type: PaymentType.SUBSCRIPTION,
          priceId: process.env.NEXT_PUBLIC_PRICE_ID_PRO_MONTHLY as string,
          amount: 9.9,
          interval: PlanInterval.MONTH,
          trialPeriodDays: 7,
        },
        {
          type: PaymentType.SUBSCRIPTION,
          priceId: process.env.NEXT_PUBLIC_PRICE_ID_PRO_YEARLY as string,
          amount: 99,
          interval: PlanInterval.YEAR,
          trialPeriodDays: 30,
        },
      ],
      popular: true,
    },
    lifetime: {
      id: "lifetime",
      prices: [
        {
          type: PaymentType.ONE_TIME,
          priceId: process.env.NEXT_PUBLIC_PRICE_ID_LIFETIME as string,
          amount: 399,
        },
      ],
      isLifetime: true,
    },
    enterprise: {
      id: "enterprise",
      isEnterprise: true,
      highlighted: true,
    },
  },
},

🎯 Usage Examples

Accessing Configuration

import { appConfig } from "@/config";

// Access metadata
const siteName = appConfig.metadata.name;
const siteTitle = appConfig.metadata.title;

// Access theme settings
const themeEnabled = appConfig.ui.theme.enabled;
const defaultMode = appConfig.ui.theme.defaultMode;

// Access payment plans
const allPlans = appConfig.payment.plans;
const nextjsPlan = appConfig.payment.plans.nextjs;

Type Safety

The configuration is fully typed with TypeScript:

import type { AppConfig } from "@/config/types";

// Configuration is type-safe
const config: AppConfig = {
  // TypeScript will enforce correct structure
};

📝 Best Practices

Environment Variables: Use environment variables for sensitive data like API keys and price IDs
Type Safety: Always use the provided TypeScript types
Consistent Naming: Follow the existing naming conventions
Documentation: Update this documentation when adding new configuration options
Validation: Consider adding runtime validation for critical configuration values

🔧 Customization

To customize the configuration:

Edit the config file: Modify src/config/index.ts
Update types: Add new types to src/config/types.ts if needed
Use throughout app: Access configuration via import { appConfig } from "@/config"
Environment variables: Use .env files for environment-specific values

Your NEXTDEVKIT application configuration is now properly documented and ready for customization! 🎉

On this page