My Boundary As Much As I Experienced

Next.js에서 '_'가 붙은 파일은 뭘 의미하는 것일까? (_app.tsx, _document.tsx, _error.tsx) 본문

FrontEnd/Next.js

Next.js에서 '_'가 붙은 파일은 뭘 의미하는 것일까? (_app.tsx, _document.tsx, _error.tsx)

Bumang 2024. 4. 22. 14:18

Next.js에서 파일이나 폴더 이름 앞에 언더스코어(_)가 붙는 것은 특별한 의미를 지니며,

주로 Next.js 프레임워크의 내부적인 또는 시스템에 의해 특별하게 처리되는 요소들을 나타낸다.

 

'_'가 앞에 붙는 특수 파일

1. _app.js 또는 _app.tsx

이 파일은 Next.js 애플리케이션의 루트 컴포넌트를 정의하며, 모든 페이지에 공통적으로 적용되는 레이아웃이나 상태를 설정하는 데 사용된다. _app.js는 페이지 전환 시 상태를 유지하고, 전역 CSS를 추가하는 등의 기능을 수행할 수 있다.

2. _document.js 또는 _document.tsx

_document.js는 서버에서만 렌더링되며, 초기 서버 사이드 렌더링 시 HTML 문서의 구조를 구성한다. 이 파일을 통해 <html>, <body> 태그와 같은 HTML 문서의 기본 구조를 커스터마이징할 수 있으며, 서버에서 렌더링될 때 한 번만 호출된다.

3. _error.js 또는 _error.tsx

이 파일은 애플리케이션에서 발생하는 모든 오류를 처리하는 커스텀 오류 처리 페이지를 정의한다. 예를 들어, 404 또는 500 에러 페이지를 커스터마이징하고 싶을 때 이 파일을 사용할 수 있다.

4. public/_next

public/_next는 Next.js가 빌드 과정에서 생성하는 정적 파일과 청크 파일을 저장하는 디렉터리이다. 이 폴더는 자동으로 생성되며, 배포 과정에서 이 폴더 내의 파일들이 클라이언트에 제공된다.

 

위와 같은 특수 페이지는 라우터 폴더의 최상단에 위치해야 제 기능을 다 할수 있다. (예외: layout파일은 어디서나 쓸 수 있는 특수 파일이긴 하다)

 

내가 만약 심심해서 임의로 _bumang.tsx 파일을 만들면 어떻게 동작하나?

Next.js에서 파일 이름이 _로 시작하는 파일을 pages 디렉터리에 추가하는 경우, Next.js는 그 파일을 일반적인 페이지 컴포넌트로 취급하지 않는다. 파일 이름 앞에 언더스코어(_)를 붙이면 Next.js는 이를 내부 파일이나 프라이빗 파일로 간주하고 일반적인 라우팅 대상에서 제외한다.

 

이는 특정 파일을 임시적으로 비활성화하거나 라우팅에서 제외하고자 할 때 유용할 수 있다. 예를 들어, pages/_bumang.tsx라는 파일을 만든다면, 이 파일은 웹사이트의 일부로서 접근 가능한 라우트로 생성되지 않는다. 따라서 사용자가 브라우저를 통해 해당 경로에 접근하려고 하면 페이지를 찾을 수 없다는 오류(404)를 받게 된다.

 

그러므로, 어떤 개발자는 내부 API나 유틸리티 함수를 포함하는 파일에 대해 이런 방식을 사용하기도 한다.

그러나 일반적으로 이런 데이터는 '_'하나를 붙여 Page Route에 모두 포함시키기 보다는

lib 또는 utils 같은 별도의 디렉터리에 저장하는 것이 좋다.

 

 

 

'FrontEnd > Next.js' 카테고리의 다른 글

Next.js의 getStaticProps/getServerSideProps 완전 정리  (0) 2024.04.28
Next.js에서 useRouter와 Link태그를 사용할 때 URL 마스킹하기  (0) 2024.04.27
Next.js Page Router의 _app.js의 역할  (0) 2024.04.22
Next.js의 <Head> 사용방법 (MetaData)  (0) 2024.04.22
Next.js가 제공하는 <Link>태그와 <Image> 태그가 제공하는 브라우저 최적화 이점  (0) 2024.04.22
'FrontEnd/Next.js' Related Articles more