Next.js 파일 및 폴더 이름 컨벤션

Next.js

Next.js 파일 및 폴더 이름 컨벤션

 

 

Next.js를 공부하기로 마음 먹고, 열심히 설치도 했는데,

정작 파일 및 폴더를 만들 때

이름을 어떻게 짓는 게 어디에 좋은지를 다룬 컨벤션이 있을까? 하던 찰나에

구글링하고나서 알게 된 점들을 요약해서 남겨 본다.

 

이름이란 짓는 사람 마음이라지만(개똥이 등),

Next.js에서는 다음과 같은 이름이 좋은 이름이라고 한다.

 

1. 이름을 읽자마자 얘가 뭐 하는 아인지

한눈에 딱 알아보고 쉽고, 명확하여 혼란을 최소화하는 이름

 

2. 사이트의 SEO력을 올려주는 이름

 

(둘 다 어렵다...)

 

좋은 이름이 어렵다면 이름 다운 이름!, 기본은 지키는 이름부터가 아닐까.

 

1번과 2번에 해당하는 이름을 구체적으로 어떻게 짓는지 기초적인 부분을 살펴보겠다.

 

 

1번 식별이 쉽고 명확하여 혼란을 최소화하는 이름

 

app 폴더 안의 파일과 폴더명은 기본적으로 케밥 케이스(Kebab case)로 짓는다고 한다.

케밥 케이스(Kebab case)란 이름을 소문자 + 하이픈으로 짓는 표기법이다.

예를 들면 about-us.js 가 있다.

Next.js에서 라우트명도 파일명, 폴더명과 반드시 같아야 한다.

그래서 aboutUs라는 라우트 명보다 about-us을 사용하길 추천한다고 한다.

 

 

컴포넌트 이름은 어떻게 지으면 되는 걸까?

똑같이 케밥 케이스(Kebab case)로 짓는 건 아니다.

컴포넌트명은 일반 html 태그와 다르게 보이게 하기 위해서

 파스칼 케이스(Pascal case)로 적는다.

파스칼 케이스(Pascal casae)란 이름을 지을 때 단어의 앞글자만 대문자로 짓는 표기법이다.

예를 들면 AboutUs 가 있다.

 

 

뭔가 이걸로 부족한듯 해서 구글링을 더 해봤다.

실제 유효하다고 평가를 받은 폴더 구조 이미지들을 가져와서 추려본 결과 다음과 같다.

1)

2)

 

이미지를 요약해 본다면

1. 폴더 계층은 app 폴더 + components 폴더 + db 폴더 등을 서로 나란히 위치시켜야 한다.

2. app 폴더 안 하위폴더를 구성할 시에는 라우터 연결을 생각해서 구성한다.

3. 하위폴더의 이름을 지을 때에는,components 폴더의 하위 폴더 외에는 전부, 케밥 케이스로 짓는다.

components 폴더의 하위폴더는 전부 파스칼 케이스로 써서 대문자로 짓는다.

4. 파일명을 지을 때에는 조금 나뉜다.

types폴더의 파일들은 파스칼 케이스(Blog,Product 등)로, 훅 파일들은 캐멀 케이스(useLayoutStore 등)로 짓고, 그 외엔 케밥 케이스로 파일명을 짓는 경우가 있다.

 

 

다시 한번 좋은 이름이란 뭘까?

위에 기재한 표기법을 지키면 기본은 될것 같다.

좋은 이름은 다른 사이트에서 좋은 이름을 많이 두루 접한 경험치에 기반한다고 생각하고

파일을 육하원칙에 기반해 핵심 요약을 한다고 생각하고 뽑아야 겠다.

그래도 쉽지 않겠지만.

 

이 외에도 평상시에 근사한 사이트나 신뢰가 높은 사이트들에 들어갔을 때 F12키를 연타하여 들어간 개발자 도구에서

파일 이름, 클래스이름, 컴포넌트 이름 등을 자주 눈에 익혀두는 게 좋을 것 같다.

 

 

2번 SEO력을 올려주는 이름

검색엔진에서 검색을 할 때 이 사이트가 뭐 하는 사이트인지 검색엔진이 알아먹기 쉽게 짜면

검색 결과에서 최대한 높은(영끌) 곳에 위치할 가능성이 높아진다.

컴포넌트명과 라우트명이 SEO의 관건 중 하나라고 한다.

난 이것에 대해서도 큰 사이트에 가서 좋은 이름들을 자꾸 눈에 박아(?) 두는 게

좋을 것 같다는 생각이 들었다.

컴포넌트명과 라우트명을 잘 짜는 법은 1번과 연결이 되기 때문이다.

 

 

요약:

기본 이름:

파일명,폴더명은 케밥 케이스로

컴포넌트명은 파스칼 케이스로 짓기

좋은 이름:

식별이 쉽고 명확하여 혼란을 최소화해주고 사이트의 SEO력을 끌어올려주는 이름

이는 어려운 문제이므로,

평상시에 꾸준히 신뢰도가 높은 좋은사이트들이 어떻게 파일 이름들을 짰는지를 많이 둘러보고 다니기

 

---

참고:

https://medium.com/@mirazhs/naming-conventions-in-next-js-boosting-seo-and-code-maintainability-d4150fe7e6e

 

Naming Conventions in Next JS: Boosting SEO and Code Maintainability.