Next.js 사용할때 app 디렉토리와 pages 디렉토리를 정하는 기준이 있나요?

안녕하세요! next.js 최신 버전을 사용중이시면 app 디렉토리를 사용하는 걸 권장합니다. pages 디렉토리에서는 사용이 불가능한 여러가지 기능들을 사용하실 수 있어요. ex) server actions, 서버 컴포넌트, layout 등 반대로 생각하면 위 기능들이 굳이 필요없고 pages 디렉토리가 더 익숙하시다면 사용하셔도 무방할 것 같긴합니다. 다만, next에서 권장하는건 app 디렉토리여서 pages 디렉토리에 대한 지원이 갈수록 적어지지 않을까 예상됩니다. (새로운 기능이 추가되거나 하지는 않고 버그만 고치지 않을까요)

정답은 없습니다. 몇가지 원칙을 적용할 수 있습니다 - hook이 좋다 - 하던대로 하고싶다 (배웠던게 아깝다) - app route에 대해 개발팀장 설득에 실패했다 - app route가 (자칭) stable이지만 에러날까 불안하다 (마루타가 되고싶지 않다) - 라이브러리가 서버 컴포넌트를 지원하지 않는다 (예 : recoil, 차크라ui) 👉 page routing - 개발을 쉽게 하고싶다 - 생산성을 높이고싶다 - remix가 부러웠다 - Zero-API Layer가 웹의 미래라고 믿는다 - Page Routing이 머지않아 레거시가 될거같다 - 라이브러리가 app routing을 지원하지 않지만 앞으로 곧 지원할 것이니 상관없다 (낙관주의) 👉 app routing

개인이 선호하고 편한 방식으로 하시면됩니다. 갑자기 13버전에서 app 에다가 넣으라고 해서 영어색했는데 걔네들이 그렇게 쓰는걸 미는거 같아서 신규 프로젝트에서 그렇게 써보고 있습니다. 막상 써보니 크게 어렵진 않은데 스킬 쌓는거 같아서 좋습니다.

Next.js에서의 'app' 디렉토리와 'pages' 디렉토리는 각각 다른 역할을 수행하는데, 기준은 프로젝트 구조와 코드 구성에 따라 다를 수 있습니다. 다음은 일반적인 기준을 제시해드리겠습니다. 'pages' 디렉토리: 'pages' 디렉토리는 Next.js의 핵심 기능 중 하나인 서버사이드 렌더링 (SSR)을 지원하기 위해 사용됩니다. 'pages' 디렉토리는 프로젝트의 각 페이지에 해당하는 파일을 포함합니다. 파일 이름이 URL 경로와 일치하며, 해당 파일에 React 컴포넌트를 작성하여 페이지의 내용을 정의합니다. 'pages' 디렉토리는 Next.js에 의해 자동으로 라우팅되며, 파일의 위치와 이름이 라우팅 경로를 결정합니다. 예를 들어, pages/index.js는 루트 경로 (/)에 매핑되는 페이지입니다. 'pages' 디렉토리는 프로젝트의 메인 페이지들을 포함하고 있으며, 프로젝트의 전체적인 라우팅 구조를 결정합니다. 'app' 디렉토리: 'app' 디렉토리는 주로 커스텀 레이아웃, 공통 컴포넌트, 테마 등의 리소스를 포함하는데 사용됩니다. 'app' 디렉토리는 'pages' 디렉토리의 개별 페이지에서 재사용되는 컴포넌트들을 구성합니다. 예를 들어, 'app' 디렉토리에서는 전역으로 사용되는 레이아웃 컴포넌트, 네비게이션 바, 푸터 등을 정의할 수 있습니다. 'app' 디렉토리는 프로젝트의 전반적인 디자인, 스타일, 레이아웃을 관리하고 유지보수하는 데 유용합니다. 다만, 이는 일반적인 사용법에 가깝고, 구체적인 프로젝트 요구사항과 개발자의 개인 취향에 따라 다를 수 있습니다. 프로젝트 구조를 구성하면서 어떤 디렉토리에 어떤 파일을 위치시킬지에 대한 결정은 프로젝트의 확장성, 유지보수성 및 개발자의 편의성을 고려하여 진행하면 좋습니다.