Not found page UI 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.

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

• Array map to new type in TypeScript
• Create a dark mode theme switch in Nextjs 13
• Not found page UI in Nextjs 13
• Implementing a loading UI in Nextjs 13
• How to fetch data in Nextjs 13 appDir
• How to use Turbopack build tool in Nextjs project
• Super expression error in Next 13
• Try Next 13 experimental App feature
• Integrate contentful CMS in Nextjs
• How to build a blog using Tailwind + Graphql + Nextjs