Next.js
1.[Next.js] Next.js 시작하기
React.js 전용의 웹 개발 "Framework"
2.[Next.js] Page Router
Next.js에서 페이지 라우팅 기능을 제공Pages 폴더의 구조를 기반으로 페이지를 라우팅 해줌기존 React에서 app.js 역할을 하는 파일모든 페이지 컴포넌트의 부모 역할을 하는 root 컴포넌트모든 페이지에 공통적으로 포함되는 헤더 컴포넌트, 푸터 컴포넌트 등
3.[Next.js] 페이지 라우팅 설정하기
쿼리스트링 - 경로에는 영향을 주지 않음 쿼리스트링을 불러올 떄 useRouter 사용
4.[Next.js] 프리페칭(Prefetching)
1. 개념 설명: 페이지 이동의 마법 Next.js에서 프리페칭은 현재 사용자가 보고 있는 페이지 내에서 이동할 가능성이 있는 모든 페이지의 데이터를 사전에 불러와 준비해 놓는 기능. 이는 빠른 페이지 이동을 위해 Next.js가 기본으로 제공하는 핵심 성능 최적화
5.[Next.js] 데이터 패칭(Data fetching)
Next.js의 데이터 패칭은 React와 달리, 클라이언트 측에서만 데이터를 가져오는 것이 아닌 사전 렌더링(Pre-rendering) 과정에서 서버 혹은 빌드 시점에 데이터를 미리 가져와 HTML에 포함하는 방식.React의 한계 극복: 전통적인 React(CSR,
6.[Next.js] SSG fallback 옵션
fallback 옵션은 빌드 시점에 getStaticPaths에서 정의되지 않은 경로로 사용자가 접속했을 때, Next.js가 어떻게 반응할지를 결정하는 설정.목적: 수천, 수만 개의 페이지를 모두 빌드 시점에 생성하기 어려울 때, 서버 부하와 빌드 시간을 관리하며 정
7.[Next.js] ISR과 On-Demand ISR (요청 기반 ISR)
빌드 시점에 정적 페이지를 생성하는 SSG(Static Site Generation)의 장점을 유지하면서, 일정 시간마다 페이지를 백그라운드에서 새롭게 생성하는 기술. 전체 사이트를 다시 빌드하지 않고도 특정 페이지만 업데이트할 수 있어 매우 효율적.블로그 포스트: 게
8.[Next.js] Next.js SEO 설정
Next.js에서 제공하는 <Head>는 HTML 문서의 <head> 영역에 메타데이터를 동적으로 주입하기 위한 내장 컴포넌트임. 일반적인 리액트 앱과 달리, 서버 사이드 렌더링(SSR)을 지원하는 Next.js의 특성상 검색 엔진 봇이 페이지를 크롤링할 때
9.[Next.js] 페이지 라우터 장단점
페이지 라우터는 Next.js의 근간을 이룬 시스템으로, 개발자의 생산성과 SEO(검색 엔진 최적화) 측면에서 강력한 이점 제공.파일 시스템 기반의 직관적 라우팅: 별도의 라우팅 설정 코드 없이 pages 폴더 내 파일 구조만으로 URL 경로 자동 생성. \[id].j
10.[Next.js] App Router (File-based Routing)
개념 설명 Next.js 13 버전부터 도입된 App Router는 프로젝트 내의 파일 시스템 구조를 통해 웹 애플리케이션의 경로(Route)를 결정하는 방식임. src/app 디렉터리가 루트 경로(/)가 되며, 그 하위 폴더 이름이 곧 URL 주소가 됨. 각 폴더
11.[Next.js] 리액트 서버 컴포넌트
리액트 서버 컴포넌트는 컴포넌트의 렌더링 로직을 서버에서 수행하여 브라우저로 전송하는 기술로 이를 통해 클라이언트가 다운로드해야 할 자바스크립트 번들 크기를 획기적으로 줄이는 것이 가능.반면, 클라이언트 컴포넌트는 브라우저에서의 상호작용(이벤트, 상태 관리)을 담당하는
12.[Next.js] App Router - 데이터 페칭 (Data Fetching)
개념 설명 앱 라우터 방식은 기존의 페이지 라우터와 달리 서버 컴포넌트(Server Components)를 기본으로 채택. 데이터가 필요한 컴포넌트에서 직접 fetch를 호출하는 방식이 핵심. 이를 통해 불필요한 프롭스 드릴링(Props Drilling)을 방지하고,
13.[Next.js] App Router - 데이터 캐싱 (Data Caching)
Next.js 서버 환경에서 fetch API를 통해 호출된 데이터의 결과를 저장하고 재사용하는 기술. 동일한 데이터 요청이 반복될 때 원본 서버나 DB에 매번 접근하지 않고, 미리 저장된 값을 반환하여 응답 속도를 비약적으로 향상시키는 것이 핵심. 서버 자원 절약 및
14.[Next.js] App Router - 리퀘스트 메모이제이션 (Request Memoization)
Next.js에서 리퀘스트 메모이제이션은 한 번의 서버 렌더링 사이클 동안 발생하는 동일한 API 요청을 최적화하는 기술. 서버 컴포넌트 구조에서 여러 컴포넌트가 동일한 데이터를 필요로 할 때, 네트워크 중복 호출을 방지하고 성능을 향상시키는 것이 핵심동작 원리: 동일
15.[Next.js] App Router - Next.js 15의 비동기 searchParams 이해
Next.js 15 버전부터 도입된 서버 컴포넌트의 핵심적 변화. 기존에 동기적으로 접근 가능했던 searchParams, params, cookies, headers 등이 모두 Promise 기반의 비동기 API로 전환. 이는 Next.js의 새로운 렌더링 패러다임인
16.[Next.js] App Router - 풀 라우트 캐시 (Full Route Cache)
풀 라우트 캐시는 Next.js 서버가 빌드 타임(Build Time) 또는 재검증(Revalidation) 시점에 렌더링된 결과물(HTML 및 Payload)을 서버 메모리나 디스크에 저장하는 기능사용자가 페이지를 요청할 때마다 서버에서 매번 리액트 컴포넌트를 실행하
17.[Next.js] App Router - Revalidation (ISR)
ISR은 정적 페이지의 장점(빠른 속도)과 동적 페이지의 장점(최신 데이터 반영)을 결합한 하이브리드 솔루션임. 빌드 시점에 페이지를 생성해 두되, 설정한 일정 시간이 지나면 백그라운드에서 데이터를 다시 불러와 캐시된 페이지를 새로 고침(Revalidate) 하는 방식
18.[Next.js] App Router - 라우트 세그먼트 옵션
웹 애플리케이션의 특정 페이지나 레이아웃의 동작 방식을 결정하는 설정값. 주로 Next.js의 App Router에서 페이지 상단에 변수를 선언하여 해당 경로의 렌더링 방식(정적/동적), 캐싱 주기, 데이터 보유 시간 등을 제어하는 용도로 활용. 코드 한 줄로 서버의
19.[Next.js] App Router - 클라이언트 라우터 캐시
클라이언트 사이드 렌더링(CSR) 환경에서 페이지 이동 시 발생하는 데이터를 메모리에 일시적으로 보관하는 메커니즘을 의미. 브라우저가 매번 서버에 전체 페이지나 데이터를 요청하는 대신, 이전에 방문했던 경로의 정보를 보관하여 즉각적인 화면 전환을 제공하는 기술임. Ne
20.[Next.js] App Router - 스트리밍
앱 라우터의 스트리밍 기능은 HTML을 자체적으로 제공, 브라우저가 사용자에게 콘텐츠를 점진적으로 표시하도록 지원. 이는 초기 로딩 시 전체 페이지가 준비될 때까지 기다리지 않고, 먼저 스켈레톤 UI를 보여준 후 데이터 페칭이 필요한 영역에 로딩 상태를 표시하다가, 모
21.[Next.js] 서버 액션
개념 설명 서버 액션은 클라이언트 측 자바스크립트가 서버에서 실행되는 함수를 직접 호출할 수 있게 만드는 기능. 기존에는 클라이언트에서 서버로 데이터를 보내기 위해 API 엔드포인트(REST API 등)를 설정하고 fetch를 사용해야 했으나, 서버 액션은 함수 정의
22.[Next.js] 서버 액션 - 재검증
Next.js에서 revalidatePath는 서버 측에서 특정 경로의 캐시 데이터를 강제로 무효화하고 최신 상태로 업데이트하는 메서드임. 이는 데이터가 변경되었을 때 전체 페이지를 다시 빌드하지 않고도 사용자에게 최신 정보를 즉시 제공하기 위한 필수적인 기술임.동작
23.[Next.js] App Router - 에러핸들링
Next.js App Router에서는 에러 핸들링을 위해 error.tsx라는 특수 파일을 도입하여 React Error Boundary를 자동으로 설정해 주는 기능임. 특정 세그먼트(Route Segment) 내에서 예상치 못한 런타임 에러가 발생했을 때, 전체 페
24.[Next.js] App Route - 병렬 라우트(Parallel Routes)
하나의 레이아웃 안에서 여러 개의 페이지를 동시에, 독립적으로 렌더링하는 기능. 일반적으로 하나의 URL은 하나의 페이지 컴포넌트만 매핑되나, 병렬 라우트를 사용하면 동일한 레이아웃 내에서 여러 '슬롯(Slot)'을 정의하여 각기 다른 경로의 콘텐츠를 한 화면에 조합
25.[Next.js] App Route - 인터셉팅 라우트
인터셉팅 라우트는 브라우저의 현재 레이아웃을 유지하면서 특정 경로로의 이동을 가로채어, 원래 페이지가 아닌 대체된 콘텐츠(주로 모달이나 오버레이)를 렌더링하는 기술임. 사용자가 링크를 클릭해 페이지를 이동할 때, 전체 페이지 전환 없이 맥락을 유지하며 정보를 보여주는
26.[Next.js] App Route - 이미지 최적화
웹 페이지에서 이미지는 전체 용량의 큰 비중을 차지하는 요소로, 사용자 경험(UX)과 SEO에 직결됨. Next.js는 next/image 라이브러리의 Image 컴포넌트를 통해 자동 최적화 기능을 제공함. 이는 브라우저가 이미지를 다운로드하기 전, 서버단에서 이미지
27.[Next.js] App Route - 검색엔진 최적화
SEO(검색엔진 최적화)는 검색 엔진이 웹 사이트의 구조와 내용을 잘 이해하도록 돕는 과정Sitemap & RSS: 검색 엔진 크롤러에게 사이트의 지도와 최신 업데이트 소식을 전달하여 빠른 인덱싱 유도.시멘틱 태그: HTML 구조에 의미를 부여하여 기계가 콘텐츠의 중요