Next.js - getServerSideProps() 에러 핸들링

Next.js

 

1. 에러 페이지 생성

---

const Error = ({statusCode}) => {
    return(
        <>
            <h2>
                {
                    statusCode
                    ? `An error ${statusCode} occurred on server`
                    : 'An error occurred on client'
                }
            </h2>
        </>
    )
}

Error.getInitialProps = ({res, err}) => {
    const statusCode = res ? res.statusCode : err ? err.statusCode : 404
    return { statusCode }
}

export default Error

 

해당 경로에 ./project/pages/_error.js 에러를 표시할 페이지를 생성해 주자.

 

-> 업데이트돼서 404.js 이름으로 생성해준다.

 

 

2. getServerSideProps()

---

export const getServerSideProps = async ({params}) => {

    const {id} = params;
    const post = [];
    await db.collection("post").doc(id).get().then((querySnapshot) => {
            post.push(querySnapshot.data());
    });
    
    if(post[0] === undefined){ // <- Data Fetching Error Handling
        return{
            notFound : true    
        }
    }else{
        return{
            props : {
                post : post[0],
            }
        }
    } 
    
}

 

getServerSideProps() 에러 핸들링을 위해 데이터 패칭을 하는데 오류가 났을 경우 아래 코드처럼 notFound : true를 리턴해주면 위 에러 페이지를 표시해준다.