Not found page in NextJs 13.4

Question

I have 2 questions. But, first, in my layout.tsx above {children} I also have a custom component <Navbar />. I created a 404 page but on that page I also have that navbar. Is there any way to remove that navbar on the not-found.tsx page? And another question, can I add custom classes to the body tag to each page, even 404?

I found a solution somewhere, but, from what I saw from there i need to add "use client" in layout.tsx.

Answer 1

Seems like this is currently an issue for NextJS 13's app directory as seen here.

You can place the pages you want with navbar in a separate folder, in this case (main) so it won't appear in the route, like so:

app
   (main)
     layout.tsx - has navbar
     page.tsx
   layout.tsx - no navbar
   not-found.tsx

---

To add custom classes to the body tag, you can place a useEffect and get the body like so:

export default function Page() {
  useEffect(() => {
    document.body.classList.add("custom-class");
  });

  return <div />;
}

And yes you'll have to add in use client for this as we're going to have to use useEffect