Practice Set 1 — Routing, Layout, and Component Basics Exercises

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Practice Practice Set 1 — Routing, Layout, and Component Basics Exercises hands-on
Practice the skills you've already learned and cement them
Get comfortable finding bugs, fixing them, and checking your own work

Let's think about this for a moment

This practice set doesn't teach anything new — it's about putting the routing, layout, and component boundary skills from the earlier chapters of the tutorial into practice yourself. Each task has a small scope you can finish in a short sitting. There's no single correct solution — what matters is being able to write the concept out again in your own code.

Exercises

(1) Create a static route at app/about/page.tsx and add a Link to it in the nav inside the root layout. (2) Create a dynamic route at app/products/[slug]/page.tsx that displays params.slug as the heading. (3) Create a route group at app/(marketing)/ and give it its own layout underneath (with a different background color) — confirm that the group folder's name doesn't show up in the URL path. (4) Create a Counter component with a "use client" directive that shows a button click count, and import it into a page that's a Server Component.

Built one working static route and one working dynamic route [slug]
Confirmed the route group (folder) doesn't appear in the URL path, and tested that its layout looks different
Hooked a "use client" component into a Server Component and its interactive state is working

Code Example

tsx

// Task 4 starter skeleton — components/Counter.tsx
"use client";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

// app/products/[slug]/page.tsx skeleton
export default function ProductPage({ params }: { params: { slug: string } }) {
  return <h2>Product: {params.slug}</h2>;
}

You should see

Once all four tasks are done, you'll see 3 new routes and one interactive client component all working together in your app.

Try it in 5 minutes

Test task (2)'s dynamic route in your browser with 2-3 different slugs, like /products/abc and /products/123, and confirm within 5 minutes that the heading changes each time.

A quick word of caution

Check the dev server error console after finishing each task — TypeScript type errors often show up right in the terminal before you'd ever catch them at build time.

Easy traps

Naming the route group folder marketing without the parentheses, i.e. (marketing), which lets /marketing/ leak into the URL path
Forgetting to add the "use client" directive at the top of the Counter component, causing useState to throw an error on the server

Now try it yourself

Test task (2)'s dynamic route in your browser with 2-3 different slugs, like /products/abc and /products/123, and confirm within 5 minutes that the heading changes each time.

You'll know it worked when: Once all four tasks are done, you'll see 3 new routes and one interactive client component all working together in your app.