Given the following folder structure and code snippets, what will the rendered output be?
Folder structure:
app/
layout.js
page.js
(sidebar)/
layout.js
page.jsapp/layout.js:
export default function RootLayout({ children }) {
return (
<html>
<body>
<div>Root Layout</div>
{children}
</body>
</html>
)
}app/page.js:
export default function HomePage() {
return <div>Home Page</div>
}app/(sidebar)/layout.js:
export default function SidebarLayout({ children }) {
return <aside>Sidebar Layout {children}</aside>
}app/(sidebar)/page.js:
export default function SidebarPage() {
return <div>Sidebar Page</div>
}And the route is accessed as: / with parallel route sidebar rendered in a slot.
Remember that parallel routes require the parent layout to destructure and render the slot prop named after the route group (e.g., {sidebar}).
The root layout destructures only {children}, rendering <div>Root Layout</div> followed by {children}, which is the content from app/page.js (<div>Home Page</div>). The parallel route (sidebar) does not render because the layout does not destructure the sidebar prop or render {sidebar}.
In Next.js App Router, how do you correctly define a slot for a parallel route named sidebar inside a layout component?
Parallel route slots are passed as props named after the route.
In Next.js parallel routes, the layout receives props named after the parallel route. So if the parallel route is named sidebar, the layout receives a sidebar prop containing that route's content. You render it like any other React prop.
Given this layout code in Next.js App Router:
export default function RootLayout({ children }) {
return (
<html>
<body>
<div>Root</div>
{children}
{sidebar}
</body>
</html>
)
}And the parallel route is named sidebar. The sidebar content does not appear on the page. What is the cause?
Check how the function parameters receive props.
The layout function only destructures { children } from props, so the sidebar prop is not defined in the function scope. You must include sidebar in the destructuring to access it and render it.
Consider a Next.js app with two parallel routes: main and sidebar. Each route has a button that increments its own counter state.
If you click the button in the sidebar route, what happens to the main route's counter display?
<!-- main/page.js --> import { useState } from 'react'; export default function MainPage() { const [count, setCount] = useState(0); return ( <div> <p>Main count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment Main</button> </div> ); } <!-- sidebar/page.js --> import { useState } from 'react'; export default function SidebarPage() { const [count, setCount] = useState(0); return ( <div> <p>Sidebar count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment Sidebar</button> </div> ); }
Each parallel route has its own component and state.
Each parallel route renders its own React component tree with independent state. Updating state in one route does not affect the other.
What is the main advantage of using parallel routes with the @slot feature in Next.js App Router?
Think about how parallel routes help organize UI parts.
Parallel routes let you render different parts of the UI simultaneously, each with its own layout and state. This helps build complex interfaces like sidebars, modals, or multi-panel layouts without mixing concerns.