The not-found file is used to render UI when the notFound function is thrown within a route segment.
not-found.js components do not accept any props.
By default, not-found is a Server Component. You can mark it as async to fetch and display data
Invoking the notFound() function throws a NEXT_NOT_FOUND error and terminates rendering of the route segment in which it was thrown.
If you need to use Client Component hooks like usePathname to display content based on the path, you must fetch data on the client-side instead.