Pages and screens

Error and empty pages

Five screens for the states nobody designs until they happen. They are already drawn, and the words are the part you change.

The five

RouteFor
/error-404The address does not exist. Offer a way back, not an apology
/error-500It broke on our side. Say so plainly and give a next step
/successSomething completed. Confirm exactly what, then move on
/coming-soonA feature that is planned. Honest about not existing yet
/maintenanceDeliberately down. Say when it is back, if you know

/blank is the sixth and it is not an error page: it is the empty page frame, for starting a new screen with the shell already correct.

Wire the 404 up

Next serves app/not-found.tsx for an unmatched route. The download has one; the /error-404 route exists so you can look at it without breaking your own navigation.

What these screens should say

  • What happened, in the reader's terms rather than the system's. “That page does not exist”, not “404 NOT_FOUND”.
  • Whether it is their fault. Usually it is not. Do not imply otherwise.
  • One way out. A link somewhere useful, not a dead end with a graphic.
  • Nothing to apologise about twice. One sentence of regret is plenty.

An empty state is not an error

A table with no rows yet is a different screen from a table that failed to load, and the two must never look the same. RecordView draws its own empty state, and empty is where you say what would put something there.