Pages Solution¶

Click on the icons to view the contents of each file.

app/
  about/
    page.jsx    # (1)!
  team/
    dwight/
      page.jsx  # (2)!
    jim/
      page.jsx  # (3)!
    michael/
      page.jsx  # (4)!
    pam/
      page.jsx  # (5)!
    page.jsx    # (6)!
  head.jsx      # (7)!
  layout.jsx    # (8)!
  page.jsx      # (9)!

export default function About() {
  return (
    <div>
      <h1>About</h1>
    </div>
  )
}

export default function Dwight() {
    return (
        <div>
            <h1>Dwight</h1>
        </div>
    );
}

export default function Jim() {
    return (
        <div>
            <h1>Jim</h1>
        </div>
    );
}

export default function Michael() {
    return (
        <div>
            <h1>Michael</h1>
        </div>
    );
}

export default function Pam() {
    return (
        <div>
            <h1>Pam</h1>
        </div>
    );
}

import Link from "next/link";

export default function Home() {
    return (
        <div>
            <h1>Meet the team</h1>
            <ul>
                <li><Link href="/team/michael/">Michael</Link></li>
                <li><Link href="/team/dwight/">Dwight</Link></li>
                <li><Link href="/team/jim/">Jim</Link></li>
                <li><Link href="/team/pam/">Pam</Link></li>
            </ul>
        </div>
    );
}

export default function Head() {
  return (
    <>
      <title></title>
      <meta content="width=device-width, initial-scale=1" name="viewport" />
      <link rel="icon" href="/favicon.ico" />
    </>
  )
}

export default function RootLayout({ children }) {
  return (
    <html>
      <head />
      <body>{children}</body>
    </html>
  )
}

export default function Home() {
  return (
    <div>
      <h1>Dunder Mifflin</h1>
    </div>
  )
}

With the new app/ directory in Next.js, you can make a page by creating a file named page.jsx (or page.js, page.tsx, page.ts). The path to that file defines the URL route to that page.

Route segments to path segments

route segments to path segments