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

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

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

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

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

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

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

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

export 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 해 보겠습니다:

import { notFound } from 'next/navigation';

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

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

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

import { 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();
	}
}

여러분의 컴포넌트에서 설명된 문제를 해결하십시오.