😉error.js
https://nextjs.org/docs/app/api-reference/file-conventions/error
File Conventions: error.js | Next.js
Using App Router Features available in /app
nextjs.org
error.js는 예약된 이름의 파일입니다.
에러가 발생했을 때 표시되게 되는 파일이에요
사실 Next.js가 제공하는 문서에서 아주 잘 설명을 해주고 있습니다.
'use client'; // Error components must be Client Components
import { useEffect } from 'react';
export default function Error({
error,
reset,
}: {
error: Error;
reset: () => void;
}) {
useEffect(() => {
// Log the error to an error reporting service
console.error(error);
}, [error]);
return (
<div>
<h2>Something went wrong!</h2>
<button
onClick={
// Attempt to recover by trying to re-render the segment
() => reset()
}
>
Try again
</button>
</div>
);
}우선 error.js는 항상 클라이언트 컴포넌트여야 한다는 제약조건이 있습니다.
error.js는 레이아웃 컴포넌트 안에 중첩되어 있기때문에
같은 깊이의 layout.js 컴포넌트에서 발생한 오류는 처리하지 않는다는 특징도 있어요!
그런데 그러면 의문이 생길 수 있습니다.
항상 한단계 상위의 위치에서 error.js를 작성해야한다면 루트에서의 에러처리는 어떻게...하지..?
라고 생각을 할 수 있지만 그런 경우에는
app/global-error.js라는 예약된 이름으로 파일을 생성해주면 됩니다.
또한 error 컴포넌트는 props로 error 객체와 reset 함수를 전달 받습니다.
이 reset 함수는 말그대로의 의미를 지닌다고 생각할 수 있습니다.
'use client';
export default function GlobalError({
error,
reset,
}: {
error: Error;
reset: () => void;
}) {
return (
<html>
<body>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</body>
</html>
);
}이런형식으로 비슷하게 작성을 해주면 되는데
다만 GlobalError시에는 루트가되는 layout.js도 맛이 갔을수있으니
html,body태그를 갖고 리턴을 시켜줘야하는 부분이 다른점이라고 볼 수 있습니다.
공식문서에서도 global-error.js는 layout.js또한 대체하게 되니
html, body태그도 함께 리턴해야한다고 알려주네요
같이 보면 좋은 문서로 라우팅 카테고리의
Error handling 파트가 있습니다.
https://nextjs.org/docs/app/building-your-application/routing/error-handling
Routing: Error Handling | Next.js
Using App Router Features available in /app
nextjs.org
아까 제공되었던 reset()함수 기억나실까요?
이 reset 함수는 오류의 원인이 일시적인 것일 때 유용하게 사용됩니다.
reset함수가 실행되면 Error boundary에 포함되어있는 내용들을 다시 렌더링하려고 시도하게 되어요!
그리고 만약 이 시도가 성공하게 되면 error.js가 렌더링되고 있던 화면은
렌더링된 결과로 대체되게 된답니다.
추가로 매개변수의 타입같은 경우에는 공식문서의 경우를 참고하면
{
error: Error;
reset: () => void;
}이렇게 작성한다는 것도 기억하고 가면 좋겠습니다.
'Next.js' 카테고리의 다른 글
| next.js13 app dir mui tailwindcss starter kit 보일러 플레이트 (0) | 2023.08.18 |
|---|---|
| next-auth를 이용해 Google 로그인 구현하기(기초) (1) | 2023.05.31 |
| Next.js에서 환경변수 .env를 클라이언트 사이드에서도 사용하려면..? (0) | 2023.05.05 |
| Next.js quick start 환경 설정 및 간단한 사용법 (0) | 2023.05.04 |
| SSR, CSR, SSG, ISR 이해해보기.. (4) | 2023.04.30 |
