404 route in Nextjs 13

Nextjs 13 comes with lots of experimental features, one of them was the appDir. Let's talk about the setup a not found page.

Not found Route

Suppose we want to show not found page for the non-existing route. Nextjs allow you to define a custom Not Found page in app directory.

Create a not-found.jsx/tsx file in the route path and export a component with some cool UI and that's it.

Each time a wrong path is navigated, the page will show up.

//posts/loading.jsx
export default  function Loading() {
 
  return(
<div>
Data is loading 
</div>
  )
}