React Workshop Series

Day 1 — About Route

Day 1 · Topic 13 of 15Hands-on practice

Foundations & build/About Route

03

Hands-on #03 — Adding an "About Me" Route

Hands-on #03

Adding an "About Me" Route

Create the About page with ProfileCard first, then link to it from Home.

Exercise — part A

  1. Create folder: src/app/about/
  2. Create file: src/app/about/page.js
  3. Import and use your ProfileCard component on the about page:
src/app/about/page.js
1import { ProfileCard } from "@/components/ProfileCard";
2 
3export default function About() {
4  return (
5    <main className="min-h-screen bg-gray-100 flex items-center justify-center p-8">
6      <ProfileCard
7        name="Alex"
8        title="Computer Science Student"
9        desc="Learning React and Next.js!"
10        imageSrc="/alex.png"
11      />
12    </main>
13  );
14}

Use your own details

Change name, title, desc, and imageSrc to match your photo filename in public/.

You can already open http://localhost:3000/about to check the card. Next we add a button on Home so you can click there.

Exercise — part B

  1. Go to src/app/page.js
  2. Add a navigation button with <Link href="/about">:
src/app/page.js
1import Link from "next/link";
2 
3export default function Home() {
4  return (
5    <main className="min-h-screen bg-gray-100 p-8 text-gray-900">
6      <h1>My Workspace</h1>
7 
8      <Link href="/about">Go to About Me</Link>
9    </main>
10  );
11}
  1. Test the link by clicking Go to About Me.

Done when

The Home link opens /about, where your own ProfileCard and chosen image are visible without a full-page reload.