▲Next.js 기술 문서

Next.js App Router, 렌더링 전략, 캐싱, 배포까지 실무 중심으로 정리한 문서 모음입니다. 왼쪽 사이드바에서 원하는 문서를 선택해주세요.

01. 🧠 Caching Deep Dive

4중 캐시 아키텍처(Request Memoization, Data Cache, Full Route Cache, Router Cache)를 완전히 이해합니다.

01. ⚛️ 🌐 React 멘탈 모델에서 RSC로의 진화

React 멘탈 모델에서 RSC로의 진화 — Server Component가 왜, 어떻게 다른지 이해합니다.

02. 📁 App Router 해부학 (파일 시스템 라우팅)

App Router의 파일 시스템 라우팅 구조와 layout, page, loading, error 파일의 역할을 파헤칩니다.

02. 🧊 use cache와 부분 캐싱 (Next.js 15+)

Next.js 15+의 use cache 지시어와 부분 캐싱으로 세밀한 캐싱 전략을 구성합니다.

03. 🧨 Cache Invalidation

revalidatePath, revalidateTag, on-demand ISR로 캐시를 정밀하게 무효화하는 방법을 다룹니다.

03. 🚀 App Router의 3대 렌더링 전략 (SSR, SSG, ISR)

SSR, SSG, ISR 세 가지 렌더링 전략의 차이와 App Router에서 각각을 언제 써야 하는지 알아봅니다.

04. 💧 Hydration과 Mismatch

Hydration 원리와 Mismatch 에러가 발생하는 이유, 그리고 실전 디버깅 전략을 다룹니다.

04. 🚀 Server Actions

Server Actions로 API 라우트 없이 서버 데이터를 변경하고 폼을 처리하는 패턴을 배웁니다.

05. 🚧 Client Boundary 설계

Client Component 경계를 어디에 그어야 하는지 — 설계 원칙과 흔한 실수를 정리합니다.

05. 🎭 Parallel & Intercepting Routes

Parallel Routes와 Intercepting Routes의 고급 활용 — 복잡한 모달·탭 UI 구현 전략입니다.

06. 📡 Data Fetching 르네상스

fetch 메모이제이션과 RSC에서의 데이터 패칭 패턴, waterfall 방지 전략을 배웁니다.

06. ⚡ Partial Prerendering (PPR)

PPR로 정적 셸과 동적 콘텐츠를 하나의 응답으로 결합하는 Next.js 최신 렌더링 전략입니다.

07. 🔐 Authentication Architecture

Middleware + DAL + Session 패턴으로 Next.js 앱의 인증을 안전하게 설계합니다.

07. ⏳ Suspense와 Streaming

Suspense와 Streaming을 활용해 체감 로딩 속도를 개선하는 방법을 알아봅니다.

08. 🛡️ Error Handling

error.tsx, not-found.tsx, ErrorBoundary를 조합해 앱을 안전하게 지키는 방법을 다룹니다.

08. 🚀 Performance Deep Dive

Core Web Vitals 실전 튜닝 — LCP, CLS, INP를 개선하는 구체적인 기법을 다룹니다.

09. 🔀 Parallel & Intercepting Routes

Parallel Routes와 Intercepting Routes로 URL 기반 모달을 구현하는 방법을 배웁니다.

09. 🧪 Testing Strategy

Jest + MSW + Playwright로 Next.js 앱을 단위·통합·E2E 테스트하는 전략을 정리합니다.

10. 🚢 Deployment & Infrastructure

Vercel, Docker, Node.js 서버 각 배포 방식의 차이와 인프라 설계 기준을 알아봅니다.

10. ⚙️ next.config.ts

next.config.ts의 핵심 옵션과 환경 변수, rewrites, headers 설정을 실무 관점에서 정리합니다.

11. 🔍 Metadata API & SEO

Metadata API로 OG 태그, 구조화 데이터, sitemap을 설정해 검색엔진에 최적화합니다.

11. 🔗 Next.js + Spring 인증

BFF 패턴과 하이브리드 토큰 설계로 Next.js와 Spring을 연결하는 인증 아키텍처입니다.

Next.js Multi-Zones로 거대 앱을 독립 배포 가능한 마이크로 프론트엔드로 분리합니다.

12. 🛣️ Route Handlers

Route Handler로 API 엔드포인트를 만들고 인증, 스트리밍, CORS를 처리하는 방법을 다룹니다.

13. 🌍 Advanced I18n

고급 국제화 전략 — 동적 locale, 서버/클라이언트 i18n, RTL 지원까지 다룹니다.

13. 🛡️ Middleware & Edge Runtime

Middleware와 Edge Runtime으로 요청을 가로채고 인증 리다이렉트, A/B 테스트를 구현합니다.

14. 🖼️ next/image & next/font

next/image와 next/font로 Core Web Vitals를 개선하는 이미지·폰트 최적화 기법을 알아봅니다.

WebSocket과 SSE를 Next.js에서 구현하는 방법과 서버리스 환경의 실시간 통신 전략입니다.

15. 🏗️ 프로젝트 & 폴더 구조

실무에서 살아남는 Next.js 폴더 구조와 Feature 기반 아키텍처 설계 원칙을 정리합니다.