Next.js 16 Cheat Sheet - Every Pattern You Need
DevTools StoreNext.js 16 Cheat Sheet (2026)
Every pattern you need for Next.js 16 App Router. Bookmark this page.
Server Components (Default)
All components are Server Components by default. They run on the server and can be async.
// app/page.tsx - Server Component (default)
export default async function Page() {
const data = await fetch('https://api.example.com/data');
return <div>{data}</div>;
}Client Components
Add 'use client' directive for interactivity, hooks, and browser APIs.
'use client';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}Route Handlers (API Routes)
// app/api/users/route.ts
export async function GET(request: Request) {
const users = await db.user.findMany();
return Response.json(users);
}
export async function POST(request: Request) {
const body = await request.json();
const user = await db.user.create({ data: body });
return Response.json(user, { status: 201 });
}Layouts
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}Loading & Error States
// app/loading.tsx - Automatic loading UI
export default function Loading() {
return <div>Loading...</div>;
}
// app/error.tsx - Error boundary (client component)
'use client';
export default function Error({ error, reset }) {
return <div><h2>Error!</h2><button onClick={reset}>Retry</button></div>;
}Metadata & SEO
// app/page.tsx
export const metadata = {
title: 'My Page',
description: 'Page description',
openGraph: { images: ['/og.png'] },
};Middleware
// middleware.ts (root directory)
import { NextResponse } from 'next/server';
export function middleware(request) {
if (!request.cookies.get('token')) {
return NextResponse.redirect(new URL('/login', request.url));
}
}Get a production-ready Next.js 16 SaaS boilerplate with auth, Stripe, and Prisma. All 7 developer products for pay-what-you-want:
Get the Bundle