Skip to content

Folder Structure

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

  • Directorysrc
    • Directoryapp/ next.js app directory
      • Directory(main)/
      • navigation.tsx route definitions for menus
    • Directorycomponents/
    • Directoryconfig/
      • Directoryschemas/
      • Directorytheme/
    • Directoryserver/ code that should only server-side
      • Directorydata/
      • Directoryservices/
    • Directoryutils/
  • proofkit.json config data used by the CLI

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/data is where you can put functions that interact with your database.
  • src/server/services is where you can put functions that interact with other services.
  • src/server/safe-action.ts is where the next-safe-action client is defined, and used as the base for all server actions.

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 src/utils directory

A folder for helper functions to be used throughout your application.