Next.js Discord

Discord Forum

Web Component-like slots

Answered
oof2win2 posted this in #help-forum
Open in Discord
oof2win2OP
Hi. I want to use web-component like slots within my Layout file so that I can return multiple elements that slot into different parts of the layout at once. Is this possible within the React architecture somehow? added a simple example below but say there is more nesting within the divs and they are further separated within the layout
export default function Layout({children}) {
  return (
    <div>
        <div>{TitleComponent}</div>
        <div>{children}</div>
    </div>
  )
}

export default function Page() {
  // this should be the title component rendering
  const title = <div>Title here</div>
  // return the child components as normal here
  return <div>children</div>
}
Answered by joulev
well, parallel routes is literally the feature to make this possible. it's not that complicated either.

// layout.tsx
export default function Layout({ title, children }) {...}

// page.tsx
export default function Page() {...} // `children` prop

// @title/page.tsx
export default function Page() {...} // `title` prop

// @title/default.tsx
export default function Default() {...} // for pages without an explicit page.tsx for the `title` prop
View full answer

6 Replies

oof2win2OP
do i need parallel routes for this? i mean the main menubar is noninteractive
like if yes then sure just wondering about a simpler solution
@oof2win2 do i need parallel routes for this? i mean the main menubar is noninteractive
joulev
well, parallel routes is literally the feature to make this possible. it's not that complicated either.

// layout.tsx
export default function Layout({ title, children }) {...}

// page.tsx
export default function Page() {...} // `children` prop

// @title/page.tsx
export default function Page() {...} // `title` prop

// @title/default.tsx
export default function Default() {...} // for pages without an explicit page.tsx for the `title` prop
Answer
oof2win2OP
ohhhh that makes sense
thanks