Next.js — 관련 콘텐츠 97건

쿠키 SameSite, CSRF, 사파리, 서드파티 | 로그인이 한 브라우저에서만 풀리는 이유는?

사파리에서만 로그인이 풀리면 SameSite와 도메인부터 본다. Lax, Strict, None, HttpOnly, Secure, 파티션 쿠키, CSRF 토큰, 오리진 검사, 카카오 콜백, 프론트와 API 분리를 프론트엔드, 보안, API, Next.js, 개발자, 브라우저 기준으로 같은 표에 둔다. CSP 헤더 글과 서버 액션 글과 각을 섞지 않는다.

MSW, API 모킹, 브라우저 핸들러, Vitest | 컴포넌트 테스트 전에 어떻게 붙이나?

MSW(Mock Service Worker)로 REST API를 브라우저·Vitest Node에서 모킹하는 단계별 튜토리얼. 설치·handlers·setupWorker·setupServer, server.use 오버라이드로 500·401·빈 목록 UI 검증, delay·쿼리·Authorization 조건, Next.js·Playwright·CI 경계와 프로덕션 가드. 프론트엔드·개발자·API·TypeScript·테스트 자동화 실습 가이드.

CSP, HSTS, X-Frame, Permissions-Policy | 배포 전 보안 헤더는 무엇을 켜나?

CSP·HSTS·X-Frame·Permissions-Policy 등 브라우저 보안 헤더를 배포 전 체크리스트로 정리한다. Report-Only 관측 후 enforce, nonce, 쿠키 Secure, Next.js headers·미들웨어 위치, curl·콘솔 검증 순서, OWASP·MDN 출처. 개발자·프론트엔드·백엔드·보안·API·CDN 실무 가이드.

성능 예산, 번들 사이즈, Lighthouse CI, 서드파티 | PR에서 어떻게 막을까?

프론트엔드 성능 예산(performance budget)을 초기 JS 킬로바이트, LCP·INP·CLS, 이미지·폰트, 서드파티 스크립트 상한과 Lighthouse CI 게이트로 정리한다. 라우트별 번들 표, PR 체크리스트, 2주 도입 순서, web.dev·LHCI 출처와 Core Web Vitals·Vite·Next.js 내부링크. 개발자·React·번들러·API 연동 화면 성능 실무 가이드.

TanStack Query v5 실전 가이드 | React Query 마이그레이션·무한 스크롤·SSR 패턴

TanStack Query v5(구 React Query)는 useQuery 시그니처 단일 객체 통합, cacheTime→gcTime 변경, onSuccess/onError 제거 등 v4 대비 조용한 변경이 많다. 기본 설정부터 낙관적 업데이트·useInfiniteQuery·Next.js App Router SSR 연동까지 실전 코드로 정리하고, v4→v5 마이그레이션 체크리스트를 제공한다.

Sentry 런타임 에러 모니터링 실전 2026 | Next.js 설치·소스맵·알림

Sentry(센트리)로 Next.js App Router 런타임 에러를 잡는 실전 튜토리얼이다. 위저드 설치, 클라이언트·서버 SDK, 테스트 이벤트, user·tag·breadcrumb, 소스맵·릴리스, GitHub Actions 업로드, 알림 규칙과 beforeSend 마스킹까지 단계별 코드로 따라 한다. 백엔드·프론트엔드·개발자 운영·에러 모니터링·API 가이드.

Docker 멀티스테이지 빌드 실전 - Node.js·Next.js 이미지 크기 줄이는 체크리스트

도커 멀티스테이지 빌드(Docker multi-stage build)로 Node.js Express·API 서버와 Next.js standalone 이미지를 최적화하는 실전 가이드. 단일 스테이지와 멀티스테이지 구조 차이, 레이어 캐시 최적화(package.json 먼저 복사), .dockerignore 설정, non-root 사용자 실행, 이미지 크기 확인 명령어, 자주 막히는 alpine 호환 문제·환경변수 주입까지 체크리스트 형태로 정리. 백엔드·풀스택·데브옵스 개발자를 위한 도커 배포 최적화 실무 가이드.

