이 부분은 다시 들어봐야 할듯…

1. Next.js에서 제공하는 Error Handling

Advanced Features: Error Handling | Next.js

총 3가지 정도가 있다.

1. Development 환경에서의 Error Handling

   1. overlay로 뜬다.

   

Server Error page

1. 커스텀 에러 페이지
2. 500 서버 에러 페이지를 만들 수 있다.

Advanced Features: Custom Error Page | Next.js

1. _error 페이지 컴포넌트가 있음

   function Error({ statusCode }) {
     return (
       <p>
         {statusCode
           ? `An error ${statusCode} occurred on server`
           : 'An error occurred on client'}
       </p>
     )
   }
   
   Error.getInitialProps = ({ res, err }) => {
     const statusCode = res ? res.statusCode : err ? err.statusCode : 404
     return { statusCode }
   }
   
   export default Error
   

2. Next/Error 컴포넌트가 존재한다.

   import Error from 'next/error'
   
   export async function getServerSideProps() {
     const res = await fetch('<https://api.github.com/repos/vercel/next.js>')
     const errorCode = res.ok ? false : res.status
     const json = await res.json()
   
     return {
       props: { errorCode, stars: json.stargazers_count },
     }
   }
   
   export default function Page({ errorCode, stars }) {
     if (errorCode) {
       return <Error statusCode={errorCode} />
     }
   
     return <div>Next stars: {stars}</div>
   }
   

Handling Client Errors

<aside> 💡 목적 : 에러가 난 컴포넌트를 에러 컴포넌트로 대체해서 보여주기 위함이다.

</aside>

• React Error Boundaries를 사용한다.
• Error Boundary 컴포넌트를 하나 만든다.
• class Component로 만들어야한다.

Error 컴포넌트를 만들어봐야할듯!??!