Global not-found not available in multiple root layouts #55191

devjiwonchoi · 2023-09-10T06:32:45Z

Link to the code that reproduces this issue or a replay of the bug

https://github.com/devjiwonchoi/multi-root-layout-not-found

To Reproduce

CodeSandBox Repro Link

Go to the repro link
Go to /404

Current vs. Expected behavior

Current

The multi-root layout group routes cannot have a global not-found since they don't have app/layout.

src/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.

I'm trying to clarify how to handle the unmatched URLs if global not-found is not allowed in group routes with multi-root layouts.

Expected

IMO the expected behavior for /404 is displaying the not-found inside the group which has app/(group)/page.tsx.

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
Binaries:
  Node: 16.17.0
  npm: 8.15.0
  Yarn: 1.22.19
  pnpm: 7.1.0
Relevant Packages:
  next: 13.4.20-canary.23
  eslint-config-next: 13.4.20-canary.23
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

This issue extends #54980

The text was updated successfully, but these errors were encountered:

shriekdj · 2023-09-13T17:59:32Z

This is the Solution We Just Need to Restructure Our Code.
Before Restructuring My NextJS Code Look Like this.

src/
    app/
        [...not_found]/page.tsx
        about/page.tsx
        contact/page.tsx
        layout.tsx
        not-found.tsx
   components/
   utils/

After Restructuring The Folders and Files Look Like this.

src/
    app/
       (default_site)/
            about/page.tsx
            contact/page.tsx
            layout.tsx
       (error_layout)/
            [...not_found]/page.tsx
            layout.tsx
            not-found.tsx
   components/
   utils/

Here are 2 layout.tsx Both Containing Root Layout For Example layout.tsx in (default_site)/ contains the global AdSense Code with Google Analytics.

But Error Page Like 404 Page only Contains the google analytics and there is no adsense code there at all.

As Per NextJS Docs We Can Have Multiple RootLayout for Multiple Parts of our site like sub applications by this way.

Here The [...not_found]/page.tsx Only Created Once in error layout.

It's Content Are Like Given Below.

import {notFound} from "next/navigation"

export default function NotFoundCatchAll() {
  notFound()
}

Hope this Solves Your Issue @devjiwonchoi

devjiwonchoi · 2023-09-13T19:08:20Z

@shriekdj Thanks for the suggestion!
Even though your codes can be a workaround, I still think that the global not-found should be supported in this case.

I believe that it is not the developers' responsibility to configure inefficient structure (such as creating another route group for catch-all in your example) which could be resolved if support this issue or better as a default feature.

jmcpeak · 2023-10-15T16:05:10Z

I just ran into this.

I love routing by convention, but when those conventions don't work - it sucks.

Please fix this nextjs team!

mecaota · 2023-11-17T12:36:13Z

I also ran into the same problem. I'm glad that I found a solution, but the documentation says that it works when there is no global matching file path. It's unintuitive that it doesn't work with app/not-found.tsx or app/(group route)/not-found.tsx even if you put it there.

https://nextjs.org/docs/app/api-reference/file-conventions/not-found

I would like you to either fix it or write a solution for this in the documentation.

stychu · 2023-12-04T10:15:56Z

I have the same issue with my folder structure. Unfortunately you soulution @shriekdj doesn't satisfies my requirements as I want the 404 be displayed within my group root which has all authentication and navigation setup already. For second layout which is public and doesn't contain any auth etc. it should handle 404 with its own layout which doesn't seem currently possible..

#59180

shriekdj · 2023-12-08T16:05:50Z

@stychu my structure have two grouping layout both have layout.tsx file with same name but different content.

where the (error_layout) have layout.tsx file with it's own layout structure completely different from layout.tsx from (default_site) . then what issue are you facing.

stychu · 2023-12-13T12:45:54Z

Hi @shriekdj , I misunderstood your answer at first. After looking closely again and adding the [...not_found]/page.tsx
inside my GROUP the not-found is being handled within that group <3 exactly what I needed. So my structure is now

.
└── src/
    └── app/
        ├── (auth)/
        │   ├── login/
        │   │   └── page.tsx
        │   └── layout.tsx
        ├── (main) /
        │   ├── [...not-found]/
        │   │   └── page.tsx
        │   ├── pathOne/
        │   │   └── page.tsx
        │   ├── pathTwo/
        │   │   └── page.tsx
        │   ├── error.tsx
        │   ├── layout.tsx
        │   └── not-found.tsx
        └── api/
            └── trpc

ugb-access · 2023-12-20T07:46:08Z

I am still Facing this. The Only workaround is catch-all routes but I wouldn't say I like this structure as it kills the purpose of group routing.

shriekdj · 2024-01-16T22:22:51Z

happy to help @stychu

shriekdj · 2024-01-16T22:23:43Z

@ugb-access what structure you have currently?

benokif · 2024-02-01T10:43:17Z

Note that the workaround given by shriekdj does not work for static exports.

Navigating to a route that does not exist (here /fakeroute) will give this error:

Server Error
Error: Page "/(main)/[...not-found]/page" is missing param "/fakeroute" in "generateStaticParams()",
which is required with "output: export" config.

This error happened while generating the page. Any console logs will be displayed in the terminal window.

It would be great to get input from the NextJS team on this, this is an import feature that is currently missing from multiple root layout and is not documented

devjiwonchoi · 2024-03-08T14:30:00Z

Hi everyone, it seems like we could resolve it via setting the global not-found for each groups:

.
└── app/
    ├── (main)/
    │   ├── layout.tsx
    │   ├── not-found.tsx
    │   └── page.tsx
    └── (sub)/
        ├── sub/
        │   └── page.tsx
        ├── layout.tsx
        └── not-found.tsx

