[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -1,90 +1,234 @@
|
||||
---
|
||||
id: wiki-2026-0508-next-js-and-modern-web
|
||||
title: Next js and Modern Web
|
||||
title: Next.js and Modern Web
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [WEB-NEXT-001]
|
||||
aliases: [Next.js, Next 16, Modern React]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 1.0
|
||||
tags: [web-development, next-js, react, Frontend-Architecture, ssr, modern-web]
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [nextjs, react, rsc, server-actions, web]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-04-26
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: typescript
|
||||
framework: nextjs-16
|
||||
---
|
||||
|
||||
# [[Next.js|Next.js]] and Modern Web (Next.js와 현대 웹)
|
||||
# Next.js and Modern Web
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> "클라이언트와 서버의 경계를 허물고 최적의 렌더링 전략을 자동화하여, 사용자에게는 극강의 속도를, 개발자에게는 최고의 생산성을 제공하라" — React 기반의 풀스택 프레임워크로, SSR, SSG, ISR 및 서버 컴포넌트를 통해 현대 웹사이트 아키텍처의 표준을 제시하는 기술 스택.
|
||||
## 매 한 줄
|
||||
> **"매 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.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
- **추출된 패턴:** "Hybrid Rendering and Zero-config [[Optimization|Optimization]]" — 페이지의 특성에 따라 빌드 타임에 미리 생성(SSG)할지, 요청 시점에 생성(SSR)할지, 혹은 배경에서 갱신(ISR)할지를 유연하게 선택하고 이미지 최적화 및 폰트 로딩을 자동으로 처리하는 최적화 패턴.
|
||||
- **주요 기능:**
|
||||
- **App Router:** 파일 시스템 기반 라우팅과 레이아웃 중첩 지원.
|
||||
- **[[Server Components|Server Components]]:** 클라이언트로 전송되는 자바스크립트 양을 획기적으로 줄여 로딩 속도 개선.
|
||||
- **Data Fetching:** 서버 단위에서의 캐싱과 재검증(Revalidation)을 통한 데이터 무결성 유지.
|
||||
- **Edge Runtime:** 전 세계 엣지 노드에서 코드를 실행하여 지연 시간 최소화.
|
||||
- **의의:** SEO 성능과 사용자 인터랙션을 모두 잡아야 하는 현대 비즈니스 웹사이트의 필수 아키텍처이며, Vercel 생태계를 통한 배포 자동화의 정수.
|
||||
## 매 핵심
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
- **과거 데이터와의 충돌:** 단순히 'React의 헬퍼' 수준이던 Pages Router 방식에서, 이제는 서버 중심의 사고를 강조하는 App Router와 서버 컴포넌트 중심으로 패러다임이 완전히 전환됨.
|
||||
- **정책 변화:** Antigravity 프로젝트의 모든 웹 대시보드와 지식 인터페이스는 Next.js 14+ 아키텍처를 기반으로 설계되어, 초저지연 로딩과 강력한 SEO 성능을 동시에 보장함.
|
||||
### 매 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.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- [[Modern-Website-Architecture|Modern-Website-Architecture]], [[Core-Web-Vitals|Core-Web-Vitals]], Single-Page-Applications-SPA, [[Network-Latency-Optimization|Network-Latency-Optimization]]
|
||||
- **Raw Source:** 10_Wiki/Topics/AI/Next-js-and-Modern-Web.md
|
||||
### 매 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).
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
### 매 응용
|
||||
1. Marketing + dashboard combo: PPR.
|
||||
2. E-commerce: ISR + edge personalize.
|
||||
3. AI chat app: Server Actions + streaming response.
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
## 💻 패턴
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
### 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
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### Server component data fetch
|
||||
```tsx
|
||||
// app/products/[id]/page.tsx
|
||||
import { db } from "@/lib/db";
|
||||
import { notFound } from "next/navigation";
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
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>;
|
||||
}
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
export async function generateStaticParams() {
|
||||
const products = await db.product.findMany({ select: { id: true } });
|
||||
return products.map((p) => ({ id: p.id }));
|
||||
}
|
||||
```
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
### Server Action
|
||||
```tsx
|
||||
// app/contact/actions.ts
|
||||
"use server";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { z } from "zod";
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
const Schema = z.object({ email: z.string().email(), body: z.string().min(1) });
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
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]]
|
||||
- Adjacent: [[Vercel]] · [[Turbopack]] · [[React-19]]
|
||||
|
||||
## 🤖 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 |
|
||||
|
||||
Reference in New Issue
Block a user