모종의 이유로 fetch 메소드를 수행할 수 없을 때, 주로 try-catch문을 활용했다.

Next.js는 에러 핸들링을 위한 독자적인 방법이 있다.

동일 경로에 error.tsx 파일을 생성하고, “use client” 지시자를 추가한다.

이제부터 해당 에러파일 하위의 모든 경로에 있는 파일들은 오류 발생 시 이 컴포넌트를 반환한다.

//error.tsx

"use client"

export default function Error() {

	return (
		<div>오류 발생</div>
	)
}

에러 타입까지 명시하려면?

error에 자바스크립트 Error 타입을 명시하여 객체로 반환한다.

//error.tsx

"use client"

export default function Error({ error }: { error: Error }) {
	
	useEffect(() => { // 콘솔에 에러 출력
		console.error(error)
	}, [error])
	
	return (
		<div>오류 발생 {error.message}</div> // JSX에 에러 내용 직접 출력
	)
}

Reload 로 오류 화면에서 벗어나기