Next.js 16 Cheat Sheet (2026)

Quick reference for Next.js 16 with App Router, React 19, and TypeScript.

App Router Structure

app/
  layout.tsx     # Root layout (required)
  page.tsx       # Home page (/)
  loading.tsx    # Loading UI
  error.tsx      # Error boundary
  not-found.tsx  # 404 page
  [slug]/
    page.tsx     # Dynamic route
  (group)/
    page.tsx     # Route group

Server Components (default)

1
2
3
4
5
// app/page.tsx — runs on server by default
export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  return <div>{data}</div>;
}

Client Components

1
2
3
4
5
6
7
'use client'; // opt into client rendering
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count   1)}>{count}</button>;
}

React 19 New Features

// use() hook — unwrap promises in components
import { use } from 'react';

function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
  const user = use(userPromise);
  return <div>{user.name}</div>;
}

// useActionState — manage form state
import { useActionState } from 'react';

function Form() {
  const [state, submitAction] = useActionState(async (prev, formData) => {
    return await saveData(formData);
  }, null);
  return <form action={submitAction}>...</form>;
}

Route Handlers

// app/api/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  return NextResponse.json({ message: 'Hello' });
}

export async function POST(request: Request) {
  const body = await request.json();
  return NextResponse.json({ received: body });
}

Static Export

1
2
3
4
// next.config.ts
import type { NextConfig } from 'next';
const config: NextConfig = { output: 'export' };
export default config;

Metadata API

// static metadata
export const metadata = {
  title: 'My Page',
  description: 'Page description',
  openGraph: { title: 'My Page', type: 'website' },
};

// dynamic metadata
export async function generateMetadata({ params }) {
  return { title: `Page ${params.slug}` };
}

Need a full SaaS boilerplate?

ShipKit gives you all of this plus auth, Stripe, database, landing page, and dashboard — pre-built and ready to customize.

$149 one-time — https://rentry.co/shipkit-nextjs-boilerplate
Full store: https://rentry.co/devtools-store

Edit

Pub: 13 May 2026 16:43 UTC

Views: 6