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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

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

// 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

// 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 };
}

// 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

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)

// 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

// 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)

// 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

// 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
• 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