Parallel routes (@slot) in NextJS - Mini Project: Build & Apply

Create Parallel Routes with @slot in Next.js

📖 Scenario: You are building a simple blog website using Next.js. You want to show a sidebar with a list of categories alongside the main content area. The sidebar and main content should be separate routes that render together on the same page using parallel routes and the @slot feature.

🎯 Goal: Build a Next.js app with parallel routes using @slot to display a sidebar of categories and main blog posts side by side.

📋 What You'll Learn

Create a categories array with exact category names

Add a @sidebar parallel route configuration

Use @slot in the layout to render sidebar and main content

Create separate components for sidebar and main content routes

💡 Why This Matters

🌍 Real World

Parallel routes with @slot let you build complex layouts like dashboards, blogs, or admin panels where multiple parts of the page update independently but share the same URL.

💼 Career

Understanding parallel routes and layout composition is essential for building scalable Next.js applications used in professional web development.

1

DATA SETUP: Create the categories array

Create a file app/categories/data.js and inside it create an array called categories with these exact strings: 'Technology', 'Health', 'Travel', 'Finance'.

NextJS

// Your code here

Need a hint?

Remember to export the categories array so other files can use it.

2

CONFIGURATION: Add the sidebar parallel route folder

Inside the app folder, create a folder named @sidebar to be used as a parallel route. This folder will hold the sidebar content component.

NextJS

export const categories = ['Technology', 'Health', 'Travel', 'Finance'];
// Create a folder named '@sidebar' inside 'app' for the parallel route

Need a hint?

Parallel routes in Next.js are created by adding folders inside app with the route name starting with @.

3

CORE LOGIC: Use @slot in the layout to render sidebar and main content

In the app/layout.js file, update the root layout component to include the {@sidebar} slot for the sidebar parallel route and the default {children} slot for main content. Use a flex container to display them side by side.

NextJS

export const categories = ['Technology', 'Health', 'Travel', 'Finance'];

// Folder created: app/@sidebar/

export default function RootLayout({ children }) {
  return (
    
      
        {/* Add flex container with @slot for sidebar and main content here */}
      
    
  );
}

Need a hint?

Use {@sidebar} to render the sidebar parallel route and {children} for the main content.

4

COMPLETION: Create sidebar and main content components

Create app/@sidebar/page.js that imports categories and renders them in a list. Also create app/page.js that shows a heading Welcome to the Blog. These two routes will render side by side using the parallel routes setup.

NextJS

export const categories = ['Technology', 'Health', 'Travel', 'Finance'];

// Folder created: app/@sidebar/

export default function RootLayout({ children }) {
  return (
    
      
        
          
            {@sidebar}
          
          
            {children}
          
        
      
    
  );
}

// Create app/@sidebar/page.js and app/page.js with the described content
// Your code here

Need a hint?

Remember to import categories in app/@sidebar/page.js and map over them to create list items.