Project structure

Here you will learn how to navigate through the project to find what you need or to find where to store your code to keep things clean and tidy.

The main directories

All the code you need is stored in one main folder /src where it is broken into many folders to keep your project clean and navigable

├── prisma                         # Prisma migration/schema folder
├── public                         # Public assets folder
├── src
│    ├── app                       # Next.js App (App Router)
│    │   ├── api                   # API routes and server-side logic
│    │   ├── (site)               # Landing page
│    │   ├── page                  # Any other page (e.g. dashboard)
│    │   │   ├── _layout           # Page layout components (e.g. nav)
│    │   │   └── _components       # Page components (e.g. form)
│    ├── assets                    # Static assets (e.g., icons)
│    ├── components                # Reusable UI components
│    ├── hooks                     # Custom React hooks
│    ├── lib                       # Libraries, utilities, and helpers
│    │   └── auth                  # Auth helper functions/config
│    ├── store                     # State management store (Zustand)
│    ├── types                     # TypeScript type definitions
│    └── utils                     # Utility functions (config, formatting, validation)

Note

You might wonder why add some components under page/_components/ or page/_layout/ instead of the /src/components, the reason behind this is to quickly find components specifically made to a page. The folder name starts with an underscore to make sure Next.js does not treat it as a page.