#Next.js

Static Site Generation(SSG)의 속도와 Dynamic Rendering의 실시간성을 하나의 페이지 안에서 동시에 달성하기 위해 Next.js의 Partial Prerendering(부분 사전 렌더링)을 실제 프로덕션 서비스에 적용해 본 경험과 분석.

Pages Router에서 App Router로 전환하면서 겪은 것들 — 마이그레이션 전략, Server Components 함정, 데이터 페칭 변화, 그리고 성능 결과까지 솔직하게 정리했다.

Vercel AI SDK를 써서 Next.js에서 스트리밍 AI 채팅을 만드는 방법을 정리했다. useChat 훅, Server Actions, 프로바이더 전환, 도구 통합까지 실제 코드로 한 번에 설명한다.

한국어로만 서비스하던 블로그에 영어를 추가하면서 next-intl을 도입했다. App Router 환경에서 다국어를 구현하며 겪은 시행착오와 패턴.

서비스를 만들었는데 아무도 오지 않았다. 마케팅 예산 없이 검색 유입을 만드는 기술적 SEO를 Next.js에서 직접 구현한 경험.

유저가 카카오톡으로 '안 돼요'라고 보내기 전에 에러를 먼저 감지하고 싶었다. Next.js 프로젝트에 Sentry를 연동하면서 배운 실전 설정과 알림 구성.

SSR 페이지가 데이터 로딩 때문에 3초간 빈 화면을 보여주고 있었다. Streaming SSR로 준비된 부분부터 먼저 보여주니 체감 속도가 극적으로 개선됐다.

API 라우트 만들고, fetch 호출하고, 로딩 상태 관리하고... 폼 하나 처리하는 데 너무 많은 코드가 필요했는데, Server Actions로 획기적으로 줄었다.

Server Component에서 함수를 props로 전달했더니 에러가 났다. 직렬화 경계를 이해하고 나니 RSC의 진짜 패턴이 보였다.

블로그 이미지가 전체 페이지 용량의 80%를 차지하고 있었다. 포맷 변환과 반응형 이미지로 로딩 속도를 극적으로 개선한 이야기.

멋진 히어로 이미지를 `<img>` 태그로 넣었더니 LCP 점수가 빨간색입니다. Next.js의 `Image` 컴포넌트가 어떻게 이미지 사이즈, 포맷, 로딩 시점을 자동 최적화하는지, 그리고 `sizes` 속성의 비밀을 파헤쳐봤습니다.

"Named export not found" 에러의 원인인 CommonJS와 ES Modules의 충돌을 파헤칩니다. package.json의 exports 필드부터 transpilePackages 설정까지 완벽 가이드.

Next.js 빌드 로그에 나오는 동그라미(○)와 람다(λ) 기호의 의미를 아시나요? 실수로 모든 페이지를 동적으로 만들어버리지 않는 방법을 확인하세요.

Vercel에서는 잘 되던 ISR이 AWS나 Docker 환경에서는 왜 작동하지 않을까요? 파일 시스템 캐시의 함정과 해결책을 파헤쳐봤습니다.

Vercel 대신 AWS S3에 정적 배포(Static Export)를 시도했다가 겪은 세 가지 악몽(이미지 최적화, API 라우트, 동적 라우팅)과 그 해결책을 공유합니다. '서버 없는 Next.js'가 어떤 제약이 있는지 확실히 이해하게 될 것입니다.

사용자가 상품 결제를 하려다 로그인 창이 떠서 로그인을 했는데, 뜬금없이 메인 페이지로 이동된다면? 당황한 사용자는 그대로 이탈합니다. 로그인 후 원래 페이지로 되돌려보내는 리다이렉트 구현 방법과, 그 과정에서 발생할 수 있는 보안 취약점(Open Redirect)을 막는 방법을 공유합니다.

쇼핑몰 목록에서 상품을 보고 뒤로가기를 눌렀는데, 스크롤이 초기화되어 사용자가 이탈했습니다. SPA와 Next.js에서 스크롤 복원(Scroll Restoration) 문제를 해결한 삽질기를 공유합니다.

