Overview

NEXTDEVKIT is highly configurable and customizable. This guide covers all aspects of configuration, from basic settings to advanced customizations.

🚀 Quick Configuration Overview

NEXTDEVKIT configuration is organized into several key areas, each with its own dedicated documentation:

Core Configuration Files

Specialized Configuration Files

📋 Configuration Sections

Website Configuration

Core settings for your NEXTDEVKIT website including metadata, themes, authentication, storage, and payment configuration.

Key Features:

• 🎨 Metadata and branding configuration
• 🌙 Theme and UI settings
• 🔐 Authentication options
• 💳 Payment and pricing plans
• 📧 Email and storage providers

Marketing Configuration

Configure marketing pages and landing page components for optimal user engagement.

Key Features:

• 💰 Pricing plans display
• ❓ FAQ sections
• 🎯 Feature tabs and steps
• 🦸 Hero section content
• 💬 Customer testimonials

Navigation Configuration

Configure website navigation menus with multi-level support and internationalization.

Key Features:

• 🔧 Hierarchical menu structures
• 🎨 Icon integration with Lucide React
• 🌍 Full internationalization support
• 📱 Mobile-responsive design
• 🎯 Flexible submenu organization

Footer Configuration

Configure website footer with newsletter signup, links, and social media integration.

Key Features:

• 📧 Newsletter subscription
• 🔗 Multiple link sections
• 🌐 Social media integration
• ⚖️ Legal pages links
• 🌍 Internationalization support

OAuth Provider Configuration

Configure OAuth authentication providers for social login functionality.

Key Features:

• 🔐 Multiple OAuth providers
• 🎨 Consistent icon integration
• 🔍 Type-safe configuration
• 🚀 Easy provider addition
• 🔧 Better Auth integration

Social Media Configuration

Configure social media links and icons displayed throughout your website.

Key Features:

• 📱 Comprehensive social media support
• 🎨 Consistent icon styling
• 🌍 Translation support
• 🔧 Easy platform addition
• 📊 Analytics integration

Analytics Configuration

Configure multiple analytics providers with cookie consent management.

Key Features:

• 📊 Multiple analytics providers
• 🍪 Cookie consent management
• 🔧 Easy provider addition
• 📝 GDPR compliance features
• 🚀 Performance monitoring

Sidebar Configuration

Configure application sidebar navigation for logged-in users.

Key Features:

• 📋 Hierarchical navigation
• 🎨 Lucide React icons
• 🌍 Internationalization
• 🔧 Role-based navigation
• 📱 Mobile-responsive design

Settings Tabs Configuration

Configure settings page tabs and navigation structure.

Key Features:

• ⚙️ Organized settings tabs
• 🎨 Icon integration
• 🌍 Internationalization
• 🔧 Feature-based tabs
• 📱 Mobile-friendly design

🎯 Quick Start Guide

1. Basic Setup

Start with the core configuration:

export const appConfig = {
  metadata: {
    name: "Your App Name",
    title: "Your App Title",
    description: "Your app description",
  },
  // ... other settings
};

2. Configure Navigation

Set up your main navigation:

export function getNavItems(): NavItem[] {
  return [
    {
      id: 1,
      label: "Home",
      link: "/",
    },
    // ... more items
  ];
}

3. Set Up Social Media

Add your social media links:

export function getSocialMediaData() {
  return {
    title: "Follow Us",
    media: [
      {
        name: "GitHub",
        href: "https://github.com/yourusername",
        icon: <GitHub className="h-4 w-4" />,
      },
    ],
  };
}

4. Configure Analytics

Enable analytics providers:

const analyticsConfig = {
  google: {
    enabled: true,
    config: {
      trackingId: "G-XXXXXXXXXX",
    },
  },
};

🔧 Environment Variables

Many configuration options depend on environment variables:

# .env.local
NEXT_PUBLIC_APP_URL=https://yourapp.com
BETTER_AUTH_SECRET=your-secret-key
GOOGLE_CLIENT_ID=your-google-client-id
GITHUB_CLIENT_ID=your-github-client-id
STRIPE_SECRET_KEY=your-stripe-secret
NEXT_PUBLIC_GA_TRACKING_ID=G-XXXXXXXXXX

🚀 Advanced Configuration

Dynamic Configuration

// Load configuration based on environment
const getConfig = () => {
  const isDev = process.env.NODE_ENV === "development";
  
  return {
    ...baseConfig,
    analytics: {
      ...baseConfig.analytics,
      enabled: !isDev, // Disable analytics in development
    },
  };
};

Feature Flags

// Use feature flags for conditional configuration
const featureFlags = {
  enableBlog: process.env.FEATURE_BLOG === "true",
  enableAnalytics: process.env.FEATURE_ANALYTICS === "true",
};

const getNavigationConfig = () => {
  const items = [...baseNavItems];
  
  if (featureFlags.enableBlog) {
    items.push({ id: 99, label: "Blog", link: "/blog" });
  }
  
  return items;
};

📖 Related Documentation

• Environment Setup - Configure environment variables
• Deployment - Deploy with proper configuration
• Tech Stack - Understanding the technology stack

Your NEXTDEVKIT configuration system is now fully documented and ready for customization! 🎉