Overview of the MkSaaS boilerplate file and folder organization
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.
MkSaaS Docssrc/middleware.ts: Contains route protection logic and redirectssrc/routes.ts: Defines core routes for consistent navigationdrizzle.config.ts: Drizzle ORM configuration for the databasenext.config.ts: Next.js configuration including redirects and rewritessource.config.ts: Fumadocs configuration for the documentationenv.example: Template for environment variablesThe app directory follows Next.js App Router convention:
Server actions organized by feature, powered by next-safe-action for type-safe server actions:
Core application logic and utilities:
Components are organized by feature and purpose for better maintainability:
When working with MkSaaS, follow these best practices for code organization:
Keep related files together, regardless of their type.
Each component should have a single responsibility.
Create index.ts files to re-export components from a directory, making imports cleaner.
Now that you understand the project structure, explore these related topics:
// components/ui/index.ts
export * from './Button';
export * from './Card';
export * from './Input';
// Usage
import { Button, Card, Input } from '@/components/ui';Use the 'use client' directive at the top of client components, and keep server components as the default.
Keep your codebase up to date