Erro de Parâmetro Inválido no NextJS

Nas lições anteriores, retornamos 404 erro no caso em que a rota para a URL fornecida não foi encontrada. No entanto, no caso de uma rota dinâmica, pode surgir uma situação em que a rota existe, mas o valor do parâmetro está incorreto.

Vamos ver um exemplo. Suponha que temos uma rota com a seguinte aparência: /user/:id.

Suponha também que temos um objeto com usuários:

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

Suponha que queremos exibir o usuário pelo seu ID:

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

Obviamente, o ID na URL não pode ser qualquer um, mas apenas uma das chaves do nosso objeto. A tentativa de acessar um endereço inexistente /user/6 deve resultar na exibição de um erro. Vamos corrigir o código do nosso componente e exibir um texto de erro:

app/user/[id]/page.jsxexport default function User({ params }) {
  if (users[params.id]) {
    return <p>
      { users[params.id] }
    </p>;
  } else {
    return <p>
      usuário não encontrado
    </p>;
  }
}

No entanto, isso não é suficiente. Pois, neste caso, estamos acessando uma página inexistente, e, portanto, devemos retornar o status HTTP 404. Isso é feito usando uma função especial notFound, integrada ao NextJS.

Vamos importar esta função:

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

E agora vamos chamá-la no caso em que o valor do parâmetro é inválido:

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

O código completo do nosso componente terá a seguinte aparência:

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