#nextjs

jev typesafe llm ai-workflow structured-output nextjs app-router rsc server-actions architecture typescript monorepo turborepo build-performance react ssr hydration route-handler tanstack-query caching routing proxy cdn react-19 react-server-components server-state browser-rendering csr dom react-dom rendering expo eas testflight ios code-signing claude-code eslint hooks lint automation seo open-graph noindex robots-txt pnpm workspace dependency-management catalog vercel aws amplify ecs fargate deployment use-id create-portal create-root cookie http-only csrf xsrf-token same-site web-security middleware rewrite sso slo authentication idp frontend bff resize-observer css-variables performance variance type-safety strict-function-types covariance image-optimization browser-image-compression jszip web-worker frontend-performance postmessage react-hook-form browser-api next-js healthkit swift workout apple-watch watchos useeffect render anti-pattern semver package-management python venv virtual-environment troubleshooting gps pedometer live-activity react-native auto-pause remote-control mobile-development web-session productivity rtk token-optimization figma-api developer-tools infrastructure mermaid mdx diagram aws-s3 presigned-url file-upload hmac security agentic-loop token-flow prompt-caching shell-script figma cli skill agent responsive-publishing context-window subagent team multi-agent ai-collaboration publishing claude-md memory history-api form xcode widget swiftui app-group sandbox html accessibility a11y nice-auth post-vs-get callback in-app-browser ssg static-site-generation getstaticprops getstaticpaths css contain browser javascript animation lerp linear-interpolation requestanimationframe code-splitting react-lazy dynamic-import preloading reflow repaint composite-layer transform will-change image-upload mobile-web docusaurus mintlify documentation openapi static-site-generator 3d-transform perspective transform-style search-console sitemap metadata canonical jsx transpile ast virtual-dom reconciliation synthetic-event flux declarative immutability frontend-history mvc mvvm jquery backbone swiper oauth user-agent-detection post-message session-storage isr cache-control route53 dns domain txt-record intersection-observer infinite-scroll chat-ui scroll-behavior vpc ec2 iam cloud-basics performance-now dom-high-res-timestamp monotonic-clock user-timing-api node-perf-hooks jenkins ci-cd github-webhook kubernetes docker cicd continuous-integration continuous-delivery continuous-deployment devops data-structure map set git github fork clone version-control oss-contribution generics type-system keyof interface git-branch remote prune closure lexical-scope execution-context deep-dive lexical-environment hoisting scope this binding cssom render-tree tcp first-class-object function arguments var let const type-alias redux redux-toolkit state-management mouse-event drag

2026년 9월 16일Article

Next.js App Router 요청 흐름 지도

요청 하나가 Proxy와 Route를 지나 화면이 뜨고, 사용자 동작이 Server Action을 거쳐 두 캐시로 갈라지는 자리를 한 장으로 이었다.

READ MOREREAD MORE→

2026년 9월 15일Article

TypeScript 7 병행 설치와 빌드 타입 게이트 도입

TS 5.5.4를 그대로 둔 채 TypeScript 7을 별칭으로 병행 설치해 빌드 앞단의 타입 게이트로 세웠다.

READ MOREREAD MORE→

2026년 9월 14일Article

SSR과 RSC의 차이, RSC Payload와 두 가지 로딩 흐름 정리

SSR과 RSC를 다른 축으로 갈라 보고, RSC Payload가 초기 로딩과 Client Navigation에서 각각 어떻게 쓰이는지 짚었다.

READ MOREREAD MORE→

2026년 9월 12일Article

Server Action과 Route Handler 차이, 그리고 두 캐시 계층 정리

Route Handler와 Server Action이 갈리는 지점, 그리고 TanStack Query 캐시와 Next.js 캐시가 다른 계층이라는 걸 정리했다.

READ MOREREAD MORE→

2026년 9월 11일Article

Next.js 요청이 Server Component에 닿기까지의 경로

브라우저 주소창의 URL이 Server Component에 닿기까지 DNS·CDN·라우트 매칭·Proxy 실행 순서를 따라가며 정리했다.

READ MOREREAD MORE→

2026년 9월 10일Article

React 19 Server Action과 Action 훅 역할 정리

Server Function과 Server Action의 구분부터 useActionState, useOptimistic, use까지 서버 작업을 UI에 잇는 방식을 정리했다.

READ MOREREAD MORE→

2026년 9월 9일Article

React 19 실행 위치와 데이터 소유권 정리

Server Component와 Server State가 왜 다른 질문인지, 실행 위치와 데이터 소유권 두 축으로 갈라 정리했다.

READ MOREREAD MORE→

2026년 8월 4일Article

검색 색인 차단과 OG 미리보기 유지 정리

크롤링·색인·Open Graph를 분리해 검색 결과에서는 감추고 링크 미리보기는 살리는 설정을 정리했다.

READ MOREREAD MORE→

2026년 7월 22일Article

Portal과 createRoot의 차이 — pubuilder 하이드레이션 이슈 정리

Next.js 개발 오버레이의 useId 하이드레이션 경고를 추적하며 createPortal과 독립 React Root의 차이를 정리했다.

READ MOREREAD MORE→

2026년 7월 9일Article

Next.js Middleware rewrite로 인증 서비스 OG 크롤링 정상화

인증이 걸린 Next.js 서비스에서 OG 크롤러가 로그인 페이지로 redirect돼 미리보기가 깨지는 문제를 Middleware의 rewrite로 풀었다.

READ MOREREAD MORE→

2026년 6월 22일Article

BFF vs 미들웨어, 쿠키 도메인과 401

같은 계정으로 로그인했는데 한 앱만 계속 401이 떴다. 범인은 내 서버가 요청 길목에 끼어 있느냐였다.

READ MOREREAD MORE→

2026년 3월 27일Article

CDN이 뭔지 모르는 프론트엔드 개발자를 위한 CDN 입문

CDN의 개념부터 이미지 최적화, JS 라이브러리 로딩까지. "대충 아는" 상태가 답답해서 한번 제대로 파봤다.

READ MOREREAD MORE→

2026년 3월 27일Article

Next.js 블로그에 Mermaid 다이어그램 도입기 (npm 없이 CDN으로)

블로그 다이어그램이 한국어 때문에 깨지는 문제를 발견하고, Mermaid를 CDN 방식으로 도입한 과정.

READ MOREREAD MORE→

2026년 3월 11일Article

Next.js App Router에서 멀티스텝 폼의 뒤로가기 차단 구현하기

History API의 더미 entry 패턴과 popstate, beforeunload, requestLeave 콜백을 조합하여 멀티스텝 폼의 이탈을 방지하는 방법을 정리한다.

READ MOREREAD MORE→

2025년 8월 20일Article

Next.js에서 NICE 본인인증 GET/POST 동시 수용 콜백 구현

나이스 본인인증 게이트웨이는 PC에선 POST, 모바일에선 GET으로 콜백을 던졌다. 둘 다 받는 콜백을 짜고 PC와 모바일 응답 경로를 나눠 처리했다.

READ MOREREAD MORE→

2025년 7월 16일Article

Next.js SSG 적용기

Pages Router 시점의 SSG를 다시 정리했다. 빌드 시점에 HTML을 생성하는 흐름과 getStaticProps, fallback, next.config, serve까지 학습 노트로 묶었다.

READ MOREREAD MORE→

2024년 4월 15일Article

Next.js SSR·SSG·ISR 렌더링 전략 정리

Pages Router 기준 SSR·SSG·ISR이 매번 헷갈렸다. 셋을 한자리에 두고 동작 방식과 트레이드오프를 정리했다.

READ MOREREAD MORE→