슈퍼베이스 RLS 정책 심층 분석 | auth.uid·역할·테스트

슈퍼베이스(Supabase) RLS(Row Level Security) 정책을 심층 정리한다. ENABLE 후 정책 부재, USING·WITH CHECK, auth.uid()와 JWT 클레임, 소유자·조직 멤버 패턴, service_role 우회, 테스트 순서, 인덱스·성능 함정을 SQL·표로 고정. 백엔드·PostgreSQL·보안·Next.js·API·개발자가 바로 쓰는 FAQ와 공식 문서 출처.

TanStack Query v5 실전 심층 분석 | 캐시·staleTime·무효화·Next.js

탠스택 쿼리(TanStack Query) v5로 서버 상태를 다루는 실전 심층 가이드. queryKey 설계, staleTime·gcTime·refetch 정책, useMutation 캐시 무효화, 무한 스크롤, 에러 재시도, Next.js 앱 라우터 경계, 주스탄트와의 역할 분리를 표·코드로 정리. 개발자·프론트엔드·React·TypeScript·API 캐시 실무용 FAQ 포함.

Next.js Server Actions 실전 심층 분석 | 폼, 캐시 무효화, 보안 체크

Next.js 서버 액션을 폼 제출·뮤테이션에 쓸 위치, 라우트 핸들러와 비교 표, FormData 검증, revalidatePath·revalidateTag 캐시 무효화, 세션·소유권 보안, 에러·로딩 UX, 배포 전 체크리스트를 심층 정리. 개발자·프론트엔드·앱 라우터·React 서버 컴포넌트·API 설계 실무 가이드.

Next.js trailingSlash와 OG 이미지 2026 | 308 redirect 피하기

Next.js trailingSlash:true 환경에서 OG·PNG가 308로 깨지는 원인과 skipTrailingSlashRedirect, canonical 통일, curl 검증 방법을 정리한다.

Next.js 사이트 prebuild에서 sitemap·RSS·Atom 같이 갱신하기

npm prebuild에 generate-sitemap·feeds를 묶어 배포 전 검색 피드 일관성을 유지하는 실무 패턴. 로컬·CI 체크리스트 포함.

Meilisearch 실전 튜토리얼 — Docker 설치부터 Node.js SDK·필터·랭킹·Next.js 연동까지

메이리서치(Meilisearch) 오픈소스 검색 엔진 실전 튜토리얼. Docker 로컬 설치, 인덱스·문서 업로드, Node.js SDK 동기화, 필터·정렬·동의어·랭킹 규칙, Next.js App Router API 프록시, 검색 전용 API 키 분리와 프로덕션 배포 체크리스트까지. 일래스틱서치 대신 가벼운 전문 검색이 필요한 백엔드·프론트엔드 개발자를 위한 단계별 가이드.

금요일마다 핫픽스 내리던 팀이 피처 플래그로 바꾼 6주 — 언리시 도입 사례

코드 배포와 기능 노출이 한몸이라 금요일 핫픽스가 반복되던 B2B SaaS 팀이 오픈소스 피처 플래그 플랫폼 언리시(Unleash)를 도입한 6주 사례. Next.js·Node.js에서 서버 진실 공급원 규칙, 점진 롤아웃 5%→100%, 킬 스위치 온콜 런북, 스틱키 버킷 함정, 플래그 수명·제거 의식까지 문제·시도·결과로 정리한다. 스타트업 제품팀·백엔드·프론트엔드 개발자가 배포 게이트와 카나리 노출을 실무에 옮길 때 참고할 플레이북이다.

프로덕션 에러를 슬랙으로만 받던 팀이 센트리로 바꾼 4주 — 알림 피로부터 릴리즈 게이트까지

