Next.js cheatsheet

Syntax snippets and quick notes for revision.

NextJS Introduction

export default function Page() {
  return <section className="p-6"><h1>NextJS Introduction</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

Use this nextjs introduction pattern when a Next.js task needs a small, readable starting point.

App Router Basics

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ active: true, total: 51 });
}

Use this app router basics pattern when a Next.js task needs a small, readable starting point.

Routing and Pages

export default function Page() {
  return <section className="p-6"><h1>Routing and Pages</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

Use this routing and pages pattern when a Next.js task needs a small, readable starting point.

Nested Layouts

export default function Page() {
  return <section className="p-6"><h1>Nested Layouts</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

Use this nested layouts pattern when a Next.js task needs a small, readable starting point.

Dynamic Routes

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ active: true, total: 54 });
}

Use this dynamic routes pattern when a Next.js task needs a small, readable starting point.

Linking and Navigating

export default function Page() {
  return <section className="p-6"><h1>Linking and Navigating</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

Use this linking and navigating pattern when a Next.js task needs a small, readable starting point.

Server Components

// NextJS Server Component
import { SITE_URL } from "@/lib/constants";

export default async function Page() {
  const res = await fetch(`${SITE_URL}/api/orders`);
  const orders = await res.json();
  return <main><h1>Orders ({orders.length})</h1></main>;
}

Use this server components pattern when a Next.js task needs a small, readable starting point.

Client Components

export default function Page() {
  return <section className="p-6"><h1>Client Components</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

Use this client components pattern when a Next.js task needs a small, readable starting point.

Data Fetching

export default function Page() {
  return <section className="p-6"><h1>Data Fetching</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

Use this data fetching pattern when a Next.js task needs a small, readable starting point.

Server Actions

// NextJS Server Component
import { SITE_URL } from "@/lib/constants";

export default async function Page() {
  const res = await fetch(`${SITE_URL}/api/orders`);
  const orders = await res.json();
  return <main><h1>Orders ({orders.length})</h1></main>;
}

Use this server actions pattern when a Next.js task needs a small, readable starting point.

Caching

export default function Page() {
  return <section className="p-6"><h1>Caching</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

Use this caching pattern when a Next.js task needs a small, readable starting point.

Static Site Generation

export default function Page() {
  return <section className="p-6"><h1>Static Site Generation</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

Use this static site generation pattern when a Next.js task needs a small, readable starting point.