Orientation: what we are building

1. The promise

You'll know the shape of this chapter, the example app it builds toward, and the new vocabulary that lands across the next sixteen units. You'll know which unit is the longest, where the assignment lives, and how much honest time the whole thing takes.

2. The mental model

This chapter is laid out like the build of a real app. Each unit adds one capability to a single example project — a small blog with a public home page, a posts list, individual post pages, an about page, a contact form, and an admin route.

By the end you have a small website a stranger could visit at a real URL. The kind of thing that goes on a resume.

(DIAGRAM: example app route map — node tree — / → /posts → /posts/[slug], plus /about, /contact, /api/health, each labelled with the file that serves it)

A framework is a body of code that gives a project a fixed shape — file layout, conventions, a build step — so you fill in the gaps instead of inventing the structure yourself. Next.js is a framework that sits on top of React.

Two more terms to plant now:

• The App Router is the routing system in modern Next.js. Every URL in the app corresponds to a folder under app/.
• A route is one URL the app responds to. /about is a route. /posts/hello-world is a route.

3. You do it, with me

There's nothing to install in this unit. Read along.

Open the chapter index in the course site so you can see all sixteen units.

(SCREENSHOT: the Click to Career chapter index for Ch 12 — full window — the orientation unit highlighted)

Here's the route map of the example app you'll build over the chapter. You don't have to memorise it.

• / — the home page.
• /posts — a list of all blog posts.
• /posts/[slug] — one blog post.
• /about — a static about page.
• /contact — a contact form that submits to a server action.
• /api/health — a JSON endpoint a stranger can call with curl.

You'll see this same map in 12.3 (when you build the routes), in 12.6 (when you add layouts), and in 12.15 (when you deploy).

(SCREENSHOT: the finished example blog app running in Chrome — full window — the home page visible at a Vercel preview URL)

The new vocabulary the chapter introduces, listed up front so you can see what's coming:

• App Router, route, server component, client component, layout, route handler, server action, dynamic route, route group, streaming, edge function, metadata.

Each one is defined in the unit it lives in. You don't need to know them now.

(SCREENSHOT: VSCode with the example project's app/ folder expanded in the sidebar — file tree visible — no file open)

Pace. About four and a half hours of content, plus three hours for the assignment. This is the longest chapter in Block 4. Two or three units a day for a week beats sixteen units in one weekend.

One honesty note. Next.js changes fast. The course assumes the version installed in your project. Read next --version in your terminal once you have a project, and trust the docs at node_modules/next/dist/docs/ over any tutorial on the open web — including this one if there's ever a conflict.

4. What you should be seeing

Three pictures in your head:

1. One example app. Six routes, deployed at a Vercel URL by the end.
2. Sixteen units. Each one adds one capability to that app.
3. One assignment. A multi-page Next.js app at a public URL, graded green / yellow / red.

If you can list those three things, you're done with this unit.

5. Common stumbles

• You try to build the example app in one sitting. The chapter is paced to be split over several days. Resist the marathon.
• You skip ahead to the deploy unit. The deploy unit is the last one for a reason — the project has to exist first.
• You read an open-web Next.js tutorial mid-chapter and it contradicts a unit here. Check next --version. Tutorials older than your installed version are often wrong now.

6. You should know