[Learn Next.js] 에러 핸들링

서버 액션에서 DB를 쿼리하는 코드에 try - catch 구문을 사용하여 오류를 처리할 수 있습니다.

즉, try 구문에서 DB 쿼리를 시도하고, catch 구문에서 오류 메시지가 포함된 객체를 반환합니다.

 

이후 실제 오류 발생시 애플리케이션이 제대로 동작하지 않는 것을 확인하고 싶습니다.

우리의 목표는 오류가 발생해도 레이아웃 UI를 그대로 유지하여 애플리케이션을 사용하는 것입니다.

Next.js는 이 문제를 해결하기 위해 error.tsx 파일을 사용하여 오류를 처리하는 방법을 제공합니다.

즉, 해당 세그먼트에서 오류가 발생하면 같은 수준에 있는 error.tsx 파일에서 렌더링하는 UI가 표시됩니다.

 

error.tsx 파일은 모든 오류를 처리합니다. 하지만, 존재하지 않는 리소스를 가져오는 오류의 경우 또 따로 처리할 수 있습니다.

이는 notFound 함수를 호출하여 오류를 발생시킬 수 있습니다.

즉, 리소스를 찾는 데 실패한 경우 page.tsx 파일에서 notFound 함수를 호출합니다.

그리고 notFound 호출로 인한 오류를 처리하기 위해 not-found.tsx 파일을 사용할 수 있습니다.

즉, 리소스를 찾을 수 없는 경우 notfound 함수를 호출하고, 이를 통해 not-found.tsx 파일에서 렌더링하는 UI가 표시됩니다.