Next.js Cheatsheet 02 — App Router Routing

app/posts/[id]/page.tsx       → /posts/:id

async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  return <p>{id}</p>;
}

app/docs/[...slug]/page.tsx   → /docs/a, /docs/a/b, /docs/a/b/c

async function Page({ params }: { params: Promise<{ slug: string[] }> }) {
  const { slug } = await params;     // ["a", "b", "c"]
}

app/docs/[[...slug]]/page.tsx → /docs, /docs/a, /docs/a/b

app/(marketing)/about/page.tsx   → /about
app/(app)/dashboard/page.tsx     → /dashboard

app/(marketing)/layout.tsx       # wraps marketing pages only
app/(app)/layout.tsx             # wraps app pages only

app/dashboard/
├── layout.tsx
├── page.tsx
├── @analytics/page.tsx
└── @team/page.tsx

// layout.tsx
export default function Layout({ children, analytics, team }: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
}) {
  return (
    <div>
      {children}
      {analytics}
      {team}
    </div>
  );
}

app/feed/page.tsx
app/feed/(.)photo/[id]/page.tsx    # intercepts /photo/:id when navigating from /feed
app/photo/[id]/page.tsx            # full route when directly visited

app/dashboard/@team/default.tsx

// app/posts/[id]/page.tsx
export async function generateStaticParams() {
  const posts = await db.post.findMany();
  return posts.map((p) => ({ id: String(p.id) }));
}

async function Page({ params }) {
  const { id } = await params;
  ...
}

export const dynamic = "force-static";
// All requests rendered at build time. No dynamic features.

export const dynamic = "force-dynamic";
// All requests rendered on demand.

export const dynamic = "auto";       // default — Next decides

export const dynamicParams = false;
// 404 for params not in generateStaticParams

export const revalidate = 60;
// ISR: regenerate page every 60s

export const fetchCache = "force-cache" | "default-cache" | "default-no-store" | "force-no-store";

// Static
export const metadata = { title: "Page" };

// Dynamic
export async function generateMetadata({ params }) {
  const { id } = await params;
  const post = await fetchPost(id);
  return { title: post.title };
}

async function Page({ params }) {
  const post = await db.post.find(params.id);
  if (!post) notFound();           // shows nearest not-found.tsx
  return <Article post={post} />;
}

async function Page({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
  const { q } = await searchParams;
  return <p>q = {q}</p>;
}

// middleware.ts (root)
import { NextResponse, type NextRequest } from "next/server";

export function middleware(req: NextRequest) {
  if (!req.cookies.has("session")) {
    return NextResponse.redirect(new URL("/login", req.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: ["/dashboard/:path*"],
};