10/25 - Next.js 13 깔끔한 폴더 구조

Next.js 13 깔끔한 폴더 구조 

Next.js 13 의 App Routing 방식의 프로젝트를 진행하던 중, 한 가지 의문점이 생겼다.

폴더 구조를 통해 자동으로 Route 하는 방식은 확실히 개발에 편한데,

폴더 구조가 너무 복잡해지는 것 아닌가? 라는 생각이 들었다.

현재 작업 중인 폴더인데, api, components, styles 폴더고 뭐고 login이나 register 같은 route 폴더랑

뒤죽박죽 섞여있어서 보기도 힘들고 난잡한것을 확인할 수 있다.

 

Next.js 13 공식 문서를 읽을 때, 라우팅 해야되는 페이지 폴더를 그룹으로 묶을 수 있었던 내용이 어렴풋이 기억나서 찾아보았다.

Routing: Route Groups | Next.js (nextjs.org)

Routing: Route Groups | Next.js

Next.js 13 의 App Routing 방식은 Route Groups 라는 폴더를 정의할 수 있다.

이는 여러 페이지들이 같은 app/ 의 깊이에만 존재하면 가독성이 떨어지기 때문에 Route Groups 방식을 사용하면

URL에 영향을 주지 않고 route 폴더를 그룹화 시킬 수 있다.

Route Groups 를 만드는 방법은 단순하게 소괄호 () 를 이용하여 그룹 폴더를 생성해주면된다.

다만 사용할 때 주의할 점이 있는데, 다른 그룹 안에 같은 이름을 가지는 route 폴더가 존재해서는 안된다는 것이다.

경로 그룹을 포함하는 경로는 다른 경로와 동일한 URL 경로로 확인되지 않아야 합니다.

(route)라는 Route Groups를 통해 app 페이지를 제외한 route 폴더를 분류해주니 좀 더 깔끔해졌다.

 

Next.js 는 폴더 구조를 통해 자동으로 라우팅을 진행하니까, app 폴더 내부에있는 styles 같은 폴더도 route되는 거 아닐까? 하고 고민해 본적이있다.

공식 문서를 찾아보니 이러한 문제를 관리하기 위한 기술이 존재했었다 !

Routing: Project Organization | Next.js (nextjs.org)

Routing: Project Organization | Next.js

Private Folders 는 app 폴더 내부에 있는 폴더 중 라우팅 하지 않을 폴더를 구별할 수 있도록 하는 기능이다.

Private Folders 를 만드는 방법은 폴더명 앞에 언더바(_)를 작성해 주면 된다.

예시를 통해 확인해보면, _components와 _lib의 폴더는 언더바(_)를 통해 Private Folders로 정의하였으며,

Not Routable하여 라우팅이 방지된 것을 확인할 수 있다.

라우팅이 필요 없는 components 폴더와 styles 폴더는 언더바 작성을 통해 Private Folders로 변경해주었다.

 

결론적으로 Next.js 13의 폴더 구조를 깔끔하게 개선할 수 있도록

URL에 영향이 가지 않도록 폴더를 그룹화 할 수 있는 Route Groups와

애초에 라우팅 되지 않도록 작성하는 Private Folders가 있었다.

 

이 두 가지 방법을 통해 폴더 구조를 개선시킬 수 있었다 !