2nd/10_Wiki/Topics/Architecture/Next-js-and-Modern-Web.md

---
id: wiki-2026-0508-next-js-and-modern-web
title: Next.js and Modern Web
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Next.js, Next 16, Modern React]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [nextjs, react, rsc, server-actions, web]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: nextjs-16
---

# Next.js and Modern Web

## 매 한 줄
> **"매 Next.js 16 = React 19 + RSC + Turbopack + edge-first"**. 2016 SSR helper → 2024 App Router → 2026 RSC default. 매 React 의 fullstack-y reference impl. Vercel runtime 외 의 self-host (Node, Docker, Cloudflare) 의 mature.

## 매 핵심

### 매 capability
- **App Router**: file-based routing + RSC + nested layouts.
- **Server Components**: zero JS by default.
- **Server Actions**: form/mutation 의 RPC.
- **Streaming**: Suspense boundary 의 progressive render.
- **Turbopack**: Rust bundler, prod build 5x faster.
- **Edge runtime**: V8 isolates, sub-50ms cold start.

### 매 rendering mode
- **Static (SSG)**: build-time, default for no-data routes.
- **Dynamic (SSR)**: per-request.
- **ISR**: stale-while-revalidate.
- **PPR (Partial Pre-rendering)**: 매 static shell + dynamic streamed (16+ stable).

### 매 응용
1. Marketing + dashboard combo: PPR.
2. E-commerce: ISR + edge personalize.
3. AI chat app: Server Actions + streaming response.

## 💻 패턴

### App Router file structure
```
app/
  layout.tsx          # root layout (server)
  page.tsx            # /
  products/
    page.tsx          # /products
    [id]/
      page.tsx        # /products/123
      loading.tsx     # Suspense fallback
      error.tsx       # error boundary
  api/
    cart/
      route.ts        # /api/cart
```

### Server component data fetch
```tsx
// app/products/[id]/page.tsx
import { db } from "@/lib/db";
import { notFound } from "next/navigation";

export default async function Page({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const product = await db.product.findUnique({ where: { id } });
  if (!product) notFound();
  return <article>{product.name}</article>;
}

export async function generateStaticParams() {
  const products = await db.product.findMany({ select: { id: true } });
  return products.map((p) => ({ id: p.id }));
}
```

### Server Action
```tsx
// app/contact/actions.ts
"use server";
import { revalidatePath } from "next/cache";
import { z } from "zod";

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

export async function sendMessage(_: unknown, form: FormData) {
  const parsed = Schema.safeParse(Object.fromEntries(form));
  if (!parsed.success) return { error: parsed.error.flatten() };
  await db.message.create({ data: parsed.data });
  revalidatePath("/contact");
  return { ok: true };
}
```

```tsx
// app/contact/page.tsx
"use client";
import { useActionState } from "react";
import { sendMessage } from "./actions";

export default function Page() {
  const [state, action, pending] = useActionState(sendMessage, null);
  return (
    <form action={action}>
      <input name="email" type="email" />
      <textarea name="body" />
      <button disabled={pending}>{pending ? "..." : "Send"}</button>
      {state?.ok && <p>Sent</p>}
    </form>
  );
}
```

### Streaming + Suspense
```tsx
import { Suspense } from "react";

export default function Page() {
  return (
    <>
      <h1>Dashboard</h1>
      <Suspense fallback={<Sk />}>
        <Sales />   {/* slow server fetch */}
      </Suspense>
      <Suspense fallback={<Sk />}>
        <Inventory />
      </Suspense>
    </>
  );
}
```

### Partial Prerendering (Next 16)
```tsx
// next.config.ts
export default { experimental: { ppr: "incremental" } };

// app/products/[id]/page.tsx
export const experimental_ppr = true;

export default function Page() {
  return (
    <>
      <ProductHeader /> {/* static, prerendered */}
      <Suspense fallback={<PriceSkeleton />}>
        <DynamicPrice /> {/* streamed at request-time */}
      </Suspense>
    </>
  );
}
```

### Cache directives
```tsx
// fine-grained cache (Next 16)
import { unstable_cache } from "next/cache";

export const getProducts = unstable_cache(
  async () => db.product.findMany(),
  ["products"],
  { revalidate: 3600, tags: ["products"] }
);
```

### Route handler (API)
```typescript
// app/api/cart/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function POST(req: NextRequest) {
  const body = await req.json();
  await addToCart(body);
  return NextResponse.json({ ok: true });
}

export const runtime = "edge";
```

### Middleware
```typescript
// middleware.ts
import { NextResponse, type NextRequest } from "next/server";

export function middleware(req: NextRequest) {
  if (!req.cookies.has("session") && req.nextUrl.pathname.startsWith("/app")) {
    return NextResponse.redirect(new URL("/login", req.url));
  }
}

export const config = { matcher: "/app/:path*" };
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Content-heavy site | Astro (lighter) > Next |
| Fullstack app | Next.js 16 App Router |
| API only | Hono / Elysia (lighter) > Next |
| Static export | Next `output: "export"` or Astro |

**기본값**: Next.js 16 + App Router + RSC + Server Actions + Turbopack.

## 🔗 Graph
- 부모: [[Modern-Website-Architecture]] · [[React]]
- 변형: [[Remix]] · [[SvelteKit]] · [[Astro]]
- 응용: [[Server Components]] · [[Edge Computing|Edge-Computing]]
- Adjacent: [[Turbopack]]

## 🤖 LLM 활용
**언제**: 매 boilerplate (route, action, layout) 의 generate, server/client split 의 propose, migration 의 plan.
**언제 X**: 매 design system, brand UX, perf budget 의 final call — human/team judgment.

## ❌ 안티패턴
- **All client components**: 매 "use client" 의 root = SSR benefit lose.
- **No Suspense boundary**: 매 single slow fetch 의 entire page block.
- **Server action 의 secret leak**: 매 closure 의 sensitive data 의 client bundle inclusion.
- **Cache without tags**: 매 stale forever or 매 manual purge hell.

## 🧪 검증 / 중복
- Verified (Next.js 16 docs, Vercel blog 2026, React 19 release notes).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — Next.js 16 App Router + RSC + Server Actions patterns |