Next.js의 app 폴더 구조는 라우팅과 레이아웃을 효율적으로 관리하기 위해 다양한 예약 파일명과 그 기능을 제공합니다.
1. page.js: 새로운 페이지 생성 파일
page.js 파일은 새로운 페이지를 생성하고 해당 경로를 설정하는 데 사용됩니다. 이 파일은 React Server Component로 작동하며, 자바스크립트가 클라이언트에서 실행되지 않습니다. 예를 들어, 콘솔 로그를 찍어보면, 클라이언트 측에서 실행되지 않는 차이를 확인할 수 있습니다.
- 기능: 페이지 생성 및 경로 설정
- 특징: 클라이언트에서 자바스크립트가 실행되지 않음 (서버 컴포넌트)
2. layout.js: 공통 레이아웃 정의 파일
layout.js 파일은 해당 디렉토리 내의 page.js 파일들을 감싸는 공통 레이아웃을 정의합니다. 디렉토리마다 layout.js 파일을 생성할 수 있으며, 재사용 가능한 레이아웃을 적용할 수 있습니다.
- 기능: 공통 레이아웃 적용
- 인자: children 프롭은 현재 활성화된 page.js 파일의 내용을 담습니다.
- 사용법: import './globals.css'를 통해 모든 페이지에 공통 스타일 적용
3. icon.*: Favicon 파일
icon.png, icon.svg 등의 파일을 통해 각 페이지의 favicon을 설정할 수 있습니다. 브라우저 탭에 표시되는 작은 아이콘으로, 웹사이트의 브랜드 아이덴티티를 나타냅니다.
4. not-found.js: 404 Not Found 페이지
not-found.js 파일은 사용자가 존재하지 않는 경로에 접근했을 때 보여주는 404 페이지입니다. 특정 경로에 대한 페이지가 없을 때 사용자에게 경로가 없다는 메시지를 전달합니다.
- 기능: 404 페이지 렌더링
- 사용 상황: 잘못된 URL 접근 시
5. error.js: 에러 처리 페이지
error.js 파일은 다양한 오류에 대해 폴백(Fallback) 페이지를 제공하는 파일입니다. 클라이언트 측에서 발생하는 오류를 포함한 모든 컴포넌트 오류를 처리하기 때문에 클라이언트 컴포넌트로 작성해야 합니다.
- 기능: 오류 페이지 렌더링
- 특징: 클라이언트 오류를 처리하는 폴백 페이지, 클라이언트 컴포넌트로 작성 필요
6. loading.js: 로딩 상태 페이지
loading.js 파일은 페이지가 데이터를 가져오는 중에 표시되는 로딩 화면을 정의합니다. 페이지에서 페이지로 이동할 때 데이터가 로드되지 않았다면, 사용자는 이 로딩 화면을 보게 됩니다.
- 기능: 로딩 화면 렌더링
- 사용 상황: 네트워크 요청이 대기 중일 때
7. route.js: API 엔드포인트 정의 파일
route.js 파일은 API 경로를 정의하는 데 사용되며, 데이터를 반환하는 역할을 합니다. 페이지 렌더링 대신 JSON, XML과 같은 데이터 처리가 가능하며, 데이터를 처리할 때 주로 활용됩니다.
- 기능: 데이터 처리용 API 경로 생성
- 특징: JSX 대신 데이터를 반환
8. 컴포넌트 폴더 컨벤션
Next.js에서는 각 컴포넌트를 경로와 함께 콜로케이션(Colocation) 방식으로 배치할 수 있습니다. 이를 통해 컴포넌트와 라우팅 파일을 구조적으로 함께 관리할 수 있습니다.
참고 문서: Next.js 공식 문서 - Colocation
⭐️ 에러 파일과 404 파일의 우선순위
Next.js에서는 notFound() 함수가 호출되면 404 페이지를 렌더링하지만, 오류가 발생하면 Next.js는 error.js 파일을 우선적으로 렌더링합니다. 예를 들어, 404 페이지를 렌더링하는 상황에서 해당 경로에 error.js 파일만 존재할 경우, notFound() 함수가 호출되더라도 error.js 파일이 먼저 렌더링됩니다.
- 우선순위:
1.error.js(우선 처리)
2.not-found.js
