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

あなたのコンポーネントで説明された問題を解決してください。