Question 1

앱 라우터와 페이지 라우터의 차이점은 무엇인가요?

Accepted Answer

Next.js 13에서 도입된 App Router(`app/`)는 **React Server Components 기반의 새 라우팅 모델**이고, Pages Router(`pages/`)는 기존 방식입니다. 한 프로젝트에 **공존이 가능**해서 라우트 단위로 점진 이전할 수 있습니다.

### **주요 차이**

- **기본 컴포넌트** — Pages는 전부 클라이언트 컴포넌트, App은 **기본이 서버 컴포넌트**입니다.
- **레이아웃** — Pages는 전역 `_app` 하나였지만, App은 **layout.tsx를 중첩**할 수 있고 페이지 이동 시 리렌더 없이 유지됩니다.
- **데이터 패칭** — Pages는 `getServerSideProps`·`getStaticProps`를 페이지 최상단에서만 쓰고 props로 내려보냈지만, App은 **필요한 컴포넌트가 직접 async/await로** 가져옵니다. prop drilling이 사라지고, 같은 요청 안의 중복 fetch는

Question 2

넥스트.js의 하이드레이션 오류란 무엇인가요?

Accepted Answer

하이드레이션은 **서버가 만든 정적 HTML에 클라이언트 React가 이벤트와 상태를 붙여 상호작용 가능하게 만드는 과정**입니다. 이때 서버 HTML과 클라이언트의 첫 렌더 결과가 **다르면** 하이드레이션 오류가 발생합니다.

### **왜 문제인가**

React는 성능을 위해 "서버 HTML과 클라이언트 첫 렌더가 같다"고 **가정**합니다. 다르면 그 트리를 버리고 클라이언트에서 다시 그리므로 SSR의 이점이 사라지고, 깜빡임·잘못된 UI·이벤트 미연결이 생깁니다.

### **주요 원인**

- **서버와 클라이언트에서 값이 달라지는 코드** — 현재 시각, 랜덤 값. 서버 렌더 시점과 클라이언트 렌더 시점의 값이 다릅니다.
- **브라우저 전용 API를 렌더 중 사용** — window 크기, localStorage 값. 서버에는 존재하지 않습니다.
- **`typeof window` 분기로 렌더 결과를 바꾸는 것** — 서버에서는 안 그리고 클라이언트에서 그리면 그 자

Question 3

넥스트.js 앱을 배포할 때 고려해야 할 사항은 무엇이고, 어떤 플랫폼을 주로 사용하나요?

Accepted Answer

### **먼저 출력 모드부터 정합니다**

- **Node 서버(기본)** — SSR·ISR·Route Handlers·Middleware 등 모든 기능을 지원합니다. Vercel이나 자체 Node 서버에 올립니다.
- **Standalone** — 같은 기능을 지원하면서 의존성을 최소로 묶은 번들을 만듭니다. **Docker로 배포할 때** 씁니다.
- **Static Export** — 순수 정적 파일만 내보냅니다. SSR·ISR·Middleware·이미지 최적화를 **못 쓰므로**, 나중에 SSR이 필요해지는 흔한 실수를 피하려면 기능 요구사항을 먼저 확정해야 합니다.

### **배포 체크리스트**

- **환경변수(보안 직결)** — `NEXT_PUBLIC_` 접두사가 붙은 값은 **빌드 시 클라이언트 번들에 인라인되어 브라우저에 노출**됩니다. 공개 전제인 값만 붙이고, 시크릿에는 절대 붙이면 안 됩니다. 또 빌드 타임에 고정되므로 환경별로 재빌드가 필요합니다.
- **

Next.js

11앱 라우터와 페이지 라우터의 차이점은 무엇인가요?보통App Router

12넥스트.js의 하이드레이션 오류란 무엇인가요?보통렌더링

13넥스트.js 앱을 배포할 때 고려해야 할 사항은 무엇이고, 어떤 플랫폼을 주로 사용하나요?보통배포