3장: 프로젝트 구조와 주요 파일 이해하기

Next.js 15 프로젝트 구조 한눈에 보기

Next.js 15로 프로젝트를 시작하면, 새로 생성된 디렉터리와 파일들이 처음에는 다소 낯설게 느껴질 수 있습니다. 하지만 이것만 익혀두면 효율적인 개발은 물론, 유지보수와 협업도 한층 수월해집니다.

폴더와 파일, 무엇이 어디에 있나?

Next.js 15는 파일 시스템을 기반으로 라우팅이 동작하는 덕분에 폴더 구성만으로 URL 경로가 자동으로 만들어집니다. 핵심은 'app/' 폴더입니다. 이곳이 모든 페이지와 라우트의 출발점이기 때문입니다. 예를 들어, /products 경로를 만들고 싶다면 app/products/page.tsx 파일만 생성하면 됩니다. 각 폴더 안의 page.tsx가 바로 그 경로의 엔드포인트 역할을 합니다.

public/ 폴더는 이미지, 폰트 파일 등 외부에서 접근이 필요한 정적 파일을 담는 곳입니다. 이곳에 넣어진 파일은 별도의 경로 설정 없이도 바로 불러올 수 있습니다.

node_modules/는 프로젝트에서 사용하는 외부 라이브러리들이 설치되는 공간입니다. 이 폴더는 직접 수정하거나 관리할 필요가 없습니다.

프로젝트의 핵심 설정은 next.config.js에서 조정합니다. 환경 변수, 빌드 옵션, 이미지 최적화 등 전체 프로젝트에 영향을 주는 많은 설정값을 여기서 관리합니다.

package.json은 프로젝트에 포함된 라이브러리와 실행 명령어, 그리고 여러 설정 정보를 품고 있습니다. 여기에 정의된 의존성 목록을 바탕으로 모든 개발 환경이 동일하게 유지됩니다.

유지보수와 협업을 돕는 표준 구조

Next.js 15의 파일 구조 원칙은 코드의 이해도를 높이고, 여러 명이 함께 일할 때 발생하는 혼란을 예방하기 위함입니다. 일관된 구조 덕분에 새로운 팀원도 금방 프로젝트에 적응할 수 있고, 코드 수정이나 기능 추가도 안전하게 이루어집니다.

최근 버전에서는 서버 컴포넌트와 클라이언트 컴포넌트가 명확히 구분되어 있고, 공식 문서에서 권장하는 폴더 배치만 지켜도 자연스럽게 성능 최적화가 이뤄집니다.

Next.js 구조에 익숙해지면 펼쳐지는 새로운 가능성

Next.js의 폴더와 파일 구조를 처음에는 암기하는 것이 아니라, 차근차근 하나씩 만들어 보고 직접 페이지를 생성해보며 자연스럽게 익히는 것이 좋습니다. 구조만 제대로 이해해도 복잡한 라우팅이나 빌드 문제로 고민할 시간이 대폭 줄어듭니다. 이제 다음 단계에서는 각 폴더와 파일을 활용해 실제로 페이지를 만들고, 라우트를 구현하는 실습으로 넘어가겠습니다.