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

middleware.ts

routes.ts

Dockerfile

drizzle.config.ts

next.config.ts

source.config.ts

Key Files

src/middleware.ts: Contains route protection logic and redirects
src/routes.ts: Defines core 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:

layout.tsx

not-found.tsx

robots.ts

sitemap.ts

manifest.ts

`/src/actions` Directory

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

check-newsletter-status.ts

get-active-subscription.ts

get-lifetime-status.ts

send-message.ts

subscribe-newsletter.ts

unsubscribe-newsletter.ts

`/src/lib` Directory

Core application logic and utilities:

auth.ts

auth-client.ts

source.ts

metadata.ts

constants.ts

formatter.ts

utils.ts

`/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:

Group by feature, not by type

Keep related files together, regardless of their type.

Keep components focused and small

Each component should have a single responsibility.

Use barrel exports

Create index.ts files to re-export components from a directory, making imports cleaner.

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

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