Next.js App Router: pages, layouts and routes

npx create-next-app@latest kite-studio --yes
cd kite-studio
npm run dev

export type Service = {
  slug: string;
  title: string;
  summary: string;
  details: string;
};

const services: Service[] = [
  {
    slug: "websites",
    title: "Websites",
    summary: "Landing pages and company sites.",
    details: "Design, development and launch of a fast, accessible site.",
  },
  {
    slug: "web-apps",
    title: "Web apps",
    summary: "Dashboards, portals and internal tools.",
    details: "A product with accounts, roles and data that changes every day.",
  },
  {
    slug: "mobile-apps",
    title: "Mobile apps",
    summary: "iOS and Android apps.",
    details: "One codebase for both platforms and a release to the stores.",
  },
];

export function getServices(): Service[] {
  return services;
}

export function getService(slug: string): Service | undefined {
  return services.find((service) => service.slug === slug);
}

import type { Metadata } from "next";
import { NavLinks } from "./nav-links";
import "./globals.css";

export const metadata: Metadata = {
  title: {
    template: "%s | Kite Studio",
    default: "Kite Studio",
  },
  description: "Websites, web apps and mobile apps.",
};

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="en">
      <body>
        <header className="site-header">
          <NavLinks />
        </header>
        <main>{children}</main>
        <footer className="site-footer">© Kite Studio</footer>
      </body>
    </html>
  );
}

import Link from "next/link";

export default function HomePage() {
  return (
    <section>
      <h1>We build websites and apps</h1>
      <p>Pick a service to see what is included.</p>
      <Link href="/services">All services</Link>
    </section>
  );
}

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Contacts",
  description: "How to reach Kite Studio.",
};

export default function ContactsPage() {
  return (
    <section>
      <h1>Contacts</h1>
      <p>
        Email: <a href="mailto:hello@example.com">hello@example.com</a>
      </p>
    </section>
  );
}

import Link from "next/link";
import { getServices } from "@/lib/services";

export default function ServicesLayout({ children }: LayoutProps<"/services">) {
  const services = getServices();

  return (
    <div className="services">
      <aside>
        <h2>Services</h2>
        <ul>
          {services.map((service) => (
            <li key={service.slug}>
              <Link href={`/services/${service.slug}`}>{service.title}</Link>
            </li>
          ))}
        </ul>
      </aside>
      <div>{children}</div>
    </div>
  );
}

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

const links = [
  { href: "/", label: "Home" },
  { href: "/services", label: "Services" },
  { href: "/contacts", label: "Contacts" },
];

export function NavLinks() {
  const pathname = usePathname();

  return (
    <nav aria-label="Main">
      {links.map(({ href, label }) => {
        const isActive =
          href === "/" ? pathname === "/" : pathname.startsWith(href);
        return (
          <Link
            key={href}
            href={href}
            aria-current={isActive ? "page" : undefined}
          >
            {label}
          </Link>
        );
      })}
    </nav>
  );
}

import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { getService, getServices } from "@/lib/services";

export function generateStaticParams() {
  return getServices().map((service) => ({ slug: service.slug }));
}

export async function generateMetadata({
  params,
}: PageProps<"/services/[slug]">): Promise<Metadata> {
  const { slug } = await params;
  const service = getService(slug);
  if (!service) return { title: "Service not found" };

  return { title: service.title, description: service.summary };
}

export default async function ServicePage({
  params,
}: PageProps<"/services/[slug]">) {
  const { slug } = await params;
  const service = getService(slug);
  if (!service) notFound();

  return (
    <article>
      <h1>{service.title}</h1>
      <p>{service.details}</p>
      <Link href="/contacts">Discuss a project</Link>
    </article>
  );
}

$ npm run build

▲ Next.js 16.4.0 (Turbopack)
✓ Running next.config.ts took 27ms
- Cache Components enabled
- Partial Prefetching enabled

  Creating an optimized production build ...
✓ Compiled successfully in 532ms
  Running TypeScript ...
  Finished TypeScript in 1258ms ...
  Collecting page data using 8 workers ...
✓ Generating static pages using 8 workers (10/10) in 949ms
  Finalizing page optimization ...

Route (app)
┌ ○ /
├ ○ /_not-found
├ ○ /contacts
├ ○ /services
└   /services/[slug]
  ├ ◐ /services/[slug]
  ├ ○ /services/websites
  ├ ○ /services/web-apps
  └ ○ /services/mobile-apps

ƒ Proxy (Middleware)

○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content

"use client";

import { useRouter } from "next/navigation";

type Option = { slug: string; title: string };

export function ServicePicker({ options }: { options: Option[] }) {
  const router = useRouter();

  return (
    <label>
      Go to service{" "}
      <select
        defaultValue=""
        onChange={(event) => router.push(`/services/${event.target.value}`)}
      >
        <option value="" disabled>
          Choose…
        </option>
        {options.map((option) => (
          <option key={option.slug} value={option.slug}>
            {option.title}
          </option>
        ))}
      </select>
    </label>
  );
}

import type { Metadata } from "next";
import { getServices } from "@/lib/services";
import { ServicePicker } from "./service-picker";

export const metadata: Metadata = {
  title: "Services",
};

export default function ServicesPage() {
  const services = getServices();

  return (
    <section>
      <h1>Services</h1>
      <ServicePicker
        options={services.map(({ slug, title }) => ({ slug, title }))}
      />
      {services.map((service) => (
        <article key={service.slug}>
          <h2>{service.title}</h2>
          <p>{service.summary}</p>
        </article>
      ))}
    </section>
  );
}

export default function Loading() {
  return <p aria-busy="true">Loading…</p>;
}

"use client";

import { useEffect } from "react";

export default function ServicesError({
  error,
  retry,
}: {
  error: Error & { digest?: string };
  retry: () => void;
}) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <section>
      <h2>Could not load this section</h2>
      <button type="button" onClick={() => retry()}>
        Try again
      </button>
    </section>
  );
}

import Link from "next/link";

export default function ServiceNotFound() {
  return (
    <section>
      <h1>No such service</h1>
      <Link href="/services">Back to all services</Link>
    </section>
  );
}

$ curl -s -o /dev/null -w "%{http_code}\n" http://localhost:3000/services/abc
200
$ curl -s -o /dev/null -w "%{http_code}\n" http://localhost:3000/services/abc
404

import { NextResponse, type NextRequest } from "next/server";
import { getService } from "@/lib/services";

export function proxy(request: NextRequest) {
  const slug = request.nextUrl.pathname.split("/")[2];
  if (!getService(slug)) {
    return NextResponse.rewrite(new URL("/404", request.url));
  }
}

export const config = {
  matcher: "/services/:slug",
};

$ npm run start &
$ for path in / /services /services/websites /contacts /services/unknown; do
    curl -s -o page.html -w "%{http_code} $path " "http://localhost:3000$path"
    grep -o '<title>[^<]*</title>' page.html | head -1
  done
200 / <title>Kite Studio</title>
200 /services <title>Services | Kite Studio</title>
200 /services/websites <title>Websites | Kite Studio</title>
200 /contacts <title>Contacts | Kite Studio</title>
404 /services/unknown <title>404: This page could not be found.</title>