#resetting layout

1 messages · Page 1 of 1 (latest)

ripe sky
#

Is it possible to reset the layout segment for not-found.ts file. E.g. currently if we put not-found.ts file inside /blog/[slug] and throw not found from that route the not-found file will take the layout from layout.ts file located inside /blog. But I want to reset the layout for not-found.ts file located inside /blog/[slug]

junior inletBOT
#

Hi @ripe sky. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, it is possible to reset the layout for the not-found.tsx file located inside /blog/[slug]. However, it's important to note that the not-found.tsx file is rendered as a child of the layout.tsx file in the same segment. This means that if a layout.tsx file exists in the /blog/[slug] directory, the not-found.tsx file in the same directory will use that layout.

If you want to use a different layout for the not-found.tsx file, you can create a new layout file in the /blog/[slug] directory and import it in your not-found.tsx file. Here's an example of how you can do this:

// src/app/blog/[slug]/not-found.tsx

import NewLayout from './new-layout';

export default function NotFound() {
  return (
    <NewLayout>
      <h1>My 404</h1>
    </NewLayout>
  );
}

In this example, NewLayout is the new layout file you want to use for the not-found.tsx file. This way, the not-found.tsx file will use NewLayout instead of the layout.tsx file in the same directory.

Please note that this is a workaround and it would be better if such workarounds were not necessary. Ideally, Next.js should match not-found the same way it does when you have your root page.tsx placed under some group (like src/app/(default)/page.tsx)[^1^].

^1^]: [Github Issue (closed): [Bug] Not found not working with Route groups > Comments Part 5 (https://github.com/vercel/next.js/issues/55717)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@ripe sky kapa.ai is still learning and improving, please let us know how it did by reacting below

ripe sky
#

@junior inlet

junior inletBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Sorry @ripe sky, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

ripe sky
#

@junior inlet
But importing the new-layout.ts doesn't fix this, because it'll work like a component and layout.ts from blog will still appear on top of not-found.ts file

junior inletBOT
#

Let me check the knowledge base for you. One moment! :books:

#

I see, you're correct. The layout.tsx file in the /blog directory will still be used as the layout for the not-found.tsx file in the /blog/[slug] directory, even if you import a different layout in the not-found.tsx file. This is because in Next.js, the layout.tsx file in a directory is used as the layout for all the pages in that directory and its subdirectories.

One possible solution to this issue is to restructure your directories and files. You can create a separate directory for the routes that should use the not-found.tsx file with a different layout. For example, you can create a (error_layout) directory and place your not-found.tsx file and the new layout file in that directory[^1^].

Here's an example of how you can restructure your directories and files:

src/
    app/
       (default_site)/
            blog/[slug]/page.tsx
            layout.tsx
       (error_layout)/
            blog/[slug]/not-found.tsx
            layout.tsx
   components/
   utils/

In this structure, the not-found.tsx file in the (error_layout)/blog/[slug] directory will use the layout.tsx file in the (error_layout) directory, not the layout.tsx file in the (default_site) directory.

Please note that this is a workaround and it would be better if such workarounds were not necessary. Ideally, Next.js should match not-found the same way it does when you have your root page.tsx placed under some group (like src/app/(default)/page.tsx).

^1^]: [Github Issue (open): Global not-found not available in multiple root layouts > Comments Part 6 (https://github.com/vercel/next.js/issues/55191)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@ripe sky kapa.ai is still learning and improving, please let us know how it did by reacting below

ripe sky
#

@junior inlet the above mentioned solution doesn't work

junior inletBOT
#

Let me check the knowledge base for you. One moment! :books:

#

I apologize for the confusion. Unfortunately, based on the provided knowledge sources, there isn't a direct solution to reset the layout for a not-found.tsx file in a specific directory in Next.js. The layout defined in a parent directory will be applied to all pages in its subdirectories, including the not-found.tsx page.

This seems to be a limitation in the current version of Next.js. I would recommend raising this issue in the Next.js GitHub repository, as it could be a valuable feature for the Next.js team to consider in future updates. Here is the link to the repository: Next.js GitHub (https://github.com/vercel/next.js/issues)

In the meantime, you might need to handle this manually in your layout or page components by adding conditional rendering logic based on the current route.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: