Reusing the built-in error page (next/error)

Advanced Features: Custom Error Page | Next.js

 

아래와 같이 서버 사이드 쪽에서 데이터 페칭에서 발생 가능한 에러를 try/catch로 잡아서 다른 props를 반환하려고 했으나 오류를 냅니다. 최상위 스코프에서 return해야 한다는 규칙을 가지고 있는 듯 합니다.

 

try/catch가 안 먹는다!

export async function getServerSideProps(context) {
  let { nickname } = context.query;

  axios.defaults.baseURL = "http://127.0.0.1:5000";
  const response = await axios.post("/userprofile/otherUser", { nickname });
  console.log(response.data.otherUserCritic);

  try {
    return {
      props: { post: response.data.otherUserCritic }
    };

  } catch (err) {
    return {
      props: { error: err }
    };
  }
}

 

아래와 같이 errorcode를 Error 컴포넌트에게 넘겨주면 알아서 Error 페이지를 렌더합니다.

// Next에서 제공하는 Error 페이지
import Error from "next/error";

function otherUserGallery({ post, errorCode }) {

  // errorCode가 있으면 Error 페이지를 렌더한다.
  if (errorCode) {
    return <Error statusCode={errorCode} />;
  }
  
  // 에러 코드가 없으면 정상적인 화면을 렌더한다.
  return (
    <div>{post && post.map((el) => <div key={el._id}>{el.title}</div>)}</div>
  );
}


export async function getServerSideProps(context) {
  let { nickname } = context.query;

  axios.defaults.baseURL = "http://127.0.0.1:5000";
  const response = await axios.post("/userprofile/otherUser", { nickname });
  const errorCode = response.status >= 500 ? response.status : false;

  return {
    props: { errorCode, post: response.data.otherUserCritic }, 
  };
}

export default otherUserGallery;

 

500 상대코드가 반환되었을 때는 다음과 같이 렌더합니다.

 

최근에 진행한 프로젝트에서는 다음과 같이 에러 핸들링을 했습니다.

뭔가 문제가 생기면 catch해서 return을 여러번해주지 말고 그냥 errCode를 지정해준 후 _error.js를 렌더하는 것이 나을 수도 있습니다.

import Error from "next/error";

function PostDetail({ Post, isCritic, errorCode }) {
  const router = useRouter();
  const userData = useSelector((state) => state.user);

  if (Post === undefined || Post === null) {
    return <Error statusCode={errorCode} />;
  }

  if (errorCode) {
    return <Error statusCode={errorCode} />;
  }
  
  
  return (
    생략
  )
}

export async function getServerSideProps(context) {
  let { id } = context.query;
  let isCritic = false;

  axios.defaults.baseURL = "http://127.0.0.1:5000";
  const response = await axios.post("/api/post/view", { id });
  let errorCode = response.ok ? false : response.statusCode;
  const post = response.data.post;

  if (post === null) errorCode = 404;

  if (post?.section === "critic") {
    isCritic = true;
  }

  return {
    props: { Post: post, isCritic, errorCode },
  };
}

export default PostDetail;