Understanding the Project Structure

Project Anatomy

Let's map out the files generated by the installer. Understanding this layout is essential for knowing where to put your logic and styles.

The Directory Tree

headless-wp/
├── app/              # Routing and Application logic
├── public/           # Static assets (images, fonts)
├── package.json      # Dependencies and scripts
├── next.config.js    # Custom Next.js configuration
└── tsconfig.json     # TypeScript configuration

Folder Deep Dive

📁 /app (The Core)

This is where the magic happens. Next.js uses file-system routing here.

• page.tsx: This maps to the root URL (/).
• layout.tsx: A shared UI that wraps your pages.