How to Create Parallel Routes in Next.js with App Router

In Next.js, create parallel routes by using the App Router with layout groups and segment keys inside the app directory. Wrap parallel route folders in parentheses and use @segment naming to render multiple UI sections side-by-side.

Syntax

Parallel routes in Next.js use layout groups wrapped in parentheses and segment keys prefixed with @. This structure allows rendering multiple UI parts simultaneously.

• (group): Groups routes without affecting the URL.
• @segment: Defines a parallel route segment.
• layout.js: Shared layout for the group.
• page.js: The page content for each route.

plaintext

app/(dashboard)/layout.js
app/(dashboard)/@profile/page.js
app/(dashboard)/@settings/page.js

Example

This example shows a dashboard with two parallel routes: profile and settings. Both render side-by-side inside the dashboard layout.

javascript

/* app/(dashboard)/layout.js */
export default function DashboardLayout({ children }) {
  return (
    <div style={{ display: 'flex', gap: '2rem' }}>
      {children}
    </div>
  )
}

/* app/(dashboard)/@profile/page.js */
export default function ProfilePage() {
  return <section><h2>Profile</h2><p>Your profile info here.</p></section>
}

/* app/(dashboard)/@settings/page.js */
export default function SettingsPage() {
  return <section><h2>Settings</h2><p>Your settings here.</p></section>
}

Output

<div style="display:flex; gap:2rem;"><section><h2>Profile</h2><p>Your profile info here.</p></section><section><h2>Settings</h2><p>Your settings here.</p></section></div>

Common Pitfalls

Common mistakes include:

• Not wrapping parallel routes in parentheses, which breaks grouping.
• Forgetting the @ prefix on segment folders, so Next.js won't treat them as parallel routes.
• Placing page.js files directly inside the group folder instead of inside segment folders.

Always ensure folder names and structure follow the pattern exactly.

plaintext

/* Wrong: Missing parentheses and @ prefix */
app/dashboard/profile/page.js
app/dashboard/settings/page.js

/* Right: Using parentheses and @ prefix */
app/(dashboard)/@profile/page.js
app/(dashboard)/@settings/page.js

Quick Reference

Concept	Description	Example
Layout Group	Groups routes without changing URL	(dashboard)
Segment Key	Defines parallel route segment with @ prefix	@profile
Layout File	Shared layout for group or segment	layout.js
Page File	Content for each route segment	page.js

Key Takeaways

Use parentheses to create layout groups for parallel routes in the app directory.

Prefix parallel route folders with @ to define segment keys.

Place a layout.js file in the group folder to wrap parallel routes.

Each parallel route must have its own page.js inside its @segment folder.

Incorrect folder naming or missing parentheses breaks parallel routing.