반응형

Next.js에서 src/pages/_document.tsx, src/pages/_app.tsx, 그리고 src/app 디렉토리는 각각 다른 목적을 가지고 있는 중요한 구조입니다.

src/pages/_document.tsx

_document.tsx는 HTML 문서의 구조를 커스터마이징할 수 있게 해주는 특수 파일입니다.

  • 서버에서만 렌더링되며, 클라이언트 사이드 이벤트 핸들러는 여기에 추가할 수 없습니다.
  • <html>, <body> 태그를 수정하거나 메타 태그와 같은 문서 메타데이터를 조작할 때 사용합니다.
  • CSS-in-JS 라이브러리 설정, 글꼴 로딩, 전역 스타일 등을 처리하는 데 활용됩니다.
  • 모든, 페이지에 공통으로 적용되는 HTML 구조를 정의합니다.

src/pages/_app.tsx

_app.tsx는 모든 페이지를 감싸는 컴포넌트로, 페이지 간 공통 레이아웃과 상태를 관리합니다.

  • 페이지 변경 시 레이아웃을 유지합니다.
  • 페이지 전환 시 상태를 유지할 수 있습니다.
  • 전역 CSS를 여기서 임포트합니다.
  • 에러 처리, 데이터 페칭 로직 등 공통 기능을 추가할 수 있습니다.
  • Redux 등의 상태 관리 래퍼를 여기서 적용합니다.

src/app 디렉토리

src/app 디렉토리는 Next.js 13 이상에서 도입된 App Router 기능과 관련이 있습니다.

  • Pages Router(src/pages)와 달리 React Server Components를 기본적으로 지원합니다.
  • 파일 시스템 기반 라우팅을 제공하지만, Pages Router와는 다른 규칙을 사용합니다.
  • 중첩 레이아웃, 로딩 상태, 에러 처리 등을 더 간단하게 구현할 수 있습니다.
  • page.tsx, layout.tsx, loading.tsx, error.tsx 등 특수 파일 규칙을 사용합니다.
  • 더 효율적인 서버 컴포넌트 기반 렌더링을 제공합니다.

두 라우팅 시스템의 차이점

  • src/pages: 전통적인 Pages Router
  • src/app: 새로운 App Router

두 시스템은 한 프로젝트에서 공존할 수 있지만, 새 프로젝트에서는 보통 App Router(src/app)를 사용하는 것이 권장됩니다.

이러한 구조는 Next.js 애플리케이션의 다양한 수준에서 컨트롤을 제공하며, 각각 다른 목적을 가지고 있습니다.

저작자표시 비영리 변경금지 (새창열림)

'TypeScript' 카테고리의 다른 글

웹사이트 SEO를 위한 메타데이터 최적화 완벽 가이드: 검색 노출부터 소셜 공유까지  (1) 2025.04.11
React Context API: 상태 관리  (0) 2025.04.10
React에서 브라우저 창 제어하기: 새 창 열기부터 URL 추적까지  (1) 2025.03.28
Next.js에서 cookies-next로 쿠키 관리하기  (2) 2025.03.22
tailwind CSS : 유틸리티 기반 CSS 프레임워크  (0) 2025.03.01

티스토리툴바