NextJS 13 폴더 구조 최적 사례
NextJS를 배우고 있다면 프로젝트를 구조화하고 파일을 효과적으로 정리하는 방법을 이해하는 것이 중요합니다. 이 블로그 글에서는 NextJS 13의 폴더 구조에 대한 최적 사례를 탐구하며 라우팅 및 컴포넌트 조직화에 초점을 맞출 것입니다.
NextJS 13 폴더 구조 개요
NextJS 13에서 /app 디렉토리는 프로젝트를 구조화하는 데 중요한 역할을 합니다. 이 디렉토리는 공존을 허용하며 새로운 /src 디렉토리라고 생각할 수 있습니다. 라우팅 목적으로 구체적으로 사용되는 /pages 디렉토리와는 다릅니다.
다음은 주요 원칙에 대한 요약입니다:
- 모든 파일과 폴더를 /app 디렉토리 안에 놓습니다.
- 폴더 이름에 밑줄(_)을 접두사로 붙이면 해당 폴더가 라우팅 시스템의 일부가 아닌 개인 폴더라는 것을 나타낼 수 있습니다.
- 괄호로 폴더 이름을 감싸면 (()) 라우팅 경로에 포함되지 않고 조직화 목적으로 사용되는 루트 그룹을 사용할 수 있습니다.
이러한 원칙을 따르면 NextJS 프로젝트에서 체계적이고 유지 관리하기 쉬운 폴더 구조를 구축할 수 있습니다.
예시 폴더 구조
예시 폴더 구조를 살펴보겠습니다:
/app
/_components
/_libs
(routes)
/dashboard
customComponent.tsx
page.tsx
layout.tsx
page.tsx
이 예시에서:
- _components 및 _libs와 같이 밑줄 (_) 접두사가 있는 폴더는 개인 폴더로 간주되며 라우팅 시스템의 일부가 아닙니다.
- (routes) 폴더는 루트 그룹으로 간주되어 라우팅 경로에 포함되지 않고 조직화 목적으로 사용됩니다.
- 루트 그룹 폴더 내에는 /dashboard와 같은 중첩 폴더를 가질 수 있습니다.
이 구조를 사용하면 다양한 컴포넌트, 라이브러리 및 라우트를 격리하여 코드베이스를 찾고 유지 관리하기 쉽게 할 수 있습니다.
추가적인 팁
NextJS 프로젝트를 구조화하는 데 도움이 되는 몇 가지 추가적인 팁은 다음과 같습니다:
- 동일한 레이아웃을 공유하는 유사한 라우트가 있다면 /app 디렉토리 내에서 () 구문을 사용하여 중첩 폴더 구조를 생성할 수 있습니다.
- /app 디렉토리 외부에 별도의 컴포넌트 폴더를 생성하여 공유 컴포넌트를 유지할 수 있습니다.
- 컴포넌트 폴더 내에서 제공자, UI 또는 공유 컴포넌트와 같은 다른 유형의 컴포넌트를 위한 하위 폴더를 만드세요.
결론
NextJS 13에서는 프로젝트의 유지 관리 및 확장성을 보장하기 위해 체계적인 폴더 구조를 채택하는 것이 중요합니다. 이 블로그 글에서 소개된 권장 사례를 따르면 라우팅 간소화, 개인 및 공용 컴포넌트의 분리, 코드 조직화를 촉진하는 폴더 구조를 만들 수 있습니다.
견고한 폴더 구조를 구현함으로써 NextJS 프로젝트의 복잡성을 처리하고 다른 개발자와의 협업을 원활하게 할 수 있습니다.