슬랙 웹훅과 로그만으로 프로덕션 에러를 처리하던 B2B SaaS 팀이 센트리(Sentry)를 도입한 4주 사례. Next.js·Node.js SDK 설치 직후 이슈 폭주, 샘플링·무시 규칙, 릴리즈·소스맵 CI 연동, 알림 3층 정책과 온콜 에스컬레이션까지 문제·시도·결과로 정리한다. 개발자·스타트업 제품팀이 에러 모니터링·관측가능성·배포 게이트를 실무에 옮길 때 참고할 플레이북이다.

Next.js App Router 프로덕션 체크리스트 2026 — 라우팅·캐싱·보안·SEO·성능 45항목

Next.js App Router 프로덕션 배포 전 점검 체크리스트 45항목. 라우팅·레이아웃, fetch 캐싱·revalidate, 렌더링 모드, 보안 헤더·미들웨어, SEO 메타·구조화 데이터, next/image·폰트, 에러 관측, Core Web Vitals·배포 게이트까지 프론트엔드 실무 기준으로 정리한다. React 서버 컴포넌트 환경에서 출시 직전 놓치기 쉬운 항목을 팀 온보딩·릴리즈 문서에 바로 쓸 수 있게 구성했다.

바이브코딩 리팩터링 전략 심층 가이드 — AI가 만든 코드를 유지보수 가능한 구조로 전환하는 5단계

클로드 코드(Claude Code)·커서(Cursor)로 빠르게 만든 코드에는 중복 함수, any 타입 남용, 비대화된 컴포넌트가 쌓입니다. AI 생성 코드의 특성을 이해하고 체계적으로 리팩터링하는 5단계 전략을 다룹니다. 코드베이스 지도 그리기, 테스트 안전망, 중복 제거, TypeScript 타입 정비, 컴포넌트 경계 재설계까지 TanStack Query·Zod·Vitest 실전 코드와 함께 정리합니다.

Prisma ORM 실전 튜토리얼 — PostgreSQL 연결, 스키마 마이그레이션, Next.js 라우트 구현까지

Prisma ORM을 타입스크립트 프로젝트에 적용하는 단계별 실전 튜토리얼. PostgreSQL 연결부터 schema.prisma 스키마 작성, 마이그레이션, CRUD 쿼리, 관계형 데이터 조회까지 코드 중심으로 안내합니다. 서버리스 환경 연결 풀 관리, Next.js App Router API 라우트 통합, 자주 발생하는 에러 해결법도 포함합니다. 드리즐(Drizzle) ORM과의 선택 기준도 정리했습니다. 백엔드, 풀스택 개발자가 Prisma를 빠르게 도입하도록 실습 코드 중심으로 구성했습니다.

바이브코딩 프로덕션 체크리스트 — AI 코드를 출시하기 전 점검 42개 항목

클로드 코드·커서·깃허브 코파일럿 같은 AI 코딩 도구로 만든 바이브코딩 MVP를 프로덕션에 배포하기 전 점검해야 할 42개 체크리스트를 6단계로 정리했다. 환경변수 미설정, 시크릿 하드코딩, 결제 API 프로덕션 키 미전환, N+1 쿼리, 인증 미들웨어 누락이 가장 자주 놓치는 항목이다. Next.js·버셀·Supabase 기반 프로젝트 기준으로 작성했으며 CI/CD 자동화 연결 방법도 포함한다.

Elasticsearch 실전 튜토리얼 — Docker 설치·한국어 검색·Node.js 연동까지

Elasticsearch 8.x를 Docker Compose로 설치하고 한국어 nori 분석기를 적용한 뒤 Node.js @elastic/elasticsearch 클라이언트로 풀텍스트 검색 API를 직접 구현하는 실습 가이드. 인덱스 매핑 설계, bool 쿼리 조합, multi_match 가중치 설정, Next.js App Router API 라우트 연동까지 실제 동작하는 코드로 단계별로 다룬다. Docker 메모리 설정, nori stoptags 튜닝, 프로덕션 운영 팁도 포함한다.