Project Structure

This guide outlines the folder and file naming conventions within a ContentQL project. ContentQL is built using Next.js and Payload CMS, with the UI powered entirely by the latest version of Next.js (v15). Tailwind CSS is used for styling.

Next.js Folder Structure

Below is an overview of the folder structure to help you understand how Next.js is organized within ContentQL. The (app) folder contains the UI-related code.

layout.tsx

globals.css

error.tsx

not-found.tsx

theme.scss

Folder Descriptions

Folder Name	Description
`(account)`	Contains account-related logic
`(auth)`	Handles authentication functionality
`(marketing)`	Contains logic for rendering marketing blocks

To learn more about folder naming conventions, refer to the official Next.js documentation:

Top-Level Files

Here are the key configuration files located at the root of the project:

.env

next.config.mjs

package.json

payload-types.ts

payload.config.ts

tailwind.config.ts

tsconfig.json

Payload CMS Folder Structure

The Payload CMS folder structure is integrated into the src/payload directory. This folder contains two important subfolders: blocks and collections.

component.tsx

config.ts

index.ts

RenderBlocks.tsx

types.ts

package.json

next.config.mjs

Blocks Folder Structure

The blocks folder is essential for theme development. Inside the blocks folder, you can create different folders based on the theme you’re developing. For instance, if you’re creating a blog theme, you may have folders such as Hero, Featured Posts, and Latest Posts.

Naming Conventions for Block Files

Each folder inside the blocks directory follows a specific naming convention:

File Name	Description
`component.tsx`	Contains the UI logic for the block
`config.ts`	Defines the block’s slug and configuration
`index.ts`	Exports both component.tsx and config.ts

For more information on defining slugs in config.ts, refer to the Payload CMS Fields documentation.