Folder Structure
Learn how to navigate the codebase of the starter kit.
The folder structure is as unopinionated as possible. This makes it easy to learn, adapt and modify. The whole project is built entirely with React server components and server actions. Zod schemas are used for input validation on both frontend and backend.
Folders
Directory | Purpose |
---|---|
/actions | Handles server-side mutations (Create, Update, Delete) |
/app | Next.js App Router components |
/components | Reusable UI components |
/constants | Stores application-wide constants and configuration |
/data | Fetches data from the database or external APIs |
/emails | Email templates using React Email |
/hooks | Custom React hooks |
/lib | Shared utility functions and services |
/prisma | Contains Prisma schema and migration files |
/public | Static assets like images and fonts |
/schemas | Defines validation schemas for data |
/types | TypeScript types and interfaces |
Tree View
This is a representation of the actual files and folders.
- actions
- app
- components
- constants
- data
- emails
- hooks
- lib
- prisma
- public
- schemas
- types
- package.json
- ...other files
Stats: 757 Files and 184 Folders
CRUD
The core workflow revolves around three key directories:
/actions → Server Actions (Create/Update/Delete)
/data → Data Functions (Read)
/schemas → Zod Schemas (Validation)
To illustrate with examples:
- Action: Add new contact with
/actions/contacts/add-contact.ts
- Data: Retrieve contacts with
/data/contacts/get-contacts.ts
- Schema: Validate form and action with
/schemas/contacts/add-contact-schema.ts
Parallel Routes
Folders that start with an @
-prefix, such as @personalDetails
, are slots for parallel routes. They provide an implicit suspense and error boundary. In case one parallel route throws an error, the "Try again" default error https://achromatic.dev/docs/components/default-error gets displayed while all the other parts still work. Super powerful!
In this example the layout, representing the developer's page, contains two parallel routes slots @apiKeys
and @webhooks
. Each section loads and functions independently.