기술노트

Next.js 루트 layout의 metadata에 canonical을 넣으면 자기 값이 없는 모든 하위 페이지가 홈을 대표 주소로 선언한다. 놀이터 240개가 홈 사본이 된 원인과 페이지별 메타 헬퍼로 고친 과정을 정리했다.

같은 주제 글이 둘이면 대부분 약한 쪽을 강한 쪽으로 301 영구 이동하는 게 맞다. 중복 203쌍을 찾아 정리하며 세운 키워드 카니발리제이션 판단 기준과 Next.js 구현을 정리했다.

Prisma include는 모델의 모든 스칼라 필드를 그대로 돌려주기 때문에, 공개 API에서 쓰면 비밀번호 해시 같은 필드가 응답에 섞여 나간다. 실제 사고와 수정, 게스트 IP 기록 방식을 다시 정한 과정을 정리했다.

use client 경계, 서버 컴포넌트 직접 패칭, Suspense 스트리밍, Server Actions 뮤테이션, 직렬화 규칙, 캐싱·재검증, 흔한 함정과 안 쓸 때까지 Next.js App Router 실전 코드로 정리한다.

Next.js after() API로 응답을 보낸 뒤 로깅·분석·캐시 갱신을 실행하는 법. 서버 컴포넌트·서버 액션·라우트 핸들러 활용과 흔한 함정, 조회수 집계 실전 패턴.

next/image는 자동 리사이즈·포맷 변환·lazy·CLS 방지를 준다. 하지만 외부 도메인·정적 export·단순 아이콘엔 오히려 부담일 수 있다.

서버 컴포넌트가 기본, 상호작용이 필요한 잎 컴포넌트만 클라이언트로. use client를 트리 위쪽에 박으면 번들이 통째로 커진다.

Hydration failed 에러는 서버 HTML과 클라이언트 첫 렌더가 다를 때 난다. Date·random·typeof window·잘못된 HTML 중첩 등 원인별 처방.

React Server Components의 데이터 페칭 4패턴(서버 직접·use·Server Action·streaming)을 비교하고 상황별 결정 가이드.

Next.js 16의 새 캐싱 모델 정리. "use cache" 디렉티브, dynamicIO, fetch 캐시 변화, 마이그레이션 함정.

View Transitions API로 SPA·MPA 페이지 전환을 자연스럽게 만드는 실전 — Next.js 16 통합, hero 이미지 트랜지션, fallback 처리.

Astro 5와 Next.js 16의 본질적 차이는 "Islands vs Components" 철학. 블로그·문서·이커머스에는 Astro가 압도, 앱·대시보드는 Next.js.