K
K12worX Education501(c)(3) Public Charity
Jamboree

Section 03: Understanding Structure

Now that you've made your first code change, let's understand how the K12worX website is organized. This section explains the App Router, pages, components, and layouts that form the foundation of the codebase.

What You'll Learn

  • How Next.js App Router maps folders to URLs
  • How pages and routing work
  • What components are and how to use them
  • How layouts wrap pages with shared UI
  • The relationship between files and what you see in the browser

Why This Matters

Understanding the structure is like having a map of a city. Once you know how it's organized, you can:

  • Find any file quickly
  • Know where to add new features
  • Understand how changes affect the site
  • Navigate confidently without getting lost

The Big Picture

Our website structure:

website/
├── app/                    # Pages and routes
│   ├── layout.tsx         # Root layout (wraps everything)
│   ├── page.tsx           # Homepage (/)
│   ├── about/
│   │   └── page.tsx       # About page (/about)
│   ├── contact/
│   │   └── page.tsx       # Contact page (/contact)
│   └── ...                # More pages
│
├── components/            # Reusable UI pieces
│   ├── layout/           # Layout components
│   │   ├── Header.tsx
│   │   ├── Navigation.tsx
│   │   ├── Footer.tsx
│   │   ├── DefaultLayout.tsx
│   │   └── ...
│   └── content/          # Content components
│       ├── ContactForm.tsx
│       └── ...
│
└── public/               # Static assets (images, icons)
    ├── images/
    └── icons/

Key principle: File structure determines URL structure!

Estimated Time

3-4 hours (reading and exploring the codebase)

Sections

Read these in order:

  1. App Router Explained
  2. Pages and Routing
  3. Components Explained
  4. Layouts Explained

Learning Approach

Follow Along in VS Code

As you read each section:

  1. Open the mentioned files in VS Code
  2. See the actual code
  3. Match what you read to what you see
  4. Experiment with small changes

Use Browser DevTools

Open DevTools (F12) while exploring:

  • See how components nest
  • Understand the HTML structure
  • Match browser elements to code files

Build Mental Models

Think of the codebase as:

  • Folders = Sections of a house
  • Pages = Rooms
  • Components = Furniture (reusable in any room)
  • Layouts = House frame (same in every room)

Success Checkpoint

After completing this section, you should be able to:

  • Explain how folders become URLs
  • Find the file that generates any page
  • Identify which layout a page uses
  • Understand component composition
  • Know where to create a new page
  • Recognize the difference between pages and components

Key Vocabulary

TermDefinition
App RouterNext.js routing system based on folders
RouteA URL path (like /about or /contact)
PageA file that creates a route (page.tsx)
LayoutWrapper component with shared UI
ComponentReusable piece of UI
ChildrenContent passed into a component

Common Questions

Q: What's the difference between a page and a component?

A:

  • Page = Creates a route (URL). Must be named page.tsx
  • Component = Reusable UI piece. Can be named anything

Q: Why are some files in app/ and others in components/?

A:

  • app/: Files that create routes (pages, layouts)
  • components/: Reusable UI pieces used across multiple pages

Q: Can I create pages outside the app/ folder?

A: No! Only files in app/ can create routes.

Next Steps

Ready to understand the App Router? Let's start:

App Router Explained →