NEXTDEVKIT DocsProject Structure
Understanding NEXTDEVKIT's modular architecture and directory organization
📁 Root Directory Structure
nextdevkit/
├── src/
│ ├── app/ # Next.js App Router pages
│ ├── components/ # React components
│ ├── config/ # Configuration files
│ ├── database/ # Database schema and client
│ ├── i18n/ # Internationalization
│ ├── lib/ # Core utilities and logic
│ ├── mail/ # Email templates and providers
│ ├── payment/ # Payment processing
│ ├── storage/ # File storage providers
│ ├── styles/ # Global styles
│ └── middleware.ts # Route protection and redirects
├── content/ # MDX content (blog, docs, legal)
├── drizzle/ # Database migrations
├── public/ # Static assets
├── messages/ # Internationalization messages
├── drizzle.config.ts # Drizzle ORM configuration
├── next.config.ts # Next.js configuration
├── source.config.ts # Fumadocs configuration
└── package.json # Dependencies and scripts🔑 Key Files
| File | Purpose |
|---|---|
src/middleware.ts | Route protection, redirects, and internationalization |
drizzle.config.ts | Drizzle ORM configuration for database operations |
next.config.ts | Next.js configuration including redirects and rewrites |
source.config.ts | Fumadocs configuration for documentation |
open-next.config.ts | OpenNext configuration for Cloudflare deployment |
biome.json | Biome configuration for linting and formatting |
components.json | shadcn/ui components configuration |
📂 Key Directories
/src/app Directory
The app directory follows Next.js App Router convention with internationalized routing:
app/
├── (app)/ # Authenticated app routes
│ ├── app/ # Main application
│ │ ├── ai/ # AI features demo (chat, image, voice)
│ │ ├── dashboard/ # User dashboard
│ │ └── settings/ # User settings
│ └── auth/ # Authentication pages
├── [locale]/ # Internationalized routes
│ ├── (marketing)/ # Marketing pages
│ │ ├── blog/ # Blog system
│ │ ├── contact/ # Contact form
│ │ ├── legal/ # Legal pages
│ │ └── pricing/ # Pricing page
│ └── docs/ # Documentation
├── api/ # API routes
│ ├── auth/ # Authentication API
│ ├── docs-search/ # Documentation search
│ └── webhooks/ # Webhook handlers
├── image-proxy/ # Image optimization proxy
├── globals.css # Global styles
├── layout.tsx # Root layout
├── not-found.tsx # 404 page
├── robots.ts # SEO robots configuration
└── sitemap.ts # Dynamic sitemap generation/src/lib Directory
Core application logic and utilities:
lib/
├── actions/ # Server actions
│ └── send-contact-email.ts
├── auth/ # Authentication utilities
│ ├── api.ts
│ ├── client.ts
│ ├── server.ts
│ └── session-context.ts
├── hooks/ # Custom React hooks
│ ├── use-mobile.ts
│ ├── use-session.ts
│ └── use-payment.ts
├── stores/ # State management
│ ├── use-locale-store.ts
│ └── use-payment-store.ts
├── auth.ts # Authentication configuration
├── metadata.ts # SEO metadata utilities
├── safe-action.ts # Safe action configuration
├── source.ts # Fumadocs source configuration
├── toc.ts # Table of contents utilities
├── urls.ts # URL utilities
├── utils.ts # General utilities
└── i18n.ts # Internationalization utilities/src/config Directory
Configuration files for different features:
config/
├── marketing/ # Marketing configuration
│ ├── blog.ts
│ ├── faq.ts
│ ├── feature-tabs.ts
│ ├── hero-section.ts
│ ├── pricing.ts
│ └── testimonials.ts
├── analytics.ts # Analytics configuration
├── footer.ts # Footer configuration
├── index.ts # Main app configuration
├── navigation.ts # Navigation configuration
├── oauth-provider.ts # OAuth providers configuration
├── settings-tabs.tsx # Settings tabs configuration
├── sidebar.tsx # Sidebar configuration
├── social-media.tsx # Social media configuration
└── types.ts # TypeScript type definitions🎉 Next Steps
Now that you understand the project structure:
- 🔧 Set up your IDE with the recommended extensions
- 📝 Learn the formatting rules with Biome
- 🔄 Understand the update process for staying current
- 🛠️ Start building your features following the patterns
The modular architecture makes it easy to add new features, customize existing ones, and maintain code quality as your project grows! 🚀