모범 사례: NextJS 13 폴더 구조

Question

NextJS 사용법을 배우고 있으며 최신 버전의 App Router를 사용하고 있습니다. 현재 등록 및 로그인 페이지를 넣을 위치와 폴더 구조 등 일반적으로 구성 요소를 어디에 배치하고 퍼팅 방법과 같은 라우팅을 수행하는 방법에 대해 고민하고 있습니다. 다른 관련 구성 요소를 함께 사용하면 이 주제에 대해 좀 더 명확하게 설명할 수 있고 가능한 한 간단하게 만들어 주세요. 아직 배우는 중이므로 몇 가지 예를 들어주실 수 있습니다. 어떤 도움이라도 대단히 감사하겠습니다. 감사합니다!

Answer 1

다음 문서에서 이 섹션을 읽으면 프로젝트 폴더를 정리하는 데 도움이 될 것입니다.

https://nextjs.org/docs/app/building-your-app/routing/hosting

저는 다양한 구조를 시도해 보았고 마침내 다음 구조로 결정했습니다.

1. /app 디렉토리는 코로케이션을 허용하고 라우팅 목적으로만 사용되는 /pages 디렉토리와 다르기 때문에 모든 것(모든 폴더 및 파일)은 /app 디렉토리에 있습니다. 이런 방식으로 /app 디렉토리는 새로운 /src 디렉토리로 간주될 수 있습니다.

2. 라우팅되지 않은 모든 폴더는 이름 앞에 밑줄을 붙여 비공개로 설정됩니다(위 링크에서 언급한 대로). 이는 폴더가 경로의 일부가 아니라는 것을 다음 라우터에 알려줍니다. (예: _컴포넌트, _libs,...)

3. 이 시점에서 밑줄(_)이 있는 모든 폴더는 경로가 아니며 밑줄이 없는 다른 폴더는 라우팅 시스템의 일부라는 것을 확인했습니다(page.tsx 또는 page.js 파일이 포함된 폴더는 경로임에도 불구하고). 라우팅 시스템(라우팅 시스템의 일부가 되기 위한 또 다른 조건)이지만 저는 라우팅 그룹(위 링크에서 언급한 대로)인 또 다른 Next 13 기능을 사용했습니다. 폴더가 정리 목적(폴더 그룹화)으로 표시되고 경로의 URL 경로(예: 경로)에 포함되어서는 안 되도록 폴더 이름을 괄호로 묶습니다.

이 원칙에 따라 필요한 모든 폴더를 /app 디렉토리에 넣고 경로 그룹을 사용하여 모든 경로를 "(경로)" 폴더로 그룹화하고 개인 폴더를 경로가 아닌 폴더 앞에 배치하여 추가합니다. 밑줄 접두사 및 모든 것이 격리됩니다.

아래 사진은 위 내용을 모두 요약한 것입니다.

이 링크와 제가 프로젝트 폴더를 구성한 방식이 여러분에게 도움이 되기를 바랍니다.