A simple Codex project hierarchy for websites

Start with two kinds of files

Use AGENTS.md files to tell Codex how to work in a project. Use page.tsx files to define the actual webpages in a Next.js website.

website/
├── AGENTS.md
└── app/
    ├── blog/
    │   ├── AGENTS.md
    │   └── codex-project-structure/
    │       └── page.tsx
    └── topics/
        └── [slug]/
            └── page.tsx

Put instructions where they apply

The root AGENTS.md should contain rules for the whole website, such as protected files, testing requirements, and deployment limits. A narrower file such as app/blog/AGENTS.md should contain only rules that apply specifically to blog articles.

Keep each rule in the highest folder where it applies. Avoid repeating the same instructions in several files: lean, focused guidance is easier for Codex to follow.

Let the folder define the URL

Each page.tsx file defines the webpage for its folder. For example, app/blog/codex-project-structure/page.tsx becomes /blog/codex-project-structure/.

In short: AGENTS.md explains how Codex should work, while page.tsx contains what website visitors see.

More Codex Learning →