Parallel routes concept in NextJS - Mini Project: Build & Apply

Building Parallel Routes in Next.js

📖 Scenario: You are creating a simple Next.js app that shows two different sections side by side: a Profile and a Settings panel. Both should be visible at the same time using parallel routes.

🎯 Goal: Build a Next.js app with parallel routes to display profile and settings components side by side on the same page.

📋 What You'll Learn

Create a main layout with two parallel route outlets named profile and settings

Create a profile route that shows user profile information

Create a settings route that shows user settings options

Use Next.js App Router conventions with layout.js and page.js files

Ensure the parallel routes render side by side in a responsive layout

💡 Why This Matters

🌍 Real World

Parallel routes let you show multiple views or panels at once, like a dashboard with different widgets visible side by side.

💼 Career

Understanding parallel routes is useful for building complex user interfaces in Next.js apps, a common skill for frontend developers.

1

Set up the main layout with parallel route slots

Create a layout.js file inside the app directory. Inside it, create a React component that returns a div with two section elements. Each section should render a Slot component with names profile and settings respectively. Import Slot from next/navigation.

NextJS

import { Slot } from 'next/navigation'

export default function RootLayout({ children }) {
  return (
    
      {/* Your code here */}
    
  )
}

Need a hint?

Remember to import Slot from next/navigation and use it with the name prop for parallel routes.

2

Create the profile parallel route page

Inside the app directory, create a folder named @profile. Inside it, create a page.js file. Export a React component that returns a div with the text User Profile Section.

NextJS

import React from 'react'

export default function ProfilePage() {
  // Your code here
}

Need a hint?

Create a simple React component that returns a div with the exact text User Profile Section.

3

Create the settings parallel route page

Inside the app directory, create a folder named @settings. Inside it, create a page.js file. Export a React component that returns a div with the text User Settings Section.

NextJS

import React from 'react'

export default function SettingsPage() {
  // Your code here
}

Need a hint?

Create a React component that returns a div with the exact text User Settings Section.

4

Add the main page to render both parallel routes

Inside the app directory, create a page.js file. Export a React component that returns a div with the text Main Dashboard. This page will render alongside the parallel routes defined in the layout.

NextJS

export default function Page() {
  // Your code here
}

Need a hint?

Create a simple React component that returns a div with the text Main Dashboard.