태그: Next.js
14편
-
Remix 프레임워크: Loader·Action 중심 데이터 흐름과 Next.js 비교
Remix 중첩 라우트에서 loader로 데이터를 읽고 action으로 폼 제출을 처리하는 흐름을 예제로 설명합니다. 폼 검증, useFetcher를 이용한 Optimistic UI, Progressive Enhancement와 Next.js와의 차이도 다룹니다.
-
Supabase + Next.js 실전: @supabase/ssr 클라이언트 설정과 RLS가 핵심인 이유
Next.js에서 @supabase/ssr로 서버용·브라우저용 클라이언트를 나눠 만들고 인증, PostgREST 쿼리, postgres_changes 실시간 구독, 스토리지, Deno 기반 Edge Functions를 붙이는 흐름을 짚습니다. auth.uid() RLS 정책 예시도 담았습니다.
-
tRPC: End-to-End 타입 안전 API, 미들웨어·Zod·React Query 통합과 REST 비교
tRPC procedure로 query·mutation·subscription을 정의하고 Router와 Context를 구성한 뒤 인증·로깅 미들웨어, Zod 입출력 검증, React Query 연동과 캐시 무효화, HTTP 배치, WebSocket 구독을 설명합니다. Todo 앱 예제도 담았습니다.
-
shadcn/ui: 설치 대신 소스를 복사하는 컴포넌트 키트, 테마·다크 모드, CLI, 커스터마이징
shadcn/ui CLI로 컴포넌트 소스를 프로젝트에 복사해 쓰는 방식과 Next.js 설치, CSS 변수 테마와 다크 모드, Dialog·Form·Data Table·Command 사용법, cva variant 커스터마이징, CSS 변수 미적용 같은 트러블슈팅을 다룹니다.
-
Turbopack이 Webpack보다 빠른 이유: 증분 컴파일, turbopack.rules 로더, 모노레포 튜닝, 마이그레이션
Next.js Turbopack과 Webpack의 성능·아키텍처 차이, dev 활성화, 증분 컴파일 원리, turbopack.rules 로더, 모노레포 튜닝, 실무 마이그레이션 전략을 다룹니다.
-
Payload CMS 3.0: Next.js 위에 올라간 코드 우선 CMS, 컬렉션·필드, 접근 제어, 훅, 다국어·초안
Payload 3.0의 Next.js 통합·ESM·컬렉션·필드·접근 제어·훅·다국어·초안·Admin UI·실전 블로그 CMS까지 다룹니다. Payload CMS 3.0은 “콘텐츠 모델과 권한·훅을 코드로 소유한다”는 철학을 유지하면서, 운영·번들·배포 경험을 Next.js 생태계에 맞춰 재구성한 메이저 릴리스입니다. Admin 패널이 React Router 단일 페이지에서 벗어나 Next.
-
Vercel 배포 실전: Git 연동, 환경 변수 실수, Edge vs Node 런타임, ISR, 빌드 실패 대응
Vercel로 배포하는 방법. Git 연동 배포 흐름, 환경 변수 관리와 흔한 실수, Edge Functions와 Node 서버리스 런타임 차이, vercel.json, ISR 캐시 재검증, Analytics, 도메인 연결, 빌드 실패 트러블슈팅을 다룹니다.
-
Sanity CMS로 콘텐츠 관리하기: Schema 정의, GROQ 쿼리, Next.js 통합, 이미지, 실시간 업데이트
Sanity 프로젝트를 만들고 Post 스키마를 코드로 정의한 뒤, GROQ로 필드 선택·참조 조인·파라미터 쿼리를 작성하고 Next.js에서 목록과 상세 페이지, next-sanity 이미지 최적화, 실시간 업데이트를 구현하는 과정을 다룹니다.
-
React & Next.js 입문 가이드
JSX와 컴포넌트, props와 state 구분, useState·useEffect·useContext·useReducer로 React 기초를 다진 뒤 Next.js App Router의 폴더 기반 라우팅과 Server Components로 넘어갑니다. ES6 문법 같은 사전 지식도 먼저 짚습니다.
-
Next.js App Router 구조: 파일 규약, 서버·클라이언트 컴포넌트 경계, 캐싱, 스트리밍, 고급 라우팅
Next.js App Router 정리. Pages Router와의 차이, 파일 규약과 라우팅, 서버 컴포넌트와 클라이언트 컴포넌트 경계, 레이아웃, 데이터 페칭과 캐싱, Server Actions, Suspense 스트리밍, Parallel·Intercepting Routes를 다룹니다.
-
Clerk로 Next.js 인증 붙이기: 로그인 컴포넌트, 보호 라우트, Webhook, 조직 관리
Next.js에 Clerk를 붙여 middleware로 경로를 보호하고, SignIn·UserButton 컴포넌트, 서버·클라이언트 컴포넌트별 인증 확인, API Route 보호, svix 서명을 검증하는 Webhook 사용자 동기화, 조직 권한 확인을 구현합니다.
-
Next.js 15 정리: App Router 렌더링 결정, 캐싱 레이어, Server Actions, Turbopack, PPR
Next.js 15의 변경점과 App Router 구조 정리. 서버 컴포넌트, 정적·동적 렌더링이 결정되는 방식, 캐싱 레이어, Server Actions, Turbopack, Partial Prerendering, React 19 대응을 예제로 다룹니다.
-
Next.js App Router에서 SSR·SSG·ISR 선택 가이드 | 렌더링 전략과 캐싱
Next.js App Router에서 SSR·SSG·ISR을 fetch 캐시 옵션, revalidate, Route Segment Config로 어떻게 선택하는지 설명하고, 운영에서 겪은 캐시 함정과 Suspense 경계로 데이터 워터폴을 줄이는 설계를 다룹니다.
-
Contentful로 헤드리스 CMS 구성하기: Content Model 설계, API, Next.js 통합, 다국어
Contentful 헤드리스 CMS 실전 정리. Content Model 설계, GraphQL/REST API 활용, Next.js·React 통합, 다국어·버전 관리, 웹훅과 마이그레이션, Strapi·Sanity 비교까지 다룹니다.