Error de parámetro no válido en NextJS

En lecciones anteriores, devolvíamos 404 error en el caso cuando no se encontraba la ruta para una URL dada. Sin embargo, en el caso de una ruta dinámica puede haber una situación en la que la ruta existe, pero el valor del parámetro es incorrecto.

Veamos un ejemplo. Supongamos que tenemos una ruta de la siguiente forma: /user/:id.

Supongamos que también tenemos un objeto con usuarios:

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

Supongamos que queremos mostrar el usuario por su id:

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

Obviamente, el id en la URL puede ser no cualquiera, sino solo uno de las claves de nuestro objeto. El intento de acceder a una dirección inexistente /user/6 debería llevar a que se genere un error. Arreglemos el código de nuestro componente y mostremos el texto de error:

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

Esto, sin embargo, no es suficiente. Después de todo, en este caso estamos accediendo a una página que no existe, lo que significa que debemos devolver el estado HTTP 404. Esto se hace usando una función especial notFound, integrada en NextJS.

Importemos esta función:

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

Y ahora la llamaremos en el caso cuando el valor del parámetro es incorrecto:

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

El código completo de nuestro componente se verá de la siguiente manera:

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