0. CSS Next.js는 다양한 CSS 스타일링 방식을 지원한다. 방식 설명 Tailwind CSS 유틸리티 클래스 기반 CSS 프레임워크 CSS Modules 파일 단위로 클래스명을 스코핑해 충돌 방지 ...

0. 에러 처리 에러는 예상 에러(Expected Errors)와 예상치 못한 에러(Uncaught Exceptions) 두 가지로 나뉜다. 유형 설명 처리 방식 예상 에러 폼 유효성 검사, 요청 실패 등 정상 흐름에서 발생 가능한 에러 ...

0. 재검증 재검증(Revalidation)은 캐시된 데이터를 최신 상태로 갱신하는 과정이다. 빠른 캐시 응답을 유지하면서도 콘텐츠를 최신 상태로 유지할 수 있다. 두 가지 전략이 있다: 시간 기반 재검증 cacheLife를 사용해 설정한 주기마다 자동으로 캐시를 갱신한다. 온디맨드 재검증 ...

0. 캐싱 캐싱은 데이터 페칭과 연산 결과를 저장해 동일한 요청을 더 빠르게 처리하는 기법이다. 1. Cache Components 설정 1-1. Cache Components 활성화 next.config.ts에 cacheComponents: true를 추가해 Cache Components를 활성화한다. // next.config....

0. 데이터 변경 Next.js에서 데이터를 변경할 때는 React Server Functions를 사용한다. Server Function은 서버에서 실행되는 비동기 함수로, 클라이언트에서 네트워크 요청을 통해 호출할 수 있다. 1. Server Function이란? 1-1. Server Function / Server Action 개념 ...

0. 데이터 페칭 Next.js에서 데이터를 가져오는 방법은 어느 컴포넌트에서 페칭하느냐에 따라 달라진다. Server Component에서는 fetch API 또는 ORM을, Client Component에서는 use API나 외부 라이브러리를 사용한다. 느린 데이터 요청이 있을 때는 스트리밍으로 초기 로드 시간과 UX를 개선할 수 있다. 1...

0. 서버 컴포넌트와 클라이언트 컴포넌트 Next.js에서 레이아웃과 페이지는 기본적으로 Server Component다. 서버에서 데이터를 가져오고 UI를 렌더링하며, 결과를 캐시하고 클라이언트로 스트리밍할 수 있다. 반면, 브라우저 API나 인터렉션이 필요한 경우에만 Client Component를 사용한다. 1. 언제 무엇을 사용할까 ...

0. 링크와 내비게이션 Next.js는 라우트를 기본적으로 서버에서 렌더링한다. 이 때문에 클라이언트는 새 라우트를 보여주기 위해 서버 응답을 기다려야 한다. Next.js는 이를 프리페칭, 스트리밍, 클라이언트 사이드 전환으로 해결해 내비게이션을 빠르게 유지한다. 1. 내비게이션 동작 원리 1-1. 서버 렌더링 (Server Render...

0. 레이아웃과 페이지 Next.js는 파일 시스템 기반 라우팅을 사용한다. 폴더와 파일 이름만으로 라우트를 정의하고, 레이아웃과 페이지를 구성할 수 있다. 1. 페이지와 레이아웃 1-1. 페이지 (Page) page.js는 특정 라우트에서 렌더링되는 UI다. app 디렉토리 안에 page 파일을 추가하고 React 컴포넌트를 def...

0. 프로젝트 구조 Next.js의 폴더 구조와 파일 이름만으로 라우팅과 기능을 결정한다. 따라서 폴더 및 파일 규칙을 이해하면 App Router 전체 구조를 이해하는 데 매우 큰 도움이 된다. 1. 폴더 및 파일 규칙 1-1. 최상위 폴더 (Top-level folders) 최상위 폴더는 프로젝트 루트(/)에 위치하며 애플리케이션...