Routing & Navigation

Navigation

Links not anchors

import Link from "next/link";\n\n<Link href="/courses">All courses</Link>

Link enables instant client-side navigation — no full page reload.

Dynamic routes

// app/courses/[slug]/page.js\n\nexport default async function CoursePage({ params }) {\n  const { slug } = await params;\n  const course = await fetchCourse(slug);\n  return <h1>{course.title}</h1>;\n}

Root layout

// app/layout.js\nexport const metadata = {\n  title: "KAA Tech Academy",\n  description: "Learn tech skills in Ghana",\n};\n\nexport default function RootLayout({ children }) {\n  return (\n    <html lang="en">\n      <body>\n        <header>KAA</header>\n        {children}\n        <footer>© 2026 KAA</footer>\n      </body>\n    </html>\n  );\n}

Not-found and loading

// app/courses/[slug]/not-found.js\n\nexport default function NotFound() {\n  return <p>No course found.</p>;\n}

Tip: The folder structure is the URL structure — plan your folders and your URLs are decided for you.