반응형
📚 Next.js 9 vs Next.js 15 주요 개념 대응표
Next.js 9 교재 개념Next.js 15 최신 방식설명
| pages/ 디렉토리 | app/ 디렉토리 | 앱 라우터(App Router) 도입. 폴더 구조와 라우팅 방식이 바뀜 |
| getServerSideProps, getStaticProps | 서버 컴포넌트 + fetch() 직접 호출 | 컴포넌트 안에서 직접 데이터를 가져올 수 있음 |
| 클라이언트 렌더링 (CSR) | 서버 컴포넌트 + 클라이언트 컴포넌트 분리 | 'use client'로 명시적으로 선언 필요 |
| _app.js, _document.js | app/layout.tsx, app/template.tsx | 글로벌 레이아웃 구성 방식 변경 |
| next/link → a 태그 필요 | next/link 단독 사용 | passHref 필요 없음 |
| API 라우팅: pages/api/*.ts | 그대로 사용 가능 | pages/api/ 방식은 여전히 지원됨 |
| 정적 파일: public/ 폴더 | 동일 | 변함없음 |
| 동적 라우팅: [id].js | [id]/page.tsx | 동적 세그먼트 구조가 폴더 단위로 바뀜 |
| 코드 분할 | 자동 코드 분할 + 서버/클라 분리 명시적 관리 | 성능 최적화 자동화됨 |
| Head 컴포넌트 | metadata API (export const metadata) | SEO 및 메타 설정 방식이 더 구조화됨 |
📁 예시 구조 변화
Next.js 9
pages/
index.js
about.js
users/[id].jsNext.js 15 (App Router)
app/
page.tsx
about/
page.tsx
users/
[id]/
page.tsx✨ 추가로 알면 좋은 개념
개념설명
| 서버 컴포넌트 | React 컴포넌트를 서버에서 실행하고, 클라이언트에 HTML만 전달함 |
| 클라이언트 컴포넌트 | 브라우저에서 동작. 상태 관리, 이벤트 핸들링 등은 여기서만 가능 |
| use client | 클라이언트 컴포넌트로 만들고 싶을 때 파일 최상단에 작성 |
| metadata API | <Head> 대신 페이지별 메타태그 선언에 사용 |
| layout.tsx | 모든 페이지에 공통 레이아웃 적용. 예: 네비게이션 바, 푸터 등 |
| loading.tsx / error.tsx | 페이지 로딩/에러 처리 전용 컴포넌트 제공 |
📘 추천 학습 순서 (Next.js 15 기준)
- App Router 구조 이해: app/page.tsx, layout.tsx 기본 구조 익히기
- 서버/클라이언트 컴포넌트 차이 이해
- 라우팅: 정적, 동적, 중첩 라우팅 ([id]/page.tsx, users/[id]/posts/[postId])
- 데이터 패칭: fetch(), revalidate, 캐싱 전략 등
- 클라이언트 상태: 'use client' + useState, useEffect
- API 라우트: pages/api/ 또는 별도 서버 API 연동
- 메타데이터 관리: metadata API로 SEO 처리
- 스타일링: Tailwind CSS, CSS Modules, Styled Components 등 중 선택
반응형
'web > Next.js' 카테고리의 다른 글
| Next.js의 API 페이지 기능 (API Router) (0) | 2025.05.04 |
|---|---|
| Next.js 9 -> 15 버전 사이의 중요한 변화 (0) | 2025.05.03 |
| Next.js 13 이상에서는 app/ 디렉토리를 사용하는 App Router 방식에서 getServerSideProps를 지원하지 않습니다. (0) | 2025.05.03 |
| Next.js 15에서는 app/ 디렉토리 기반 라우팅(App Router) 시스템 (0) | 2025.05.02 |