Next.js

1app/
2  layout.tsx              // root layout: <html>, <body>, fonts
3  page.tsx                // "/"
4  (shop)/
5    layout.tsx            // shared shop layout, URL unchanged
6    products/
7      page.tsx            // "/products"
8      loading.tsx         // streamed skeleton
9      [slug]/
10        page.tsx          // "/products/blue-shoe"
11        not-found.tsx
12  api/
13    health/route.ts       // GET /api/health
14  sitemap.ts              // /sitemap.xml
15  robots.ts               // /robots.txt

1// app/products/[slug]/page.tsx  (Server Component)
2import { notFound } from "next/navigation";
3import { AddToCart } from "./add-to-cart"; // has "use client" at the top
4 
5export default async function ProductPage({ params }: { params: Promise<{ slug: string }> }) {
6  const { slug } = await params;
7  const res = await fetch(`https://api.example.com/products/${slug}`);
8  if (!res.ok) notFound();
9  const product: { id: string; name: string; description: string } = await res.json();
10 
11  return (
12    <article>
13      <h1>{product.name}</h1>
14      <p>{product.description}</p>
15      <AddToCart productId={product.id} />
16    </article>
17  );
18}

1// app/blog/[slug]/page.tsx
2export const revalidate = 3600; // ISR: regenerate at most once an hour
3 
4export async function generateStaticParams() {
5  const posts: { slug: string }[] = await fetch("https://cms.example.com/posts")
6    .then((r) => r.json());
7  return posts.map((p) => ({ slug: p.slug })); // pre-built at build time
8}
9 
10// app/actions.ts
11"use server";
12import { revalidatePath } from "next/cache";
13 
14export async function publishPost(slug: string) {
15  // ...save to the CMS or database...
16  revalidatePath(`/blog/${slug}`); // refresh that page on the next request
17}

1// next.config.ts (Next.js 16)
2// const nextConfig = { cacheComponents: true };
3 
4// lib/products.ts
5import { cacheLife, cacheTag } from "next/cache";
6 
7export async function getProducts() {
8  "use cache";
9  cacheLife("hours");          // built-in profile
10  cacheTag("products");
11  const res = await fetch("https://api.example.com/products");
12  return res.json();
13}
14 
15// app/admin/actions.ts
16"use server";
17import { revalidateTag, updateTag } from "next/cache";
18 
19export async function onCatalogImport() { revalidateTag("products", "max"); } // background refresh
20export async function onPriceEdit() { updateTag("products"); } // admin sees change now

1// app/products/[slug]/page.tsx
2import type { Metadata } from "next";
3 
4export async function generateMetadata({
5  params,
6}: {
7  params: Promise<{ slug: string }>;
8}): Promise<Metadata> {
9  const { slug } = await params;
10  const product = await fetch(`https://api.example.com/products/${slug}`).then((r) => r.json());
11  return {
12    title: product.name, // root layout template adds " | Example Shop"
13    description: product.summary,
14    alternates: {
15      canonical: `/products/${slug}`,
16      languages: { en: `/en/products/${slug}`, ru: `/ru/products/${slug}` },
17    },
18    openGraph: { images: [product.imageUrl] },
19  };
20}

1// app/layout.tsx
2import { Inter } from "next/font/google";
3const inter = Inter({ subsets: ["latin", "cyrillic"], display: "swap", variable: "--font-main" });
4 
5export default function RootLayout({ children }: { children: React.ReactNode }) {
6  return (
7    <html lang="en" className={inter.variable}>
8      <body>{children}</body>
9    </html>
10  );
11}
12 
13// app/page.tsx
14import Image from "next/image";
15export default function Home() {
16  return (
17    <Image src="/hero.jpg" alt="Fresh coffee beans" width={1600} height={900}
18      sizes="100vw" preload /> // Next.js 15: use priority instead of preload
19  );
20}

1// next.config.ts - self-hosted build for Docker
2import type { NextConfig } from "next";
3 
4const nextConfig: NextConfig = {
5  output: "standalone",
6  images: {
7    remotePatterns: [{ protocol: "https", hostname: "cdn.example.com" }],
8  },
9};
10export default nextConfig;
11 
12// Build and run:
13//   npm ci && npm run build
14//   node .next/standalone/server.js   (copy public/ and .next/static/ alongside)
15// Behind nginx: proxy_pass http://127.0.0.1:3000;

1"use client";
2import { useRouter } from "next/navigation";
3import { useTransition } from "react";
4 
5export function MarkShippedButton({ orderId }: { orderId: string }) {
6  const router = useRouter();
7  const [isPending, startTransition] = useTransition();
8 
9  async function markShipped() {
10    await fetch(`/api/orders/${orderId}/ship`, { method: "POST" });
11    startTransition(() => router.refresh()); // refetch RSC payload, keep client state
12  }
13 
14  return <button onClick={markShipped} disabled={isPending}>Mark shipped</button>;
15}
16 
17// next.config.ts (optional): experimental: { staleTimes: { dynamic: 30, static: 180 } }

1"use server";
2import "server-only";
3import { z } from "zod";
4import { updateTag } from "next/cache";
5import { getSession } from "@/lib/auth";
6import { db } from "@/lib/db";
7 
8const Input = z.object({ productId: z.string().uuid(), price: z.number().int().positive() });
9 
10export async function updatePrice(raw: unknown) {
11  const session = await getSession();
12  if (!session?.user.isAdmin) throw new Error("Forbidden"); // authorise every call
13  const { productId, price } = Input.parse(raw);             // never trust arguments
14  await db.product.update({ where: { id: productId }, data: { price } });
15  updateTag(`product-${productId}`);
16}

1// proxy.ts (Next.js 16; was middleware.ts)
2import { NextResponse, type NextRequest } from "next/server";
3 
4export function proxy(request: NextRequest) {
5  const hasSession = request.cookies.has("session");
6  if (!hasSession && request.nextUrl.pathname.startsWith("/account")) {
7    const url = new URL("/login", request.url);
8    url.searchParams.set("next", request.nextUrl.pathname);
9    return NextResponse.redirect(url);
10  }
11  return NextResponse.next();
12}
13 
14export const config = {
15  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)"],
16};

1// next.config.ts - multi-instance self-hosting
2import type { NextConfig } from "next";
3 
4const nextConfig: NextConfig = {
5  output: "standalone",
6  deploymentId: process.env.GIT_SHA,              // same value on every instance
7  cacheHandler: require.resolve("./cache-handler.mjs"), // shared store, e.g. Redis
8  cacheMaxMemorySize: 0,                          // no per-instance memory cache
9};
10export default nextConfig;
11 
12// nginx: content-hashed assets can be cached for a year
13// location /_next/static/ { proxy_pass http://app; add_header Cache-Control "public, max-age=31536000, immutable"; }
14 
15// Inspect client bundles (Next.js 16.1+):
16//   npx next experimental-analyze