CODEWITHSUNDEEP
reactjsnext.jsnext.js13custom-error-pages
bami
bami

Reputation: 299

Why custom 404 page doesn't work in Next.js 13?

In next 13, I'm trying to use custom 404 page, using this method: https://nextjs.org/docs/app/api-reference/file-conventions/not-found. But when I write unmatched URL I see the empty page!

This is my custom 404 page:

"use client"
import React,{useEffect} from 'react'


 const NotFound = () => {
  useEffect(()=>{
    console.log("not found")
  },[])
  return (
    <>
<div>not found</div>
    </>
  )
}
export default NotFound

And this is my folder structure:

structure

And this is the layout for not-found (layout.tsx):


  return (
    <>
    
      <main className="px-10 py-5 ">
    
        {children}
       
     </main>
    
    </>
  )

I can see console.log("not found") result In my browser, but I can't see the <div>Not found</div> in my browser (It also doesn't show in inspector).

Upvotes: 0

Views: 869

Answers (1)

bami
bami

Reputation: 299

It turns out the problem was I had forgotten add html and body tag to the layout for not-found(I added the wrong layout to updated question). In my layout.tsx I added html and body tag and it works. This is my new layout.tsx:


  return (
    <>
     <html lang="en" className="h-full w-full" >
      <body className="h-full w-full">
      <main className="px-10 py-5 ">
    
        {children}
       
     </main>
        </body>
     </html>
    </>
  )

Upvotes: 1

Related Questions