Project Structure

MkSaaS follows a modular architecture based on Next.js App Router with a focus on scalability and maintainability. This guide explains the key directories and files in the boilerplate to help you navigate the codebase more effectively.

Root Directory Structure

Key Files

• src/middleware.ts: Contains route protection logic and redirects
• src/routes.ts: Defines application routes for consistent navigation
• drizzle.config.ts: Drizzle ORM configuration for the database
• next.config.ts: Next.js configuration including redirects and rewrites
• source.config.ts: Fumadocs configuration for the documentation
• env.example: Template for environment variables

Key directories

/src/app Directory

The app directory follows Next.js App Router convention:

/src/actions Directory

Server actions organized by feature, powered by next-safe-action for type-safe server actions:

/src/lib Directory

Core application logic and utilities:

/src/components Directory

Components are organized by feature and purpose for better maintainability:

Code Organization Best Practices

When working with MkSaaS, follow these best practices for code organization:

// components/ui/index.ts
export * from './Button';
export * from './Card';
export * from './Input';

// Usage
import { Button, Card, Input } from '@/components/ui';

Video Tutorial

Next Steps

Now that you understand the project structure, explore these related topics: