Understanding Your Template Files

Let’s look at the common file structure used across Capricorn Next.js templates.

Standard Project Structure

All Capricorn templates follow a consistent, organized structure:

• your-template
  • app
    • globals.css
    • layout.tsx
    • page.tsx
    • (routes)
  • components
  • config
  • content
  • lib
  • public
  • package.json
  • next.config.ts

Core Folders Explained

📁 app/ — Your Pages

This is where all your website pages live using Next.js App Router.

Note: Folders in parentheses like (marketing) are “route groups” — they organize files but don’t appear in URLs.

📁 components/ — Building Blocks

Reusable React components organized by purpose:

📁 config/ — Site Settings

Centralized configuration files:

💡 Tip: Edit site.config.ts first — it’s the quickest way to personalize your template.

📁 content/ — Your Content

Where your actual content lives. This may include:

• MDX files (.mdx) — For pages with rich content (blog posts, services, etc.)
• TypeScript files (.ts) — For structured data (team, testimonials, pricing, etc.)

See your specific template documentation for exact content structure.

📁 lib/ — Utilities

Helper functions and utilities:

Some templates may include additional utilities for content loading (like MDX processing).

📁 public/ — Static Files

Static assets served directly:

public/
├── images/          # Your images
│   ├── blog/
│   ├── team/
│   └── ...
├── fonts/           # Custom fonts (if any)
└── favicon.ico      # Site favicon

Reference these files with absolute paths: /images/your-image.jpg

What to Edit vs. What Not to Touch

✅ Edit Often

✅ Edit Sometimes

⚠️ Edit Carefully

❌ Don’t Touch

Understanding Dynamic Routes

Folders with [slug] or [id] are dynamic routes:

app/
├── blog/
│   ├── page.tsx          → /blog (listing)
│   └── [slug]/
│       └── page.tsx      → /blog/any-post-name (dynamic)

The bracketed part gets replaced with actual values from your content.

Hot Module Replacement

When you save a file:

1. Next.js detects the change automatically
2. Your browser updates without full reload
3. You see changes instantly

This makes development fast and iterative!

Quick Reference

Template-Specific Structure

Each template may have additional folders or different content organization. See your specific template documentation:

• Astra Dental Template →

Next: Customizing Your Template →