EDIT: My bad, I forgot the context. I'll try to bring up this issue.

ugb-access · 2024-03-09T06:07:02Z

@ugb-access what structure you have currently?

├── (cart)
│   └── cart
│   ├── layout.js
│   └── page.js
├── (checkout)
├── layout.js
├── (main)
│   ├── globals.css
│   ├── layout.js
│   ├── [...not-found]
│   │   └── page.js
│   ├── not-found.js
│   └── page.js

This is my current structure.

## Why? For multi-root layouts (route groups on the root with their root layouts, no layout file on the root), it is not possible to use global `not-found` since the `layout` is missing on the root. ```sh . └── app/ ├── (main)/ │ └── layout.js ├── (sub)/ │ └── layout.js └── not-found.js --> ERR: missing layout ``` Current Behavior: ```sh not-found.js doesn't have a root layout. To fix this error, make sure every page has a root layout. ``` ## What? Let multi-root layouts also benefit from the global `not-found`. ## How? Wrap root `not-found` with default layout if root layout does not exist. Although this solution is not `multi-root` specific, it won't produce critical issues since a root `layout` is required for other cases. Fixes #55191 #54980 #59180

shriekdj · 2024-04-25T09:31:41Z

why reopened the issue @shuding

YYGod0120 · 2024-05-16T13:25:48Z

Unfortunately, I also encountered this problem.
This was my previous file structure, but not-found.tsx is not working.

└─[language]
    │  apple-icon.png
    │  globals.css
    │  layout.tsx
    │  not-found.tsx
    ├─about
    │      layout.tsx
    │      page.tsx
    │
    ├─categories
    │      layout.tsx
    │      page.tsx
    ├─essay
    │  │  essay.css
    │  │  layout.tsx
    │  │
    │  ├─2023-05-03
    │  │  └─405
    │  │          page.tsx
    │
    ├─front
    │  │  layout.tsx
    │  │
    │  └─[categories]
    │      └─[number]
    │              page.tsx

However, I found a similar solution in #50034.
using a dynamic catch-all route to catch other not-found page.

└─[language]
   │  apple-icon.png
   │  globals.css
   │  layout.tsx
   │
   ├─about
   │      layout.tsx
   │      page.tsx
   │
   ├─categories
   │      layout.tsx
   │      page.tsx
   ├─essay
   │  │  essay.css
   │  │  layout.tsx
   │  │
   │  ├─2023-05-03
   │  │  └─405
   │  │          page.tsx
   │
   ├─front
   │  │  layout.tsx
   │  │
   │  └─[categories]
   │      └─[number]
   │              page.tsx
   └─[...not-found]
           page.tsx

But I don't think this is a good method; at least it can only catch not-found after the [language] dynamic route segment. Fortunately, I configured middleware to implement i18n, making it look like a global not-found.tsx.

ScorpyG · 2024-09-10T17:57:12Z

Is global not-found supported??? I'm still experiencing this issue with the next version14.2.9.

devjiwonchoi added the bug Issue was opened via the bug report template. label Sep 10, 2023

devjiwonchoi closed this as completed Mar 8, 2024

This was referenced Mar 8, 2024

not-found.tsx inside group does not rendered for unmatched URLs #54980

Open

Not-found broken with multiple root layouts #59180

Open

fix(next): global not-found not working on multi-root layouts #63053

Merged

devjiwonchoi reopened this Mar 8, 2024

shuding closed this as completed in #63053 Apr 15, 2024

shuding reopened this Apr 17, 2024

GeorgeHulpoi mentioned this issue Dec 23, 2024

notFound generates critical error with i18n #74236

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Global not-found not available in multiple root layouts #55191

Global not-found not available in multiple root layouts #55191

devjiwonchoi commented Sep 10, 2023

shriekdj commented Sep 13, 2023 •

edited

Loading

devjiwonchoi commented Sep 13, 2023

jmcpeak commented Oct 15, 2023

mecaota commented Nov 17, 2023

stychu commented Dec 4, 2023

shriekdj commented Dec 8, 2023

stychu commented Dec 13, 2023

ugb-access commented Dec 20, 2023

shriekdj commented Jan 16, 2024

shriekdj commented Jan 16, 2024

benokif commented Feb 1, 2024

devjiwonchoi commented Mar 8, 2024 •

edited

Loading

ugb-access commented Mar 9, 2024

shriekdj commented Apr 25, 2024

YYGod0120 commented May 16, 2024

ScorpyG commented Sep 10, 2024

Global not-found not available in multiple root layouts #55191

Global not-found not available in multiple root layouts #55191

Comments

devjiwonchoi commented Sep 10, 2023

Link to the code that reproduces this issue or a replay of the bug

To Reproduce

CodeSandBox Repro Link

Current vs. Expected behavior

Current

Expected

Verify canary release

Provide environment information

Which area(s) are affected? (Select all that apply)

Additional context

shriekdj commented Sep 13, 2023 • edited Loading

devjiwonchoi commented Sep 13, 2023

jmcpeak commented Oct 15, 2023

mecaota commented Nov 17, 2023

stychu commented Dec 4, 2023

shriekdj commented Dec 8, 2023

stychu commented Dec 13, 2023

ugb-access commented Dec 20, 2023

shriekdj commented Jan 16, 2024

shriekdj commented Jan 16, 2024

benokif commented Feb 1, 2024

devjiwonchoi commented Mar 8, 2024 • edited Loading

ugb-access commented Mar 9, 2024

shriekdj commented Apr 25, 2024

YYGod0120 commented May 16, 2024

ScorpyG commented Sep 10, 2024

shriekdj commented Sep 13, 2023 •

edited

Loading

devjiwonchoi commented Mar 8, 2024 •

edited

Loading