First Move (11~18) - Code, Learn, Build
🧭 Career CompassDashboardProgress
Loading...
First Move (11~18) - Code, Learn, Build

Structured, level-based technology learning paths from foundational exploration to industry mastery.

Learning Domains

  • Python Programming (Active)
  • Computer Science Core
  • Web Development
  • AI & Machine Learning

Platform Architecture

  • Level-Based Progression
  • Decoupled Content Schema
  • Modular Code Execution Engine
  • Curated Official Resources

© 2026 First Move (11~18) • CODE • LEARN • BUILD. Built with Next.js App Router.

Readability & Accessibility First

← React & Next.js Framework Architecture|Level 2: Next.js App Router & Server Components

3. Next.js App Router Architecture & File System Routing

Lesson 3 of 6
Saved Locally (Guest)
Progress
0%

Next.js App Router Architecture & File System Routing

Build layouts (layout.tsx), pages (page.tsx), loading boundaries (loading.tsx), and dynamic routes ([slug]/page.tsx).

App Router Directory Conventions

### Next.js App Router Conventions - **`page.tsx`**: Exposes public route endpoints. - **`layout.tsx`**: Wraps child routes while preserving state across page transitions. - **`loading.tsx`**: Automatic React Suspense streaming fallback container. - **`error.tsx`**: React Error Boundary fallback handling runtime exceptions.
💻 Ready to test your knowledge with code?
Solve the hands-on coding exercise in the interactive code editor.