Next.js의 private folders

1. 개요

 Next.js에서 특별한 이름을 가진 몇몇 파일들은 프레임워크에 의해 다양한 용도로 이용된다. 예를 들어 page.tsx (혹은 page.jsx)는 페이지를 생성하기 위한 파일이며 loading.tsx (혹은 loading.jsx)는 페이지가 로딩 중일 때 보여줄 컴포넌트로 이용된다. 그리고 어떤 이름은 폴더를 url에서 완전히 숨길 때 이용할 수 있다.

 

2. Private folders

 Next.js에는 private folders라는 것이 있다. 이는 클라이언트 번들에는 포함되지 않고 서버에서만 사용되는 폴더를 의미한다. Next.js에는 클라이언트와 서버, 두 가지 환경이 존재한다. 클라이언트는 브라우저에서 실행되는 코드로 모든 사용자에게 노출되지만 서버는 서버에서만 실행되기에 클라이언트에는 노출되지 않는다. 그렇기에 private folders는 보안상 민감한 코드나 서버 전용 로직을 안전하게 관리할 수 있게 해준다.

 

2-1. 예시

extras 폴더

 

/extras 진입

 

 

 예를 들어 위 이미지처럼 extras라는 폴더가 존재한다고 하자. 그리고 http://localhost:3000/extras로 진입하면 화면이 무사히 보이는 것을 확인할 수 있다.

 

_extras로 이름 변경

 

private folder는 폴더 이름 앞에 언더바를 하나 붙이는 것으로 구현할 수 있다. 위 이미지처럼 extras라는 이름 앞에 언더바를 하나 붙이면 아래 이미지처럼 /extras로 진입 시 에러를 확인할 수 있다.

 

 

그렇기에 이는 UI 로직과 라우팅 로직을 분리하거나 파일 구성 등에 활용할 수 있다. 그리고 주의할 점이 하나 있는데, 만약 해당 폴더 내의 코드가 클라이언트에서 import 되거나 참조된다면 클라이언트 번들에 포함되어 버릴 수도 있다.