목차

<aside> <img src="/icons/search_blue.svg" alt="/icons/search_blue.svg" width="40px" /> Next 13의 5가지 큰 변화

1. New App Directory Structure: Next.js 13에서는 app 디렉토리 구조가 도입되었습니다. 이 구조는 페이지 기반 라우팅을 더욱 명확하게 하고, 더 나은 파일 구조를 제공합니다.
2. Server Components: React 18과 함께 발표된 React Server Components를 Next.js 13은 정식으로 지원합니다. 서버에서 프리렌더링을 통해 클라이언트로 전송되기 때문에 앱 성능이 크게 향상됩니다.
3. Optimal Image Optimization: Next.js 13에서는 새로운 이미지 최적화 기능이 도입되었습니다. 이는 이미지 크기를 자동으로 조절하여 더 빠른 로딩 속도와 최적의 품질을 유지합니다.
4. Streaming and SSR with Suspense: 스트리밍과 SSR 기능은 Suspense를 통해 더욱 강화됩니다. 이제 더 나은 사용자 경험을 제공하기 위해 데이터를 비동기적으로 로드할 수 있습니다.
5. Turbopack (Alpha): Next.js 13에서는 새로운 번들러인 Turbopack의 알파 버전이 소개되었습니다. Turbopack은 Webpack보다 최대 700배 더 빠른 퍼포먼스를 제공하며, 초기 번들링 속도와 확장성 측면에서 큰 이점을 제공합니다. </aside>

app 디렉터리의 등장

Next.js 12 버전까지 공통 레이아웃을 유지할 수 있는 방법은 _app이 유일

→ 각 페이지 별로 서로 다른 레이아웃을 유지할 수 있도록 app 레이아웃 등장

app 디렉터리의 라우팅

라우팅

• 기존에는 파일 시스템 기반으로 동작 (/pages/ 하위)

• Next.13부터 /app/a/b는 /a/b로 변환되고 파일명은 무시

  → app 디렉터리 내부의 파일명은 라우팅 명칭에 영향이 없음

  → app/blog/post.tsx ⇒ /blog/post 라우트가 자동 생성

• app 디렉터리 내부 폴더명이 라우팅됨

  • 이 폴더에 포함할 수 있는 layout.js가 있으면, 그 하위 폴더 및 주소에 모두 영향을 끼침

→ 파일명 라우팅에서 폴더명 라우팅으로 변경

app/
├── layout.tsx        # 기본 레이아웃을 정의
├── page.tsx          # 루트 경로(/)에 대한 페이지 정의
├── about/
│   └── page.tsx      # /about 경로에 대한 페이지 정의
├── product/
│   ├── [id]/
│   │   └── page.tsx  # /product/[id] 경로에 대한 동적 페이지 정의
│   └── layout.tsx    # /product 경로의 레이아웃 정의
├── error.tsx         # 오류 상태에 대한 화면 정의
└── loading.tsx       # 로딩 상태에 대한 화면 정의