Fullstack CourseLearn by building

next · source-driven

Next.js App Router — Getting Started map

Follow Next’s own Getting Started order: project structure → layouts/pages → linking → Server vs Client Components → data. Prerequisites: React (Week 1).

Official docs: nextjs.org/docs/app/getting-started

You will learn

  • The official Getting Started topic order
  • That folders under app/ define routes (file conventions)
  • When a file needs "use client"
  • Why this monorepo keeps Nest as the HTTP API

Prerequisites (from Next docs)

Next’s docs assume HTML, CSS, JavaScript, and React. If React is new, they point you to React Foundations first — same rule here: finish /examples/react before deep Next.

Official path (do these in order)

  1. Project Structure — file conventions
  2. Layouts and Pages — layout.tsx, page.tsx
  3. Linking and Navigating — next/link, prefetch
  4. Server and Client Components
  5. Fetching Data
  6. Mutating Data — Server Functions / Actions (read even if we rarely use them for CRUD here)
  7. Caching · Revalidating · Error Handling · Route Handlers — as in Getting Started

Conventions you can see in this repo

src/app/layout.tsx          → root layout (docs: Layouts and Pages)
src/app/page.tsx            → /
src/app/(dev)/examples/...  → route group (does not affect the URL segment)
src/app/course/[track]/...  → /course/frontend|backend
"use client"                → Client Component boundary

Server vs Client (docs rule of thumb)

Default in the App Router: Server Components. Add "use client" when you need interactivity, state, Effects, or browser-only APIs — as documented in Server and Client Components.

Recap

  • Follow nextjs.org Getting Started order
  • File conventions define routes
  • Server Components by default; Client when you need interactivity
  • Nest owns the API in this course

Challenge

Try this

Open Next’s “Layouts and Pages” doc. Sketch which files in apps/web/src/app correspond to layout vs page vs route group — then compare with the repo.