NextJS에서 잘못된 매개변수 오류

이전 강의들에서는 해당 URL에 대한 라우트를 찾을 수 없을 때 404 오류를 반환했습니다. 그러나 동적 라우트의 경우, 라우트는 존재하지만 매개변수 값이 올바르지 않은 상황이 발생할 수 있습니다.

예를 들어 살펴보겠습니다. 다음과 같은 형태의 라우트가 있다고 가정해 봅시다: /user/:id.

또한 다음과 같은 사용자 객체가 있다고 가정해 봅시다:

app/user/[id]/page.jsxlet users = {
  1: 'user1',
  2: 'user2',
  3: 'user3',
  4: 'user4',
  5: 'user5',
};

사용자 ID로 사용자를 표시하고 싶다고 가정해 봅시다:

app/user/[id]/page.jsxexport default function User({ params }) {
  return <p>
    { users[params.id] }
  </p>;
}

분명히 URL의 ID는 임의의 값이 될 수 없고, 우리 객체의 키 중 하나여야만 합니다. 존재하지 않는 주소인 /user/6에 접근하려고 시도하면 오류가 발생해야 합니다. 컴포넌트 코드를 수정하고 오류 메시지를 출력해 봅시다:

app/user/[id]/page.jsxexport default function User({ params }) {
  if (users[params.id]) {
    return <p>
      { users[params.id] }
    </p>;
  } else {
    return <p>
      user not found
    </p>;
  }
}

그러나 이것만으로는 충분하지 않습니다. 이 경우 우리는 존재하지 않는 페이지에 접근하는 것이므로, HTTP 상태 404를 반환해야 합니다. 이는 NextJS에 내장된 특별한 함수 notFound를 사용하여 수행됩니다.

이 함수를 import 해 보겠습니다:

app/user/[id]/page.jsximport { notFound } from 'next/navigation';

이제 매개변수 값이 올바르지 않을 때 이 함수를 호출하도록 하겠습니다:

app/user/[id]/page.jsxexport default function User({ params }) {
  if (users[params.id]) {
    return <p>
      { users[params.id] }
    </p>;
  } else {
    return notFound();
  }
}

컴포넌트의 전체 코드는 다음과 같이 될 것입니다:

app/user/[id]/page.jsximport { notFound } from 'next/navigation';

let users = {
  1: 'user1',
  2: 'user2',
  3: 'user3',
  4: 'user4',
  5: 'user5',
};

export default function User({ params }) {
  if (users[params.id]) {
    return <p>
      { users[params.id] }
    </p>;
  } else {
    return notFound();
  }
}