반응형
fsd 폴더구조
-
Next.js App Router(3) - 폴더 구조와 파일 역할Next.js 2025. 6. 27. 10:59
이번 편에서는 Next.js App Router의 page 파일 이외에 새롭게 추가된 파일들의 역할을 알아보고 효율적인 폴더 구조를 구성하는 방법에 대하여 알아보겠습니다. 1편에서 App Router에서 추가된 주요 파일들에 소개했는데요.다시 간단하게 작성해 보자면 다음과 같습니다.page.tsx: 각 경로의 메인 컴포넌트입니다. 서버 컴포넌트가 기본이며, 클라이언트 컴포넌트로 사용하려면 상단에 'use client'를 추가합니다.layout.tsx: 특정 경로 그룹에서 공통으로 사용되는 레이아웃을 정의합니다. 페이지 전환 시에도 상태가 유지됩니다.template.tsx: 페이지 전환마다 새 인스턴스로 생성됩니다. 상태를 초기화하고 싶을 때 사용됩니다.loading.tsx / error.tsx: 로딩 상..