NextJ 학습 - 11일차

오늘 저는 NextJ가 Http 오류를 처리하는 방법에 대해 이야기하고 싶습니다. 오류 페이지의 디자인뿐만 아니라 클라이언트에 전송되는 실제 상태 코드를 사용자 지정하는 방법입니다.

두 개의 페이지가 있는 간단한 애플리케이션이 있다고 가정해 보겠습니다. 하나는 사용자 목록용이고 다른 하나는 각 사용자의 세부 정보 페이지를 보기 위한 것입니다.
즉, 앱에 유효한 URL이 두 개 있습니다.

/ # root url that show a list of users
/users/[id] # dynamic url that will show the detail of one user

페이지 중 하나의 코드를 빠르게 살펴보겠습니다.

// pages/index.js

import Link from "next/link";

const users = [
  {
    id: 1,
    name: "Eduardo",
    age: 20
  },
  {
    id: 2,
    name: "Cinthya",
    age: 30
  }
];

function Home() {
  return (
    <ul>
      {users.map(user => {
        return (
          <li key={user.id}>
            <Link href={`/users/${user.id}`}>
              <a>{user.name}</a>
            </Link>
          </li>
        );
      })}
    </ul>
  );
}

export default Home;

이상한 점은 없습니다. 사용자 배열을 반복하여 페이지에 표시하면 됩니다.
이제 각 사용자의 모든 정보를 표시할 수 있는 세부 정보 페이지를 만들어 보겠습니다.

// pages/users/[id].js
const users = [
  {
    id: 1,
    name: "Eduardo",
    age: 20
  },
  {
    id: 2,
    name: "Cinthya",
    age: 30
  }
];

function Details({ user }) {
  return (
    <div>
      <h1>Name: {user.name}</h1>
      <p>Age: {user.age}</p>
      <p>Id: {user.id}</p>
    </div>
  );
}

function getInitialProps({ query, res }) {
  const { id } = query;
  const user = users.find(u => u.id == id);
  return {
    user: user || {}
  };
}

Details.getInitialProps = getInitialProps;

export default Details;

사용자 배열을 반복하는 것이 이상적이지 않다는 것을 알고 있지만 이 게시물의 목표는 NextJs 오류 페이지이므로 괜찮은 척합시다. 이 페이지는 URL에서 사용자의 ID를 가져온 다음 해당 사용자가 사용자 배열에 있는지 검색합니다. 그런 다음 NextJ가 값을 세부 정보 구성 요소에 소품으로 전달할 수 있도록 결과를 반환합니다.

브라우저에 다른 URL을 입력하면 앱에는 두 개의 경로만 있기 때문에 NextJs는 기본 오류 페이지를 표시합니다. 브라우저에 다음 URL을 입력하자

/i-love-tacos

NextJs는 다음 페이지를 보여줄 것입니다.



그리고 개발자 도구를 열면 해당 응답의 상태 코드가 404 Not Found임을 알 수 있습니다.



그러나 URL을 입력하면 어떨까요?

/users/3

이는 동적 페이지인 pages/users/[id].js와 일치하지만 사용자 배열에는 ID가 3인 사용자가 없으므로 이 페이지의 현재 기능에 따라 빈 개체를 페이지에 대한 소품으로 반환해야 합니다. .



정보가 불완전한 이상한 페이지를 표시하는 대신 이를 변경하고 NextJs의 기본 404 페이지를 표시하겠습니다.

// pages/users/[id].js
function getInitialProps({ query }) {
  const { id } = query;
  const user = users.find(u => u.id == id);
  return {
    user: user || {},
    statusCode: user ? 200 : 404
  };
}

먼저 새 statusCode 변수를 결과 개체에 추가합니다. 이 변수의 값은 사용자 배열에서 사용자를 찾았는지 여부에 따라 달라집니다. 사용자가 존재하면 statusCode는 200이고 그렇지 않으면 404입니다.

그러나 NextJ는 기본 오류 페이지를 표시하고 싶다는 것을 어떻게 알 수 있습니까? 매우 쉽습니다. 기본 오류 구성 요소를 반환해야 합니다.

// pages/users/[id].js
import Error from "next/error";

function Details({ user, statusCode }) {
  if (statusCode === 404) {
    // This line will show the default Error Page
    return <Error statusCode={statusCode} />;
  }

  return (
    <div>
      <h1>Name: {user.name}</h1>
      <p>Age: {user.age}</p>
      <p>Id: {user.id}</p>
    </div>
  );
}

아주 쉽죠? 이제 존재하지 않는 사용자가 요청될 때 오류 페이지를 볼 수 있습니다. 그리고 개발자 도구를 열면
200 상태 코드가 반환되는 것을 볼 수 있습니다.
하지만 오류 페이지를 보내고 있습니다! 상태 코드가 여전히 200인 이유는 무엇입니까?



NextJs가 제공하는 응답은 Error 구성 요소의 책임이 아닙니다. 다른 상태 코드를 표시하려면 응답에서도 설정해야 합니다. 그걸하자.

// pages/users/[id].js
function getInitialProps({ query, res }) {
  const { id } = query;
  const user = users.find(u => u.id == id);
  // The find method return undefined if the condition
  // does not match
  if (!user) {
    // here you can assume user is undefined that means
    // it is an nonexistent user so change the status code
    // of the response.
    res.statusCode = 404;
  }
  return {
    user: user || {},
    statusCode: user ? 200 : 404;
  };
}

페이지를 다시 테스트하면 오류 페이지와 올바른 상태 코드도 표시됩니다!

사용자 지정 오류 페이지

기본 오류 페이지가 마음에 들지 않으면 어떻게 합니까? 글쎄, 당신은 그것을 교체 할 수 있습니다!
먼저 그렇게 하려면 페이지 폴더에 _error.js라는 새 파일이 필요합니다.

// pages/_error.js

function CustomError({ statusCode }) {
  return (
    <figure>
      <img
        alt="Showing a properly cat according the status code"
        width="100%"
        src={`https://http.cat/${statusCode}`}
      />
      <figcaption>
        <h1>{statusCode}</h1>
      </figcaption>
    </figure>
  );
}

function getInitialProps({ res, err }) {
  let statusCode;
  // If the res variable is defined it means nextjs
  // is in server side
  if (res) {
    statusCode = res.statusCode;
  } else if (err) {
    // if there is any error in the app it should
    // return the status code from here
    statusCode = err.statusCode;
  } else {
    // Something really bad/weird happen and status code
    // cannot be determined.
    statusCode = null;
  }
  return { statusCode };
}

CustomError.getInitialProps = getInitialProps;

export default CustomError;

이제 세부 정보 페이지에서 오류 구성 요소를 새 구성 요소로 교체해야 합니다.

// pages/users/[id].js
import Error from "./_error.js";

그리고 다시 시도하면 사랑스러운 고양이가 당신에게 말하는 것을 보게 될 것입니다.
404 오류 페이지가 나타납니다.



여기에서 전체 코드를 사용해 보십시오.
https://github.com/eperedo/learning-nextjs/tree/nextjs-day-11-error

배운 것들!

이제 기본 오류 페이지를 표시하는 방법과 시기를 제어할 수 있습니다

.

표시 중인 현재 오류와 동일한 상태를 유지하도록 응답의 상태 코드를 수정할 수 있습니다.

오류 페이지의 측면을 사용자 정의할 수 있습니다

.