Next.js App Router — Modern Patterns for 2026

app/
├── layout.tsx               # root layout (wraps everything)
├── page.tsx                 # home page
├── loading.tsx              # shown while page is loading
├── error.tsx                # shown on errors
├── not-found.tsx            # 404
├── (marketing)/             # route group — doesn't add to URL
│   ├── about/page.tsx
│   └── pricing/page.tsx
├── (app)/                   # route group for authenticated routes
│   ├── layout.tsx           # different layout (e.g. with sidebar)
│   ├── dashboard/page.tsx
│   └── settings/page.tsx
├── api/                     # route handlers (former API routes)
│   └── users/route.ts
├── blog/
│   ├── page.tsx             # /blog
│   └── [slug]/page.tsx      # /blog/<slug>

// app/blog/page.tsx
import { db } from '@/lib/db';

export default async function BlogList() {
  const posts = await db.post.findMany();
  return (
    <ul>
      {posts.map(p => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

// app/components/LikeButton.tsx
'use client';
import { useState } from 'react';

export function LikeButton({ postId }: { postId: string }) {
  const [liked, setLiked] = useState(false);
  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? 'Liked' : 'Like'}
    </button>
  );
}

export default async function Page() {
  // Cached until revalidated (since Next.js 15, fetch is not cached unless you ask)
  const staticData = await fetch('https://api.example.com/static', {
    cache: 'force-cache',
  }).then(r => r.json());

  // Revalidate every 60s
  const dynamicData = await fetch('https://api.example.com/news', {
    next: { revalidate: 60 },
  }).then(r => r.json());

  // Always fresh
  const liveData = await fetch('https://api.example.com/stock', {
    cache: 'no-store',
  }).then(r => r.json());

  return <article>...</article>;
}

// app/post/[id]/page.tsx
import { revalidatePath } from 'next/cache';

async function addComment(postId: string, formData: FormData) {
  'use server';
  const text = formData.get('text') as string;
  await db.comment.create({ data: { postId, text } });
  revalidatePath(`/post/${postId}`);
}

export default async function Post({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params; // params is a Promise since Next.js 15
  return (
    <form action={addComment.bind(null, id)}>
      <textarea name="text" />
      <button type="submit">Comment</button>
    </form>
  );
}

import { Suspense } from 'react';

export default function Dashboard() {
  return (
    <div>
      <Header />
      <Suspense fallback={<Skeleton />}>
        <SlowReport />
      </Suspense>
      <Suspense fallback={<Skeleton />}>
        <EvenSlowerReport />
      </Suspense>
    </div>
  );
}

// next.config.ts (Next.js 16)
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default nextConfig;

// app/product/[id]/page.tsx
import { Suspense } from 'react';

export default async function Product({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  return (
    <div>
      {/* Static — prerendered */}
      <ProductDescription id={id} />
      <Suspense fallback={<div>Loading cart...</div>}>
        {/* Dynamic — user-specific, rendered per request */}
        <UserCart />
      </Suspense>
    </div>
  );
}

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // Redirect non-www to www
  if (!request.nextUrl.host.startsWith('www.')) {
    return NextResponse.redirect(new URL(`https://www.${request.nextUrl.host}${request.nextUrl.pathname}`));
  }

  // Auth gate
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    const token = request.cookies.get('session');
    if (!token) {
      return NextResponse.redirect(new URL('/login', request.url));
    }
  }

  // A/B test
  const bucket = request.cookies.get('ab')?.value || (Math.random() > 0.5 ? 'a' : 'b');
  const response = NextResponse.next();
  response.cookies.set('ab', bucket);
  return response;
}

export const config = {
  matcher: ['/((?!api|_next|favicon.ico).*)'],
};

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next';

export async function generateMetadata(
  { params }: { params: Promise<{ slug: string }> }
): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);
  return {
    title: `${post.title} | Your Blog`,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
    twitter: { card: 'summary_large_image' },
  };
}

// Static (at build time) — default behaviour
export default async function Page() {
  const data = await fetch('...'); return <div>{data}</div>;
}

// ISR (Incremental Static Regeneration)
export const revalidate = 60; // seconds

// SSR (every request fresh)
export const dynamic = 'force-dynamic';

// PPR (partial, as above): cacheComponents in next.config on Next.js 16

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  output: 'export',
  trailingSlash: true,            // /about/ -> out/about/index.html, simplest on Apache
  images: { unoptimized: true },  // the default image optimiser needs a server
};

export default nextConfig;

npm run build     # next build writes the static site to out/

# next.config.ts: output: 'standalone'
npm ci
npm run build
cp -r public .next/standalone/ && cp -r .next/static .next/standalone/.next/
node .next/standalone/server.js    # listens on port 3000; set PORT to change it