←WebSprout logoWebSprout

Capstone: Build and Deploy a Multi-Page Site

Combine everything — layout, routing, links, a client component, and server data fetching — into a real multi-page site, then deploy it to the web.

Step 1 of 7

The brief

You'll build a small but complete website that uses every idea from this module, then put it online. It will have:

  1. A shared layout with a navigation bar on every page.
  2. A Home page and an About page (file-system routing).
  3. An interactive widget (a Client Component with state).
  4. A Posts page that fetches data on the server (an async Server Component).
  5. A deploy to the live web with Vercel.

Work in your real project as you go, running npm run dev and checking each page in the browser. The code blocks in the next steps are your reference.

Tip

Build one piece at a time and check the browser after each. If a page breaks, the dev-server terminal and the browser usually show a clear error pointing at the file and line.