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を使用して行います。

この関数をインポートしましょう:

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