Next.js 16 cheatsheet

Next.js 16: Routing and files

7 common Next.js 16 tasks.

Create a page

A page.tsx file inside app/ is a route. This one serves /about from app/about/page.tsx.

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

A layout wraps its pages and persists across navigation.

export default function Layout({ children }: { children: React.ReactNode }) {
  return <section>{children}</section>;
}

In app/blog/[slug]/page.tsx, params is a promise, so await it.

export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  return <h1>{slug}</h1>;
}

Navigate on the client without a full page reload.

import Link from "next/link";

<Link href="/about">About</Link>

A route.ts file exports a function per HTTP method.

export async function GET() {
  return Response.json({ ok: true });
}

A loading.tsx next to a page is shown while the page streams in.

export default function Loading() {
  return <p>Loading...</p>;
}

Call notFound() in a server component to render the closest not-found page.

import { notFound } from "next/navigation";

if (!post) notFound();