# New app — App Router + TS by default
npx create-next-app@latest my-app --typescript --app --tailwind --eslint

# Daily-loop
cd my-app
npm run dev                            # next dev on :3000
npm run build && npm run start          # prod build + start
npm run lint                            # eslint
npx tsc --noEmit                        # type-check

# Env vars
echo "DATABASE_URL=..." >> .env.local   # never commit .env.local
# Prefix public vars with NEXT_PUBLIC_ to expose them to the browser bundle.

# Deploy targets
vercel                                  # zero-config on Vercel
docker build -t my-app .                # standalone output with Node

// app/posts/[slug]/page.tsx — server component by default
import { notFound } from "next/navigation";
import { Suspense } from "react";

type Params = { params: Promise<{ slug: string }> };

// Build-time static params (SSG)
export async function generateStaticParams() {
  const slugs = await fetch("https://api.example.com/posts").then(r => r.json());
  return slugs.map((s: string) => ({ slug: s }));
}

// SEO
export async function generateMetadata({ params }: Params) {
  const { slug } = await params;
  return { title: `Post: ${slug}` };
}

// The page itself
export default async function Page({ params }: Params) {
  const { slug } = await params;
  const post = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 60 },          // ISR — refetch at most every 60s
  }).then(r => r.ok ? r.json() : null);

  if (!post) notFound();

  return (
    

      
{post.title}
      Loading comments…
}>
        
      
    
  );
}

// app/posts/actions.ts — server actions
"use server";
import { revalidatePath, revalidateTag } from "next/cache";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { z } from "zod";

const Schema = z.object({
  title: z.string().min(1).max(200),
  body:  z.string().min(1),
});

export async function createPost(_prev: unknown, formData: FormData) {
  const parsed = Schema.safeParse({
    title: formData.get("title"),
    body:  formData.get("body"),
  });
  if (!parsed.success) {
    return { error: parsed.error.flatten().fieldErrors };
  }

  const session = (await cookies()).get("session")?.value;
  if (!session) return { error: { auth: ["Sign in required"] } };

  const post = await db.posts.create({ data: parsed.data });

  revalidateTag("posts");                       // bust cached fetches tagged "posts"
  revalidatePath("/posts");                     // and the /posts route segment
  redirect(`/posts/${post.slug}`);
}

// middleware.ts — runs in the edge runtime before every matched request
import { NextResponse, type NextRequest } from "next/server";

export function middleware(req: NextRequest) {
  // 1 · Auth gate
  const session = req.cookies.get("session")?.value;
  if (!session && req.nextUrl.pathname.startsWith("/dashboard")) {
    const url = req.nextUrl.clone();
    url.pathname = "/login";
    url.searchParams.set("from", req.nextUrl.pathname);
    return NextResponse.redirect(url);
  }

  // 2 · Header shaping
  const res = NextResponse.next();
  res.headers.set("X-Frame-Options", "DENY");
  res.headers.set("Strict-Transport-Security", "max-age=31536000");
  return res;
}

export const config = {
  // Only run on these paths — skip _next, static, images
  matcher: ["/((?!_next|favicon.ico|.*\\..*).*)"],
};

// app/items/page.tsx — list + create with a server action
import { createItem } from "./actions";
import { revalidateTag } from "next/cache";

async function getItems() {
  return fetch("https://api.example.com/items", {
    next: { tags: ["items"], revalidate: 30 },
  }).then(r => r.json());
}

export default async function Page() {
  const items: { id: number; name: string }[] = await getItems();
  return (
    

      

        {items.map(i => 
{i.name}
)}
      
      

        
        Create
      
    
  );
}

// app/items/actions.ts
"use server";
import { revalidateTag } from "next/cache";

export async function createItem(formData: FormData) {
  const name = String(formData.get("name") ?? "");
  if (!name) return;
  await fetch("https://api.example.com/items", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name }),
  });
  revalidateTag("items");
}