[next.js] directory 구조와 동작 방식

next.js는 특이하게도 directory 구조가 application 동작 방식에 큰 영향을 미칩니다. 이번 포스트에서는 next.js 14의 디렉토리 구조가 동작 방식에 어떻게 영향을 미치는지 포스트 해보고자 합니다.

pages/

next.js의 가장 큰 특징 중 하나는 파일 기반 라우팅 시스템이라고 볼 수 있습니다. pages/ 폴더 내의 파일을 URL 경로와 자동으로 매핑하여 라우팅을 간편하게 처리할 수 있게 해줍니다.

예를 들어 , pages/index.js는 "/" 경로와 매핑이되고 , "pages/abc.js는 /abc 경로와 매핑이 됩니다. 즉 , pages dirctory 구조는 곧 URL 구조를 의미합니다.

가장 신기했던 점은 [변수명]으로 directory를 만들면 동적 라우팅을 사용할 수 있다는 것입니다.

app/

app / 폴더 내의 컴포넌트는 Server Component로 동작합니다.

directory 명에 따른 동작 방식도 존재하지만 , 파일 명에 따른 동작 방식도 존재합니다.

예를 들어 , app/home/layout.tsx의 layout.tsx 파일은 /home 경로 하위의 모든 페이지에 동일한 레이아웃을 적용합니다.

public/

public/ 폴더는 정적 파일을 제공하는 공간으로 사용됩니다.

api/

pages/api 폴더 내에는 백엔드 기능을 쉽게 추가할 수 있도록 API 엔드 포인트를 지원합니다. pages/api 폴더에 있는 파일들은 서버 측에서 실행되며 클라이언트로부터 API 요청을 받을 수 있습니다.

서버와 클라이언트 측 로직을 같은 프로젝트에서 관리할 수 있게 된다는 장점이 생깁니다.

middleware/

middleware/ 폴더를 통해 요청이 처리되기 전에 특정 로직을 실행할 수 있는 기능을 제공합니다. 인증이나 리디렉션 , 로깅 등 다양한 용도로 활용할 수 있습니다.