Nextjs 파일 규칙

Nextjs는 파일 규칙에 따라 app 폴더 하위에 error, not-found, loading 파일을 생성하면 자동으로 error, not-found, loading UI를 출력해줍니다.

또한, 해당 페이지내의 가장 가까운 파일 규칙을 따르게 됩니다.

예를 들어, 아래와 같은 폴더구조가 있다면 main 페이지에서는 가장 가까운 즉, main 폴더의 error, not-found, loading의 파일 규칙을 따르게 됩니다.

root 페이지에서는 app 폴더의 최상위 error, not-found loading의 파일규칙을 따르게 됩니다.

📦app
 ┣ 📂main
 ┃ ┣ 📜page.js
 ┃ ┣ 📜error.js
 ┃ ┣ 📜not-found.js
 ┃ ┗ 📜loading.js
 ┣ 📜error.js
 ┣ 📜not-found.js
 ┣ 📜loading.js
 ┣ 📜favicon.ico
 ┣ 📜globals.css
 ┣ 📜layout.js
 ┣ 📜page.js
 ┗ 📜page.module.css

파일 규칙 사용하기

1 ) error

error.js 동작 과정

• error.js는 자동으로 리액트 Error Boundary를 생성하고, page.js 컴포넌트 또는 중첩된 자식 세그먼트를 감쌉니다.
• error.js파일로부터 export된 리액트 컴포넌트는 fallback 컴포넌트로 사용됩니다.
• Error Boundary 안에서 에러가 발생하면, 해당 에러가 포함 되며, fallback컴포넌트가 렌더 됩니다.
• fallback 에러 컴포넌트가 활성화되어 있을 때, 에러 바운더리 상위의 레이아웃들은 그들의 상태를 유지하며, 인터랙티브한 상태를 지속합니다.

Error Boundary에 대한 내용은 아래 학습자료를 참고해주세요.

React Error Boundary