Next.js App Router Cheat Sheet

This quick reference guide provides code snippets for the most common APIs and configuration options in Next.js App Router.

1. Directory File Conventions

Inside the app directory, Next.js matches routes using these specific reserved file names:

2. Programmatic Navigation and Redirects

// 1. Client-Side Navigation
import { useRouter } from "next/navigation";

function ClientComponent() {
  const router = useRouter();
  // Navigate programmatically
  // router.push("/dashboard");
}

// 2. Server-Side Redirect (Server Components & Server Actions)
import { redirect } from "next/navigation";

async function myAction() {
  redirect("/success-page");
}

3. Data Fetching Caching Modes

// A. Force Dynamic rendering (equivalent to getServerSideProps)
fetch("https://api.example.com/data", { cache: "no-store" });

// B. Force Static rendering (equivalent to getStaticProps)
fetch("https://api.example.com/data", { cache: "force-cache" });

// C. Revalidate cache after 60 seconds (equivalent to ISR revalidate)
fetch("https://api.example.com/data", { next: { revalidate: 60 } });

4. On-Demand Cache Revalidation

import { revalidatePath, revalidateTag } from "next/cache";

// Purge cache for a specific route
revalidatePath("/blog");

// Purge cache for all fetch calls tagged with this tag name
revalidateTag("products-cache-tag");