Multiple root layouts and root `not-found`? #50034

victorandree · 2023-05-19T08:27:48Z

victorandree
May 19, 2023

Note

As of May 2024, @victorandree (the author) hasn't been testing this issue or listed workarounds for newer versions of Next.js in a while. Please refer to the replies for up-to-date information.

Multiple root layouts are a highlighted feature of the "Route Groups" page in the Next.js documentation. On the other hand, a "root app/not-found.js" file is required to handle "global" 404 errors. This global not-found.js requires a single root layout.

How can we then support a global 404 page while using route groups to create multiple root layouts? I don't think we can.

Feature request: Unlike app/global-error.js, which handles "global errors", the app/not-found.js requires a root layout. IMO, there should be a app/global-not-found.js that works in a similar way. Or, to avoid another file convention, a way to handle notFound errors in a normal error handler.
Workaround: There's 2 possible workarounds:
- Dynamic catch-all route: Create a (app1)/[...not-found]/page.tsx page that calls notFound(). This will trigger the the closest not-found.tsx to render. Thanks @ginifizz!
- Original: As a (hopefully temporary) workaround, I'm keeping my global not found in pages/404.js for now.

App directory layouts

Basic setup where you have a public website and admin section, where the admin section uses a different root layout (maybe to skip on analytics, use an enterprise CSS framework):

app
├── (app1)
│   ├── layout.tsx
│   └── page.tsx
└── (admin)
    └── admin
        ├── layout.tsx
        └── page.tsx

Adding app/not-found.tsx to the root directory does not work. It'll crash with this message:

app/not-found.tsx
not-found.tsx doesn't have a root layout. To fix this error, make sure every page has a root layout.
Adding an app/layout.tsx will break things in strange ways.
Adding not-found.tsx to the route groups (e.g. (admin)/not-found.tsx) will simply not work. The pages aren't found.

Workaround with dynamic catch-all route

Warning

This workaround is broken in 13.4.10 through 13.4.13. It works in newer versions of Next.js. The (app1)/not-found.tsx page will render without any root layout (i.e. with an "empty" root layout).

You can add a dynamic catch-all route to catch all and in this route you can call notFound. This triggers the closest not-found.tsx.

app
├── (app1)
│   ├── [...not-found]
│   │   └── page.tsx
│   ├── layout.tsx
│   ├── not-found.tsx
│   └── page.tsx
└── (app2)
    ├── admin
    │   └── page.tsx
    └── layout.tsx

In (app1)/[...not-found]/page.tsx:

import { notFound } from 'next/navigation';

export default function NotFoundDummy() {
  notFound();
}

(You want to actually call notFound() here and not just render a 404, in order for the 404 status to be set correctly).

maxschulmeister · 2023-05-19T10:03:25Z

maxschulmeister
May 19, 2023

lol I am trying to solve this exact problem currently. +1 for this

0 replies

silkquasar · 2023-05-31T17:30:37Z

silkquasar
May 31, 2023

In the root of your app with the not-found.tsx use global-error.tsx instead of layout.tsx. The global-error.tsx uses html and body tags just as layout.tsx. This should allow use of non-found.tsx in the root directory without a layout.tsx.

1 reply

silkquasar May 31, 2023

In the root of your app with the not-found.tsx use global-error.tsx instead of layout.tsx. The global-error.tsx uses html and body tags just as layout.tsx. This should allow use of non-found.tsx in the root directory without a layout.tsx.

Sorry. I decided to test. The error is removed in development. However, the problem returns when trying to build a app.

Daniel4lm · 2023-06-09T12:20:44Z

Daniel4lm
Jun 9, 2023

This is still an issue in Next.js 13.4.4. I hope they will find some better solution for this.

4 replies

ilyahorski Jun 9, 2023

Hi, try adding a layout.tsx file in the directory to your not-found.tsx file. It's work for me.
layout.tsx

import { ReactNode } from 'react';

interface ErrorProps {
  children: ReactNode;
}

export default function GlobalError({ children }: ErrorProps) {
  return (
    <html>
    <body>
    {children}
    </body>
    </html>
  );
}

