개요경매 플랫폼 유유상종 프로젝트에서 JWT 방식이 아닌 세션 방식으로 로그인 기능을 구현했었다. 세션 방식은 로그인이 성공할 경우 클라이언트에 JSESSIONID라는 토큰을 전송한다. 클라이언트는 토큰을 쿠키에 저장하고 요청을 보낼 때 withCredentials : true 옵션으로 요청에 쿠키를 자동 전송한다. 서버는 요청과 함께 온 세션 토큰을 검증하는 방식으로 인증을 진행한다. 위 방식을 사용하기 위해선 서버와 클라이언트 둘 다 https를 사용해야 한다. 본 글에서는 Next.js 프로젝트를 개발 환경에서 https로 동작하게 하는 법과 저장된 쿠키를 확인하는 법에 대해 다룬다.Next.js 프로젝트를 https로 실행하기next.js 13.5.0버전부터 로컬 환경에서 https로 프로젝트를 ..

개요Next.js는 리디렉션을 처리하는 여러 방법이 있다. Next.js에서 지원하는 리디렉션 api는 다음과 같다.APIPurposeWhereStatus Coderedirect사용자 동작 또는 이벤트 후 리디렉션Server Components, Server Actions, Route Handlers307 (Temporary) or 303 (Server Action)permanentRedirect사용자 동작 또는 이벤트 후 영구 리디렉션Server Components, Server Actions, Route Handlers308 (Permanent)useRouter클라이언트 측 내비게이션 수행클라이언트 컴포넌트의 이벤트 핸들러N/Aredirects in next.config.js경로 기반으로 들어오는 요..

개요본 글은 Next.js에서의 에러 핸들링, 로딩 UI, 그리고 스트리밍을 활용한 성능 최적화와 사용자 경험 향상 방법을 다룬다. 애플리케이션을 개발하다 보면 사용자의 입력 실수나 네트워크 문제 등으로 예상 가능한 에러가 발생하거나, 코드 상의 문제로 인한 예상치 못한 에러가 발생할 수 있다. Next.js는 이러한 에러들을 효과적으로 처리하기 위해 명시적 상태 관리 기법과 에러 경계를 제공하며, 이를 통해 사용자에게 원활한 서비스를 제공할 수 있게 한다. 또한, 데이터를 가져오는 과정에서 사용자에게 빈 화면을 보여주는 대신 의미 있는 로딩 UI를 제공하고, 페이지 로딩 속도를 개선하는 스트리밍 기법을 사용할 수 있다. Next.js는 React의 Suspense를 기반으로 페이지를 점진적으로 렌더링하..

개요App Router는 라우팅 및 내비게이션에 하이브리드 접근 방식을 지원한다. 즉 Next.js는 라우팅 시 서버와 클라이언트를 적절히 섞어서 사용한다. 서버에서 애플리케이션 코드는 경로 세그먼트에 의해 자동으로 분할된다. 예를 들어 app 폴더에 있는 코드끼리 분할되고 dashboard 폴더에 있는 코드끼리 분할된다. 클라이언트에서 Next.js는 경로 세그먼트를 사전 로드하고 캐시한다. 즉 Next.js는 사용자가 다음에 갈 수도 있는 경로를 미리 받아서 캐시한다. 즉 사용자가 새 경로로 네비게이션할 때 모든 페이지를 다시 렌더링하는것이 아닌 바뀐 부분만 바꿔치기한다. 이를 통해 사용자 경험을 향상시킨다. 본 글에서는 Next.js의 코드 분할, 사전 로드, 캐싱, 부분 렌더링, 소프트 네비게이션..

개요Next.js를 활용하면 손쉽게 서버사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 구현할 수 있다. 그렇다면 실제로 사용자가 접속할 때 Next.js는 어떻게 작동할까? 요청부터 화면 렌더링까지의 전 과정을 정리해 보았다.Next.js 처리 흐름1. 요청(Request)사용자가 브라우저에서 특정 URL로 접근하면 HTTP 요청이 Next.js 서버로 전달된다.2. 라우팅 처리 (File-based Routing)🔀 Next.js에는 2가지 라우팅 시스템이 있다.폴더 위치pages/app/도입 시기Next.js 초기부터Next.js 13 이상사용 방식getStaticProps, getServerSideProps 등서버 컴포넌트, params, searchParams 등파일명 규칙index.ts..