Link not working in notFound component nextjs 13.4

I created a not-found.tsx component in my app directory in nextjs 13.4 which works fine when I enter wrong route as seen below:

import Link from 'next/link'

function NotFound() {
  
  return (
    <section>
      
      404, page not found
      <br/>
      <Link href="/">Back to HomePage</Link>

    </section>
  )
}

export default NotFound

But when I click the link to go back to the homepage, I still get the 404 page not found page.

I tried using the useRouter to navigate away but got the same problem. I notice the issue is as a result of not-found being in the app directory with the homepage

So how do I navigate from the not found page to the home page?

this was a bug in nextjs 13.4 and it has been fixed, just install the latest version of next npm install next@latest react@latest react-dom@latest. and everything should work fine.

In nextjs you have to create a file called 404.js or 404.tsx in the pages directory for 404 to works

like this :

this is the pages directory

inside it create a file called 404.js or 404.tsx

and inside 404.js write your code :

import Link from "next/link"

function PageNotFound(){
  return (
    <section>
      <h1>PAGE NOT FOUND </h1>
      <Link href="/"> BACK TO HOME PAGE</Link>
    </section>
 )
}

export default PageNotFound

I just tried it and it works fine a get me back to the home page

hope i helped