Daniel4lm Jun 11, 2023

Doesn't work. I have under each router group (under (something) - ...) layout.tsx, page.tsx and not-found.tsx which works in case of layout but not-found.tsx simply doesn't. It only renders typical next.js 404 page

DevQiao Jul 11, 2023

I'm suffering the same problem, where is the issue? I didn't find it, any link?
my current version of Next.js is 13.4.9, but it seems not be solved yet, sadly

PeterdQuinn Aug 10, 2023

this annoying

jessicarush · 2023-06-13T22:19:21Z

jessicarush
Jun 13, 2023

In addition to not-found.js files not working with route groups for multiple root layouts, I have also found that they do not work for the internationalization setup described in the docs which uses dynamic routing.

With this setup, not-found.js will not work:

app
  ├─[lang]
  │  ├─about
  │  ├─layout.js
  │  ├─not-found.js
  │  └─page.js
  ├─favicon.ico
  └─globals.css

Edit: Can confirm the workaround to use a dynamic catch-all route also works with the internationalization example:

app
 ├─[lang]
 │  ├─[...not-found]
 │  │  └─page.js
 │  ├─about
 │  ├─layout.js
 │  ├─not-found.js
 │  └─page.js
 ├─favicon.ico
 └─globals.css

1 reply

rocerchen Jul 3, 2023

if use middleware
and change middleware.js code to "NextResponse.rewrite" that http://localhost:3000/ will show default local content

// e.g. incoming request is /products
// return /en-US/products html
return NextResponse.rewrite(
new URL(
/${locale}${pathname.startsWith("/") ? "" : "/"}${pathname},
request.url
)
);

app
├─[lang]
│ ├─[...not-found]
│ │ └─page.js

