[Next.js] 폴더 구조 활용(private, group)

File colocation

Next에서는 page 또는 route 파일이 아닌 경우 공개적으로 접근할 수 없습니다. 폴더를 만들었다고 해서 해당 경로에 접근할 수 없다는 의미입니다.

 

Private folders

프라이빗이라는 의미를 가지고 있는 폴더로 라우팅 시스템에서 제외되는 폴더를 의미합니다. 폴더의 이름이 시작할 때 '_'를 붙여주면 적용됩니다.

예시 사진

기존 폴더를 그대로 사용하고 page.tsx 또는 route.js 파일을 만들지 않아도 라우팅 되지 않습니다.

 

하지만 프라이빗 폴더를 활용하면 기존 폴더와 구분할 수 있습니다. 또한 개인적으로 구분하게 되면 나중에 Next의 업데이트에서 곤란한 상황이 발생할 수 있기 때문에 제공하는 기능을 활용하는 것이 좋습니다.

 

그래도 만약 본인이 사용하는 규칙에 '_'가 포함되어 있다면 폴더 이름을 아래 이미지에 나온 것처럼 '%5F'로 대체하면 '_'로 시작하는 URL로 접근할 수 있습니다.

만약 '_'로 시작하는 경우

Route groups

개발할 때 관련된 파일이나 폴더는 더 상위의 폴더를 만들어서 모아둡니다. 그래야 팀으로 진행할 때 한눈에 알아보기 편하기 때문입니다.

 

하지만 Next는 폴더가 곧 URL 경로입니다. 그렇기에 상위 폴더를 만들어서 모아두면 세그먼트가 추가되며 URL의 길이가 늘어나게 됩니다.

 

URL은 그대로 사용하지만 폴더로 그룹화시킬 수 있도록 만들어진 방법이 '()'로 폴더의 이름을 감싸는 것입니다. 아래 이미지처럼 말입니다.

예시 사진

만약 '()'가 없다면 URL의 경로는 '/auth/login'입니만, '()'를 사용해 그룹화한다면 '/login'으로 접근할 수 있습니다. 이를 활용하여 적절히 폴더로 묶어준다면 DX가 좋아질 것입니다.

 

지난번 slug도 그렇고 그룹화도 그렇고 뭔가 괄호를 이용해 포함하고 안 포함하고를 나누는 것을 보니 정규표현식이 생각이 납니다.

 

참고

https://nextjs-ko.org/docs/app/building-your-application/routing/colocation

https://www.youtube.com/watch?v=b4ba60j_4o8&list=PLC3y8-rFHvwhIEc4I4YsRz5C7GOBnxSJY