Folder Structure
The guide that explains the purpose behind the files and folders within a ProofKit project.
Here's a brief overview of the folder structure you should expect to see in a ProofKit project. Not all files are shown in the diagram
Conventions
The ProofKit CLI expects a certain structure for it to be able to inject code into your project.
- Wherever you see an internal folder, you should never touch the code inside. The ProofKit CLI may overwrite its contents when adding a new component or switching layouts.
- Any file that begins with
slot-is designed to be edited, but you should never rename the functions or delete the file. If you don't want to render anything in the slot, simply return null from the Slot function
The src directory
This is where your application code lives. Files outside of the src folder are for configuation only.
The src/app directory
This is the Next.js app router. Learn more at the Next.js docs, and make sure you're looking at the guides for "using the app router".
In here you'll primarily be working in the (main) folder. This is a seperate folder that doesn't show in your URL, but groups pages together that should use the app shell layout (navbar, header, etc).
The src/server directory
Code in this folder should only ever run on the server. It's where you can write functions that access your database, or interact with other services that use a shared API key that you don't want exposed to the web browser.
src/server/datais where you can put functions that interact with your database.src/server/servicesis where you can put functions that interact with other services.src/server/safe-action.tsis where the next-safe-action client is defined, and used as the base for all server actions.
Keep in mind that other code from the components and app directories may
also be executed on the server, such as React Server Components or when a page
is server-side rendered. But the server directory is for code that should
only run on the server and can include sensitive information like API keys.
The src/components directory
A folder for your application's UI components. Components may also exist in the app directory if they are only used on a single page, but this folder is for components that may be used across multiple pages. Subfolders may be used within this folder to group components by feature, theme, or similar.
The src/config directory
A place to store app-wide configuration and types. This is where you'll find the theme settings for the Mantine components, as well as the generated types and Zod schemas used for data validation from your data sources.
The config directory contains a lot of generated code. Be careful not to
modify these generated files directly as they may be overwritten.
The src/utils directory
A folder for helper functions to be used throughout your application.