Problem with not-found.tsx file #11350

joriksp · 2025-02-22T17:57:53Z

joriksp
Feb 22, 2025

I have a website with the following file structure:

/app/
/(frontend)/
- layout.tsx
- page.tsx
/(payload)/
- - ... default payload files

When switching to a page in browser that doesn't exist instead of a not-found page, it displays an error:
The following tags are missing in the Root Layout: , .
Read more at https://nextjs.org/docs/messages/missing-root-layout-tags

Aman3899 · 2025-03-07T06:27:03Z

Aman3899
Mar 7, 2025

The error "The following tags are missing in the Root Layout: , ." usually happens when your not-found.tsx page isn't properly wrapped inside a <html> and <body> tag in your root layout.tsx. Here's how to fix it:

Steps to Fix:

1️⃣ Ensure Your Root `layout.tsx` Contains `<html>` and `<body>`

Your root layout.tsx must include these tags, otherwise, Next.js will throw this error. Update your /app/layout.tsx file like this:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

2️⃣ Ensure `not-found.tsx` Exists in the Right Place

Make sure your not-found.tsx is inside /app or relevant route segments:

/app/
  not-found.tsx
  layout.tsx
  page.tsx

or if it's for a specific route like /frontend, place it there:

/app/(frontend)/
  not-found.tsx
  layout.tsx
  page.tsx

3️⃣ Check Your `not-found.tsx` Implementation

Your not-found.tsx should be a simple functional component:

export default function NotFound() {
  return (
    <div>
      <h1>Page Not Found</h1>
      <p>Sorry, the page you’re looking for doesn’t exist.</p>
    </div>
  );
}

4️⃣ Manually Trigger `notFound()` When Needed

If you're using not-found.tsx, ensure your pages handle invalid routes correctly. You can force Next.js to trigger the 404 page inside a page using:

import { notFound } from "next/navigation";

export default function Page({ params }: { params: { slug: string } }) {
  if (!isValidSlug(params.slug)) {
    notFound(); // This will show not-found.tsx
  }

  return <div>Valid Page</div>;
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Problem with not-found.tsx file #11350

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Problem with not-found.tsx file #11350

Uh oh!

joriksp Feb 22, 2025

Replies: 1 comment

Uh oh!

Aman3899 Mar 7, 2025

Steps to Fix:

1️⃣ Ensure Your Root layout.tsx Contains <html> and <body>

2️⃣ Ensure not-found.tsx Exists in the Right Place

3️⃣ Check Your not-found.tsx Implementation

4️⃣ Manually Trigger notFound() When Needed

joriksp
Feb 22, 2025

Aman3899
Mar 7, 2025

1️⃣ Ensure Your Root `layout.tsx` Contains `<html>` and `<body>`

2️⃣ Ensure `not-found.tsx` Exists in the Right Place

3️⃣ Check Your `not-found.tsx` Implementation

4️⃣ Manually Trigger `notFound()` When Needed