Routing and Layouts

React on its own has no idea what a URL is. It renders components; how the browser address bar relates to them is somebody else's job. In Next.js that job is done by the file system: the folders you create under app are the segments of your URLs, and files with particular names give each segment its page, its surrounding layout, and what to show while it loads or when it fails.

This means routing is configuration you can see. There is no list of routes to keep in step with the components — moving a folder moves the URL.

app/
  layout.tsx                     the shell around everything: /
  page.tsx                       /
  employees/
    layout.tsx                   wraps every URL under /employees
    page.tsx                     /employees
    loading.tsx                  shown while /employees is loading
    error.tsx                    shown if /employees throws
    [id]/
      page.tsx                   /employees/e-104
      edit/
        page.tsx                 /employees/e-104/edit
  courses/
    page.tsx                     /courses
    [slug]/
      page.tsx                   /courses/react-nextjs
      lessons/
        [lessonSlug]/
          page.tsx               /courses/react-nextjs/lessons/rn-jsx
    not-found.tsx                shown when a course slug does not exist

• A folder is a URL segment. A page.tsx inside it makes that URL reachable — a folder without one is just a container, useful for grouping files that are not routes.
• Square brackets mark a dynamic segment. [id] matches any single segment and hands you its value, so one file serves every employee.
• Nesting continues as deep as you need. The lesson page is four segments down and is still one file in one folder.
• loading, error and not-found apply to the segment they sit in and everything below it, unless a deeper folder provides its own.
• Only these reserved filenames create behaviour. Any other file in the folder — a component, a helper, a test — is ignored by the router, so you can keep route-specific code next to the route that uses it.

import type { ReactNode } from "react";
import Link from "next/link";
import { getDepartments } from "@/data/employees";

export default async function EmployeesLayout({ children }: { children: ReactNode }) {
  const departments = await getDepartments();

  return (
    <div className="grid gap-8 lg:grid-cols-[220px_1fr]">
      <nav aria-label="Departments">
        <ul>
          {departments.map((department) => (
            <li key={department.slug}>
              <Link href={"/employees?department=" + department.slug}>
                {department.name}
              </Link>
            </li>
          ))}
        </ul>
      </nav>

      {/* The page for the current URL renders here. */}
      <main>{children}</main>
    </div>
  );
}

• A layout receives the matching page as children and wraps it. Nested layouts stack: the root layout wraps this one, which wraps the page.
• The departments are loaded once in the layout rather than in every page underneath it, because this is a server component and it can await data directly.
• aria-label on the nav names the region, which matters as soon as a page has more than one navigation landmark. Without it a screen reader user hears "navigation" twice and cannot tell them apart.
• Link performs a client-side navigation: it swaps the page content without a full document reload, and prefetches the target when the link is near the viewport. A plain anchor works but reloads everything, which throws away the whole benefit.
• The root layout is the only one that renders html and body tags. Every other layout returns ordinary markup.

import { notFound } from "next/navigation";
import { getEmployeeById } from "@/data/employees";

export default async function EmployeePage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const employee = await getEmployeeById(id);

  if (!employee) notFound();

  return (
    <article>
      <h1>{employee.name}</h1>
      <p>{employee.jobTitle} · {employee.department}</p>
    </article>
  );
}

• params carries the dynamic segments for this route. In current Next.js versions it is a promise, so you await it — the same applies to searchParams.
• The key of the object matches the folder name. A folder called [id] gives you params.id; renaming the folder renames the property.
• notFound() stops rendering and shows the nearest not-found file. Returning your own "not found" markup instead would send a 200 status for a page that does not exist, which misleads search engines and monitoring.
• An unknown id is an expected outcome of a URL someone typed or bookmarked, not an exceptional failure. Handling it explicitly is part of the route's job.