Generating a Layout with main AND sidebar content??
How would I go about creating a
<Layout /> that will allow me to pass in children to define the body content AND sidebar content? So I'm expecting each page to have the Header, provided by the Layout, and then two children. The first child will be the body content, the second will be the sidebar. Is there a way to write a Layout that will accept specific children in specific places?17 Replies
Just create a different layout when it's supposed to be different?
LayoutWithSidebar and LayoutWithoutSidebar 😀well I want the layout to be the same, just the content to change
Just use props?
The content is the page, so what's the problem there?
I tried doing a layout and just using
children[0] and children[1] for putting the body content and sidebar content in their respective containers.
.....it seems to actually work perfectlyCheck https://nextjs.org/docs/basic-features/layouts, but I mean all this will be redundant once they release their next version
I really wouldn't do this, it's very unclear and very breakable
Your consumer hasn't the faintest clue that this is what will happen
what do you mean?
If someone else uses your layout, why would they think that you're putting the content in different places like that
It's not for an open-source project. And I think it's fairly easy to pick up on from reading the source code
on a page you just do
Why not just use props
you mean like define a
sideBar prop on the Layout component?Yeah
I could....but that sounds less........ sexy to me.
and
children already is a prop, so I'd be writing a new prop to do something that's already technically being doneUnknown User•3y ago
Message Not Public
Sign In & Join Server To View
I would do
`
It's almost always about what is the least brittle, most performant, more standard convention, more easy to follow, way before ticks and sexiness. React gives you a lot of rope to hang yourself sometimes.
how many different sidebar do you need ?
you could do :
<Layout sidebarType={"default" | "empty" | "fancy"}>
<Content/>
</Layout>
And define your sidebars inside Layout