React에서는 잘 돌아가던 코드가 Next.js로 옮기자마자 'window is not defined' 에러를 뿜으며 폭발했습니다. Next.js의 SSR/Hydration 원리를 통해 이 에러가 발생하는 근본적인 이유를 파헤치고, useEffect, typeof 체크, Dynamic Import 등 3가지 확실한 해결책을 제시합니다.

서버 컴포넌트를 클라이언트 컴포넌트 안에 import 했더니, DB 연결이 끊기고 에러가 폭발했습니다. Next.js App Router의 핵심인 'Composition Pattern'을 구멍 뚫린 도넛에 비유해 설명하고, Context Provider를 올바르게 분리하는 방법을 정리해봤습니다.

Next.js 13 App Router를 처음 쓸 때 가장 많이 하는 실수인 'use client 남발'을 막는 방법을 소개합니다. 서버 컴포넌트와 클라이언트 컴포넌트의 경계(Boundary)를 명확히 이해하고, 성능을 지키면서 인터랙션을 구현하는 실제 패턴을 다룹니다.

서비스 런칭 일주일 만에 '작업하던 거 다 날아갔어요!'라는 항의 메일을 받았습니다. 원인은 JWT 토큰 만료. 보안과 편의성 사이에서 줄타기하며 배운 Refresh Token 전략, Axios Interceptor 구현, 그리고 보안 사고를 막기 위한 저장소 선택 기준을 공유합니다.

어느 날 내 서비스가 낯선 도메인의 iframe 안에서 돌고 있는 걸 발견했습니다. Clickjacking 공격을 막기 위해 HSTS, X-Frame-Options, CSP, Permissions-Policy 등 필수 보안 헤더 6가지를 상세히 설명하고, Nginx와 Next.js에 적용하는 방법을 공유합니다.

데이터를 수정했는데 페이지에 계속 예전 값이 나오는 유령 같은 현상. Next.js 13+의 강력한(그리고 사악한) 캐싱 메커니즘을 4계층으로 분석하고, React Query와의 차이점, 그리고 실제 디버깅 전략을 공유합니다.

게시판에 달린 댓글 하나 때문에 관리자 계정이 탈취당했습니다. XSS(Cross-Site Scripting)의 3가지 유형(Stored, Reflected, DOM)과 React/Next.js 환경에서의 구체적인 방어법(HTML 이스케이프, CSP, 쿠키 보안)을 예제와 함께 깊이 있게 다룹니다.

React나 Next.js 프로젝트에서 `.module.css`를 사용할 때 클래스 이름이 해시값으로 바뀌어 스타일이 적용되지 않는 문제, 겪어보셨나요? CSS Modules의 작동 원리인 'Scoping' 개념부터 `composes`를 활용한 스타일 상속, 그리고 TypeScript와 함께 쓸 때의 팁까지 완벽하게 정리했습니다.

Next.js 13 이상 App Router 환경에서 가장 빈번하게 마주치는 에러 중 하나입니다. 클라이언트 컴포넌트('use client')에 async 키워드를 붙이면 왜 에러가 발생하는지, React의 렌더링 메커니즘 관점에서 깊이 있게 분석하고, 이를 해결하기 위한 3가지 핵심 디자인 패턴(Container-Presenter, useEffect, React Query)을 상세한 코드 예제와 함께 정리해봤습니다.

`useEffect`로 관리자 페이지 접근을 막으려다 뚫릴 뻔했던 경험을 공유합니다. 클라이언트 사이드 보호의 위험성과 Next.js 미들웨어(Middleware)를 사용해 서버 레벨에서 안전하게 경로를 보호하는 방법, 그리고 Edge Runtime의 제약사항까지 깊이 있게 다룹니다.

멀쩡하던 이미지가 Next.js의 `<Image>` 컴포넌트를 쓰자마자 에러를 뿜어냈습니다. 단순한 설정 문제인 줄 알았지만, 알고 보니 Next.js가 서버 자원을 보호하기 위한 강력한 보안 장치였습니다. `remotePatterns` 설정 방법과 Image Optimization의 내부 동작 원리를 깊이 있게 파헤칩니다.

로컬에서는 잘 되던 API 키가 브라우저 콘솔에서는 `undefined`로 뜨는 현상. Next.js의 보안 철학인 'Server-Client Boundary'를 이해하지 못해 3시간을 삽질하고, 실수로 비밀 키를 노출할 뻔했던 아찔한 경험을 공유합니다.