Next.js에서 환경 변수(Environment Variables)는단순 설정값이 아니라 보안, 배포, 환경 분리를 담당하는 핵심 요소이다.특히 Next.js는 Server와 Client가 함께 존재하기 때문에환경 변수의 사용 범위를 명확히 구분해야 한다.Next.j

Next.js 배포는 단순히 서버에 올리는 과정이 아니라 빌드, 최적화, 환경 분리, 실행까지 포함된 과정이다. 1. Vercel 배포 Next.js는 Vercel에서 가장 쉽게 배포할 수 있다. 배포 흐름 GitHub에 코드 push Vercel에서 프로젝트 import 자동 빌드 배포 완료 (URL 생성) 특징 Next.js와 높은 호환성 S...

웹 서비스에서 SEO(Search Engine Optimization)는검색 엔진 노출과 유입에 직접적인 영향을 준다.Next.js(App Router 기준)는 Metadata API를 통해SEO 설정을 매우 간단하고 강력하게 관리할 수 있다.이 글에서는 다음 3가지를

Next.js는 기본적으로 다양한 성능 최적화 기능을 내장하고 있다.특히 이미지, 폰트, 번들 크기 최적화는 실제 서비스에서 로딩 속도와 UX에 큰 영향을 준다.이 글에서는 다음 3가지를 핵심으로 정리한다:next/imagenext/font번들 최적화 개념일반 <

Next.js App Router를 사용하다 보면 다음과 같은 문장을 자주 보게 된다."Middleware는 Edge Runtime에서 실행된다"여기서 자연스럽게 이런 의문이 생긴다.👉 Edge Runtime은 정확히 무엇이고, 언제 사용해야 할까?이 글에서는 Edg

Next.js App Router를 사용하다 보면사용자가 페이지에 진입하기 전에 공통 로직을 처리해야 하는 경우가 자주 발생한다.예를 들어:로그인 여부 확인 (인증)특정 페이지 접근 제한요청 로깅조건에 따른 리다이렉트이런 로직을 페이지나 API마다 반복 구현하면 코드

Next.js App Router를 사용하면서 서버 로직을 처리하는 방법은 크게 두 가지가 있다.Route Handlers (API Routes)Server Actions두 방식 모두 서버에서 실행되지만,👉 사용 목적과 구조가 다르기 때문에 구분해서 이해하는 것이 중

Next.js App Router를 사용하다 보면 이런 상황을 자주 겪게 된다."데이터를 바꿨는데 왜 화면이 그대로지?""왜 어떤 요청은 다시 안 나가지?""revalidate를 했는데 왜 안 바뀌지?"이런 문제의 대부분은👉 Next.js의 캐싱 구조를 정확히 이해하

👉 Next.js 13+에서 추가된 핵심 기능으로,👉 클라이언트 → 서버 데이터 변경(Mutation)을 단순하게 처리할 수 있다.기존에는 데이터 변경을 위해 API Route를 따로 만들어야 했지만,Server Actions를 사용하면 컴포넌트에서 직접 서버 로직

사용자 경험(UX)을 크게 좌우하는 요소 중 하나는 로딩 상태와 에러 처리 UI이다.특히 Next.js(App Router)에서는 이를 파일 단위로 구조화하여 매우 직관적으로 관리할 수 있다.처음에는 단순한 보조 UI라고 생각했지만, 직접 적용해보면서Streaming만

Next.js 13부터 도입된 App Router에서는 기존 Page Router와 달리애플리케이션의 UI를 페이지가 아닌 Layout 중심으로 설계한다.이 글에서는 다음 내용을 정리한다.layout.tsxtemplate.tsxNested Layout 구조공통 UI 관

Webpack Dev Server 웹팩 데브 서버(Webpack Dev Server)는 개발 과정에서 사용하는 개발용 서버로, 빌드 대상 파일이 변경되면 매번 웹팩 명령어를 다시 실행하지 않아도 코드 변경 후 저장 시 자동으로 빌드하고 브라우저를 새로고침하여 변경 내

Next.js App Router에서는 Parallel Routes라는 기능을 통해하나의 레이아웃에서 여러 개의 라우트를 동시에 렌더링할 수 있습니다.이를 통해 복잡한 UI 구조를 더 유연하게 구성할 수 있습니다.대표적인 예:Dashboard LayoutSidebar

Next.js App Router에서는 Intercepting Routes라는 기능을 통해 현재 페이지를 유지한 채 다른 라우트를 가로채서(intercept) UI로 표시할 수 있습니다. 대표적으로 모달 라우팅(modal routing) 구현에 사용됩니다. 예를 들

Next.js를 공부하면서 인상 깊었던 부분은 서버 컴포넌트 기반의 데이터 페칭과 Streaming 구조였다.기존 SSR의 한계를 어떻게 보완하는지, 그리고 React 18의 Suspense와 어떻게 연결되는지 정리해본다.SSR(Server Side Rendering)

클라이언트 라우터 캐시는 브라우저 측에 저장되는 캐시로, Next.js에서 페이지 이동을 보다 효율적으로 처리하기 위해 일부 데이터를 보관하는 기술이다.이 캐시는 한 번 접속한 페이지의 공통 레이아웃 컴포넌트와 서버 컴포넌트 데이터(RSC Payload)를 브라우저에

Next.js 앱에서 모든 페이지를 Static 페이지로 설정하여 풀 라우트 캐시(Full Route Cache)를 최대한 활용하고자 할 때, 페이지를 구성하는 모든 컴포넌트들을 일일이 점검해야 한다.동적 함수(searchParams, headers, cookies)를

Next.js 13부터 도입된 App Router는 기존 Page Router와 유사하면서도, 서버 컴포넌트 기반으로 더 유연한 구조를 제공한다.이번 글에서는 App Router의 기본 라우팅 방식과 Query String, URL 파라미터 사용 방법을 정리해본다.Ne

React Server Components(RSC)를 공부하면서기존 React의 데이터 페칭 방식과 무엇이 다른지, 그리고 SSR과는 어떤 차이가 있는지 정리해보았습니다. 기존 리액트에서는 데이터를 가져오는 방식이 주로 두 가지였습니다.API 요청 수는 감소하지만 컴

문제의 시작: 간헐적 로그아웃 운영 중인 서비스에서 간헐적으로 사용자가 강제 로그아웃되는 현상이 발생했다. 매번 그런 건 아니고, 한번씩 불규칙하게 발생하는 종류의 버그였다. 로그를 확인해보면 refresh token 갱신이 실패하면서 로그아웃 처리가 되고 있었다.