Next.js 15 파일 규약: 효율적인 프로젝트 구조를 위한 가이드

Next.js는 파일 시스템 기반의 라우팅을 지원하여 직관적인 프로젝트 구조를 제공합니다. 하지만 다양한 파일 종류와 각 파일이 담당하는 역할을 명확히 이해해야 효율적인 개발을 할 수 있습니다. 이번 글에서는 Next.js 15에서 사용되는 주요 파일 규약에 대해 자세히 알아보고, 각 파일의 역할과 예시를 통해 이해를 돕겠습니다.

Next.js 파일 규약의 중요성

• 코드 가독성 향상: 일관된 파일 구조는 코드 이해도를 높이고 유지 보수를 용이하게 합니다.
• 팀 협업 원활화: 팀원 간의 코드 스타일과 구조에 대한 이해를 도와 협업 효율을 높입니다.
• Next.js 기능 활용: 각 파일의 특성을 이해하고 활용하면 Next.js의 다양한 기능을 효과적으로 활용할 수 있습니다.

주요 파일 규약

1. default.js

• 역할: 해당 디렉토리의 기본 페이지 컴포넌트
• 예시: pages/products/default.js는 /products 경로에 접속할 때 기본적으로 렌더링되는 페이지입니다.

2. error.js

• 역할: 에러 발생 시 보여줄 페이지 컴포넌트
• 예시: pages/api/auth/[...nextauth].js 파일에서 에러가 발생하면 pages/api/auth/error.js 파일이 렌더링됩니다.

3. instrumentation.js

• 역할: Next.js의 데이터 추적 및 측정을 위한 파일
• 예시: pages/api/instrumentation.js 파일에서 데이터 추적을 위한 설정을 할 수 있습니다.

4. layout.js

• 역할: 자식 페이지에 공통적으로 적용되는 레이아웃 컴포넌트
• 예시: pages/posts/[id].js와 pages/posts/index.js 파일에서 공통적으로 사용되는 헤더와 푸터를 pages/posts/layout.js 파일에서 정의할 수 있습니다.

5. loading.js

• 역할: 데이터를 불러오는 동안 보여줄 로딩 화면 컴포넌트
• 예시: getStaticProps 또는 getServerSideProps에서 데이터를 불러오는 동안 pages/loading.js 파일이 렌더링됩니다.

6. mdx-components.js

• 역할: MDX 파일에서 사용할 커스텀 컴포넌트를 정의하는 파일
• 예시: MDX 파일에서 사용할 코드 블록, 이미지 컴포넌트 등을 mdx-components.js 파일에서 정의할 수 있습니다.

7. middleware.js

• 역할: 요청/응답 사이클에서 특정 작업을 수행하는 미들웨어 함수를 정의하는 파일
• 예시: pages/api/auth/middleware.js 파일에서 인증 미들웨어를 정의하여 특정 API에 대한 접근을 제한할 수 있습니다.

8. not-found.js

• 역할: 존재하지 않는 페이지에 접속했을 때 보여줄 페이지 컴포넌트
• 예시: /pages/404.js 파일과 동일한 역할을 합니다.

9. page.js

• 역할: 라우트에 해당하는 페이지 컴포넌트
• 예시: pages/index.js는 루트 페이지, pages/about.js는 /about 페이지를 나타냅니다.

10. route.js

• 역할: API 루트를 정의하는 파일
• 예시: pages/api/posts.js 파일에서 게시글 관련 API를 정의할 수 있습니다.

11. Route Segment Config

• 역할: 동적 라우트에서 사용되는 세그먼트를 정의하는 방식
• 예시: [id].js는 동적 ID를 가진 페이지를 나타냅니다.

12. template.js

• 역할: 레이아웃 파일과 유사하지만, 더 일반적인 템플릿을 정의하는 파일
• 예시: components/templates/DefaultLayout.js 파일에서 기본 레이아웃을 정의하고, 다른 페이지에서 이 레이아웃을 상속받아 사용할 수 있습니다.

13. Metadata Files API Reference

• 역할: 페이지 메타데이터를 정의하는 파일
• 예시: pages/about/metadata.json 파일에서 About 페이지의 제목, 설명, 키워드 등을 정의할 수 있습니다.

결론

Next.js의 파일 규약을 이해하고 활용하면 더욱 효율적이고 체계적인 개발이 가능합니다. 각 파일의 역할과 사용법을 숙지하여 프로젝트의 규모가 커지더라도 쉽게 관리할 수 있도록 노력해야 합니다.

주의:

• Next.js 버전에 따라 일부 파일 규약이 변경될 수 있습니다.
• 프로젝트마다 약간씩 다른 파일 구조를 사용할 수 있지만, 위에서 설명한 규약을 기반으로 일관된 구조를 유지하는 것이 좋습니다.

추가적으로 다룰 수 있는 주제:

• Next.js API Routes
• Data Fetching (getStaticProps, getServerSideProps)
• Custom Server
• Dynamic Routing