Back to results for “Set”
Next.js › Parallel Routes & Intercepting Routes

How do you set up the folder structure for a parallel route slot in your application?

Intermediate

Answer

You create a folder starting with an at sign, such as @analytics, inside the same directory as your layout, and Next.js automatically passes its rendered content into the layout as a prop with that same name, letting you place it wherever you want inside the layout's markup.
// app/dashboard/@analytics/page.js
export default function Analytics() {
  return <div>Analytics content here</div>;
}

// app/dashboard/@activity/page.js
export default function Activity() {
  return <div>Recent activity here</div>;
}
Real-world example A team organizes their dashboard's analytics and activity sections into separate @analytics and @activity folders, keeping each section's code cleanly isolated while both render together on the same dashboard page.

Common follow-ups: What happens if one parallel route slot has no matching content for a given URL?;Can parallel routes have their own nested dynamic routes?