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).

max-schu · 2023-05-19T10:03:25Z

max-schu
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...

0 replies

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)
}

`

morganney · 2024-02-15T22:05:39Z

morganney
Feb 15, 2024

This is still not supported as far as I can tell on v14.1.0 . If you use multiple root layouts, good luck on a custom 404 page. Wasting time on a custom 404 page is madness.

0 replies

TommySorensen · 2024-03-04T12:17:30Z

TommySorensen
Mar 4, 2024

I'm pretty sure all you need to make notfound.js this work is layout.js file that returns children.
Take a look at the example from the next-intl package that followes the same workaround just with a [locale] folder.

// /app/layout.tsx
import {ReactNode} from 'react';

type Props = {
  children: ReactNode;
};

// Since we have a `not-found.tsx` page on the root, a layout file
// is required, even if it's just passing children through.
export default function RootLayout({children}: Props) {
  return children;
}

Check repo here https://github.com/amannn/next-intl/blob/main/examples/example-app-router-playground/src/app/layout.tsx

3 replies

goodallman Mar 23, 2024

This solution is good only if you don't need anything from the layout that is supposed to display the notFound message :/ If you need the layout to be shown, bad luck.

kbn4191 May 11, 2024

This worked for me

tomtitherington May 20, 2024

Worked for me too, thanks!

Just a heads up for anyone using this technique, make sure you import your Metadata and CSS imports into the root app/not-found.tsx/jsx file (or this new layout.tsx/js) as they will not be included otherwise. I made this mistake and was wondering why my TailwindCSS classes weren't working...

Diwanshumidha · 2024-04-13T16:33:52Z

Diwanshumidha
Apr 13, 2024

It Still Not Work for me in next@14.0.4 +1

0 replies

henokyehulu · 2024-04-29T09:09:51Z

henokyehulu
Apr 29, 2024

Same here 😭 NotWorking()

version -> 14.1.4

0 replies

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

Multiple root layouts and root not-found? #50034

App directory layouts

Workaround with dynamic catch-all route

Replies: 24 comments · 29 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: 24 comments 29 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