import { notFound } from 'next/navigation';
export default function NotFoundDummy() {
notFound();
}`

show notFound() is NEXT_NOT_FOUND error

ginifizz · 2023-06-14T09:18:03Z

ginifizz
Jun 14, 2023

I juste managed to get my not-found route working in a group layout using the trick mentioned here:
https://stackoverflow.com/a/75625136
and using a "dynamic catch all route" at the root of my group layout which just calls "notFound()" when a page doesn't match any route. It's ugly, but it works for now.

2 replies

victorandree Jun 14, 2023
Author

Interesting approach. I tried it out and it works if I do this:

app
├── (app1)
│   ├── [...not-found]
│   │   └── page.tsx
│   ├── layout.tsx
│   ├── not-found.tsx
│   └── page.tsx
└── (app2)
    └── admin
        ├── layout.tsx
        └── page.tsx

In app/(app1)/[...not-found]/page.tsx, I do this:

import { notFound } from 'next/navigation';

export default function NotFoundDummy() {
  notFound();
}

This seems to work: The catch-all route raises notFound, which is then caught by the app/(app1)/not-found.tsx. I'll update the original issue with this as a workaround.

Daniel4lm Jun 14, 2023

Of course, I tried [...not-found] in the application router (outside of grouped routes) and it works, but that seems like some sort of workaround. Also if you create layout.tsx(only barebone with jtml and body) and not-found.tsx in the app router(also outside of grouped routes) it will render 404 page

surjithctly · 2023-06-14T09:31:33Z

surjithctly
Jun 14, 2023

I confirm this does not work and created a Stackblitz Reproduction

1 reply

markudevelop Jul 16, 2023

same with dynamic locale param

Daniel4lm · 2023-07-29T19:15:58Z

Daniel4lm
Jul 29, 2023

Well, most of this functionality related to not-found.tsx modules is now broken in canary version 13.4.10. Only root not-found.tsx without CSS styles is rendered. I was on ver. 13.4.12 and reverted back to 13.4.9 until this issue is resolved.

8 replies

victorandree Aug 11, 2023
Author

Related issue: #53694. The issue references this discussion, but it seems like discussions don't automatically get a reference back to the issue. The issue has an open PR, so hopefully this can be resolved soon (I still consider needing [...not-found]/page.tsx a hack, though).

Daniel4lm Aug 11, 2023

Related issue: #53694. The issue references this discussion, but it seems like discussions don't automatically get a reference back to the issue. The issue has an open PR, so hopefully this can be resolved soon (I still consider needing [...not-found]/page.tsx a hack, though).

Sure, but it seems the [...not-found] hack doesnt work either correctly in latest versions. Ver. 13.4.9 works fine.

victorandree Aug 11, 2023
Author

@Daniel4lm Since #53694 is not resolved, I would not expect this to work on next@latest or next@canary, yet. I think once it is resolved (i.e. merged and released), the workaround will work again.

victorandree Aug 14, 2023
Author

v13.4.14-canary.3 fixes #53694 via #53703. I've tested my reproduction with next@canary, and the workaround works for me, again.

Daniel4lm Aug 14, 2023

@victorandree Nice man. I saw that PR also but wasn't sure. I think v13.4.14 should be out very soon so we can surely jump to new ver.

Daniel4lm · 2023-08-16T15:27:37Z

Daniel4lm
Aug 16, 2023

I can confirm that not-found rendering inside route groups works again in v.13.4.16.

0 replies

J4v4Scr1pt · 2023-08-17T11:04:21Z

J4v4Scr1pt
Aug 17, 2023

I'm on Version 13.4.16, still not working for me.. 😑
If I go to /NoRoute I get the standard 404 page not mine.

4 replies

victorandree Aug 17, 2023
Author

You still need to have a "catch-all" route to capture and raise the not found (e.g. app/(main-app)/[[...not-found]]/page.tsx). There is otherwise no way for Next.js to know "which" not-found.tsx file to use. See the original post in this discussion.

J4v4Scr1pt Aug 17, 2023

Ahh ok I see, Tack! 😁

J4v4Scr1pt Aug 17, 2023

And that did the trick 🥳!

But will this always be the trick or is this a temp solution? 🤔

Daniel4lm Aug 18, 2023

I believe it's because you have two separated route groups(with its own layouts and not-found pages respectively) and there is no other root layout besides them. If you navigate to any wrong path like /Overview/none or /TestRoute/abc you should get your not-found page from (main-app) but something like /NoRoute is out of the scope(don't match any of your groups). Thats's why it renders Next.js default 404 page. With catch-all you bypass this problem.

vignesh-gupta · 2023-08-26T17:28:42Z

vignesh-gupta
Aug 26, 2023

@victorandree any updates? is it solved?

1 reply

victorandree Aug 29, 2023
Author

No, I don't have any updates (FYI: I'm not associated with Next.js). I don't know if this will be "solved" or how it would be solved. The workaround listed in the original post does work, even if it feels like a hack (and is not documented as being supported).

vignesh-gupta · 2023-08-26T17:35:26Z

vignesh-gupta
Aug 26, 2023

I think the best guys for this would be @icyJoseph . Could you please drop some advice?

1 reply

vignesh-gupta Aug 26, 2023

I've create a similar discussion #54603

LouisJackson · 2023-09-06T11:33:38Z

LouisJackson
Sep 6, 2023

Tried to apply the dynamic catch-all technique, it works great on localhost, but not on Vercel. I get a 500 error on Vercel.

Error: Cannot find module '/var/task/nextjs/.next/server/app/(global)/page.js'

Any ideas?

1 reply

vignesh-gupta Sep 11, 2023

If you put not-found outside (global). It should work

bwmirek · 2023-12-27T08:55:53Z

bwmirek
Dec 27, 2023

Tried to put not-found.tsx in different route group to force using specific layout.tsx, not working in Next.js 14.0.4.

0 replies

J4v4Scr1pt · 2024-01-04T13:18:34Z

J4v4Scr1pt
Jan 4, 2024

When using the solution with a catch-all-route for notFound. Parallel routing with only a layout file breaks and tries to render the catch-all-route. Workaround is to add page.tsx that returns null...

There is a lot of workarounds with Nextjs.. hope this do not become a pattern...

1 reply

sungjun-finda Sep 11, 2024

I also has this problem too...

cini9 · 2024-02-13T07:56:05Z

cini9
Feb 13, 2024

I'm working with Next v14.0.2 and this still seems to be an issue. I've tried the catch-all technique with my internationlized app as shown below and it works as long as the URL takes into account the "lng". For example

localhost/fr/abc routes to my not-found page ✅
localhost/abc does not route to my not-found page ❌

If I put the catch-all route outside of [lng] folder, neither of them works.

Is there another workaround that I'm missing to get this to work ?

2 replies

NicolasHov Mar 1, 2024

Spent the day trying to figure it out also... 😭

jeltehomminga May 22, 2024

you need to have logic in your middleware that every path without a locale should redirect to locale found on header, cookie or otherwise default locale. Then localhost/abc should redirect to localhost/fr/abc and it will work

check the docs for the i18n solution you're using
for me it looks like this in middleware.ts

` let lng
if (req.cookies.has(cookieName)) lng = acceptLanguage.get(req.cookies.get(cookieName)?.value)
if (!lng) lng = acceptLanguage.get(req.headers.get('Accept-Language'))
if (!lng) lng = fallbackLng

const localePath = /${lng}
const pathnameHasLocale = languages.some((loc) => req.nextUrl.pathname.startsWith(/${loc}))
if (pathnameHasLocale) return
if (!(req.nextUrl.pathname === localePath || pathnameHasLocale)) {
const redirectUrl = ${req.nextUrl.origin}${req.nextUrl.basePath}${localePath}${req.nextUrl.pathname}
// Redirect to the expected path if it's not the current path
return NextResponse.redirect(redirectUrl)
}

`

shunshimono · 2024-05-01T08:34:47Z

shunshimono
May 1, 2024

Next.js 14.2.3 has the same problem. Moreover, using 'import { notFound } from 'next/navigation'' does not return a 404 HTTP status code. This is truly critical.

0 replies

YYGod0120 · 2024-05-15T12:50:24Z

YYGod0120
May 15, 2024

This issue still exists, I am using v14.0.2. The app/[lan]/not-found.tsx still doesn't work. However, the catch-all method can achieve the same effect, but I still hope to get this resolved. 😔

0 replies

jeltehomminga · 2024-05-22T09:17:36Z

jeltehomminga
May 22, 2024

Same issue for me, unbelievable it is so hard to be able to show a custom 404 page if you have i18n in your app

0 replies

jpmelnik · 2024-05-27T22:32:39Z

jpmelnik
May 27, 2024

SImilar issue for me, I can't add a custom layout in [...not-found].

0 replies

taheramr · 2024-05-30T13:53:59Z

taheramr
May 30, 2024

any updates on this?

0 replies

Oliver-Turp · 2024-06-15T19:55:42Z

Oliver-Turp
Jun 15, 2024

Having this same issue myself on v14.2.4

0 replies

Diwanshumidha · 2024-06-16T08:12:11Z

Diwanshumidha
Jun 16, 2024

any updates ???

1 reply

nextjsdude Jun 17, 2024

look at my solution that worked in my case: -9795255

nextjsdude · 2024-06-17T14:08:57Z

nextjsdude
Jun 17, 2024

i faced this issue for about one month. But finally fixed. This equally caused hydration errors in my NextJS app. here's what i did:

i added the root layout.tsx to the root of my app. i know the Next docs says it should be removed, but i added it anyways.
Only one layout.tsx ( the parent/root layout.tsx ) can have the html and body elements, so i Configure the different layouts, to fit that. Thats it.

0 replies

spacecat · 2024-07-14T14:30:57Z

spacecat
Jul 14, 2024

I will not implement this now because none of the work-arounds seem reliable IMO, instead add this to the backlog. But to my future self:

Read everything after this comment.
Check if there is a better work-around.
Check if there is an official fix.
Check if this issue has been closed and merged; if so update next.js NPM package and implement this in your app.

1 reply

morganney Sep 10, 2024

Consider another framework.

CarlosVergikosk · 2024-08-22T09:17:28Z

CarlosVergikosk
Aug 22, 2024

bump?

0 replies

CiobanuMarius9 · 2024-09-10T12:05:40Z

CiobanuMarius9
Sep 10, 2024

I am trying for months to find a good fix for this.

The main problem for me is this [...not-found]/page.js, SEO wise all the invalid routes return a 200 because the not-found catch all route is a valid route, this causes Soft 404 errors on google search console.

Removing the catch all route will result in only redirecting to not-found.js when calling notFound() which won't cover all the cases so it will default to the black next js 404 page.

Did someone find a solution to use this workaround and also change the status code to 404 ?

import { notFound } from 'next/navigation';

export const metadata = {
robots: {
index: false,
follow: false,
},
};

export default function NotFoundDummy() {
notFound();
}

0 replies

bryce-by · 2024-09-11T13:55:50Z

bryce-by
Sep 11, 2024

The proposed workaround does not work if your application requires a catch-all at the root. These will conflict.

Error: You cannot use different slug names for the same dynamic path

app
├── (app1)
│   ├── [...slug]
│   ├── [...not-found]
│   │   └── page.tsx
│   ├── layout.tsx
│   ├── not-found.tsx
│   └── page.tsx
└── (app2)
    ├── admin
    │   └── page.tsx
    └── layout.tsx

An optional catch all will also result in an error:

Error: You cannot use both an required and optional catch-all route at the same level

app
├── (app1)
│   ├── [[...slug]]
│   ├── [...not-found]
│   │   └── page.tsx
│   ├── layout.tsx
│   ├── not-found.tsx
│   └── page.tsx
└── (app2)
    ├── admin
    │   └── page.tsx
    └── layout.tsx

0 replies

AudereSemper · 2024-09-29T09:12:59Z

AudereSemper
Sep 29, 2024

bump, i've the same problem too.

0 replies

fxckdead · 2024-11-03T21:36:43Z

fxckdead
Nov 3, 2024

bump, this still happens on next 15.0.2 💡

0 replies

jjdev97 · 2024-11-13T11:54:12Z

jjdev97
Nov 13, 2024

Hi everyone,

I'm working with Next.js 15.0.3 and wanted to share a potential solution to the issue regarding not-found.tsx and group-specific layouts.

As I’m not a professional, please consider this a conceptual approach and use it with caution. Feedback is welcome!

My App Structure:

app
├── (main)
│   ├── [...not-found]
│   │   └── page.tsx
│   ├── layout.tsx
│   ├── not-found.tsx
│   └── page.tsx
└── (studio)
│   └── page.tsx
└── layout.tsx

Steps to Implement:

1. Create a Custom Catch-All Route for Each Group
Add a catch-all route in the (main) group to trigger notFound().

// src/app/(main)/[...not-found]/page.tsx
import { notFound } from "next/navigation";

export default function CatchAll() {
  notFound(); // Triggers Next.js to send a 404 status, important for SEO
}

2. Add not-found.tsx in Each Group
Define a not-found.tsx file for group-specific 404 pages.

// src/app/(main)/not-found.tsx
export default function MainNotFound() {
  return (
    <div>
      <h1>404 - Main Area</h1>
      <p>The page you’re looking for does not exist.</p>
    </div>
  );
}

Why This Works:

The notFound() function ensures that unmatched routes return a proper 404 HTTP status, which is essential for SEO.
Adding not-found.tsx in each group allows for group-specific error handling and layouts.
Works seamlessly in both development and production (tested on Vercel).

I hope this helps others! As mentioned earlier, please use this code with caution, and feel free to share any improvements or feedback.

0 replies

Multiple root layouts and root not-found? #50034

App directory layouts

Workaround with dynamic catch-all route

Replies: 34 comments · 33 replies

victorandree Jun 14, 2023 Author

victorandree Aug 11, 2023 Author

victorandree Aug 11, 2023 Author

victorandree Aug 14, 2023 Author

victorandree Aug 17, 2023 Author

victorandree Aug 29, 2023 Author

Multiple root layouts and root `not-found`? #50034

Replies: 34 comments 33 replies

victorandree Jun 14, 2023
Author

victorandree Aug 11, 2023
Author

victorandree Aug 11, 2023
Author

victorandree Aug 14, 2023
Author

victorandree Aug 17, 2023
Author

victorandree Aug 29, 2023
Author