Next.js Discord

Discord Forum

How can I opt out for a given layout?

Unanswered
Sun bear posted this in #help-forum
Open in Discord
Sun bearOP
Is there a way to opt out of a layout for a child route without using the pathname and conditional rendering?

I mean, I have a layout.tsx in the (discover) directory, but I don’t want it, for example, in (discover)/something/[id]. I only need it in (discover)/something. If I use the pathname, surely I can solve it, but I want to know if Next.js has something in its Route system. I spent some time searching in the docs but did not find anything.

17 Replies

Plott Hound
there is no way to bypass a layout. they always inherit the parent layout
the general pattern is to keep your high level or root layout(s) simple so you have more flexibility when you drill down
you're on the right track by using route groups but you'll have to get creative when dealing with deeply nested layouts
@Plott Hound you're on the right track by using route groups but you'll have to get creative when dealing with deeply nested layouts
Sun bearOP
Oh thanks for your time, maybe I will render the layout component conditionally with pathname 😕
@Sun bear Oh thanks for your time, maybe I will render the layout component conditionally with pathname 😕
Plott Hound
No problem. Only issue with using usePathname is you’d have to make your layouts use client which isn’t advised. Because layouts aren’t re rendered on navigation I don’t think there’s a way to get the pathname while it’s a sever component (easily)
If I was in your situation I’d keep the layouts server components and move down any client stuff to the page. You could make a layout kind of component that you just import into the pages as needed
@Plott Hound No problem. Only issue with using usePathname is you’d have to make your layouts use client which isn’t advised. Because layouts aren’t re rendered on navigation I don’t think there’s a way to get the pathname while it’s a sever component (easily)
Sun bearOP
I don’t think in it before, you right, in fact i fetch some data server side and pass it to the layout, in any situation, this call wold be made anyways so...I think need to think in it...
Northeast Congo Lion
I too have been scratching my head on this.

I have a root ”Dashboard” layout which contains a sidebar. But deep down the dashboard route eg /dashboard/posts/new, I’d like to have a full screen layout without the sidebar or other baggage with the root layout. What I did was to create another layout in the root that doesn’t have the sidebar eg “Blank”, and nest all my create screens that don’t require the sidebar. It works but it’s kinda annoying that I can’t group related routes together in the same folder
Plott Hound
eg Root Layout is bare minimum.
    <html lang="en" suppressHydrationWarning className={`${inter.className} h-dvh flex flex-col antialiased`}>
      <body className='flex flex-col grow'>
        <Toaster />
        <Providers>
          {children}
        </Providers>
      </body>
    </html>

then in your route groups something like this: 
import DashboardLayout from "@/ui/DashboardLayout"

export default function SomeLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <DashboardLayout>
      {children}
    </DashboardLayout>
  )
}
Sun bearOP
Mmmmm I was thinking in doing this:

'use client';

import { usePathname } from 'next/navigation';

type Props = {
  children: React.ReactNode;
};

export const RemoveAside = ({ children }: Props) => {
  const pathname = usePathname();
  if (pathname === '/movies' || pathname === '/tv') {
    return <>{children}</>;
  }
  return <></>;
};


Wrap my aside component with this...

I don’t know if this is a bad practice 😬😬😬
Plott Hound
It would kind of be considered bad practice but it’s hard to say without seeing all of your code. You could do this in your aside component but the main issue is having to invoke use client so far up in your component tree
And there’s nothing wrong with that. It’s just over engineering something that could be done server side with better organised route groups
@Plott Hound And there’s nothing wrong with that. It’s just over engineering something that could be done server side with better organised route groups
Sun bearOP
Mmmmm I love to to this server side but...is kind of hard. Let’s see first am I beginner and I just making a web app to see movie information (very normal project) iam using supabase for auth and have comments favs watch list etc. In this route group i wrap the /movie and /tv routes where I have some filters (aside) but then I have /movie/[id] and tv/[id] as well where I don want to show the filters 😕 also I don’t want to put filters out of layout because it will re-render in every search, maybe is not a big deal but is the idea that I have, I don’t think use client is bad per se, in fact those components need hydration so is the same, I also have a server component there that fetch some data, but iam passing it as children so still be server...
Also feel free to share or dm me your git repo and I can have a mess around locally. As I said earlier it’s hard to advise without seeing the codebase