Getting Started with Parallel Routes Next App Router

Handle simultaneously pages in the same layout

This time we will try to using feature Next App Router Parallel Routes. Parallel Routes allows you to simultaneously or conditionally render one or more pages within the same layout. We will build dashboard using Parallel Routes.

Preview:

Prerequisite:

1. Next App Router

Installation:

Run this command on your terminal to install the dependencies:

// next latest version
npx create-next-app@latest

Step 1: Creating UI

• Create new layout inside folder app: /app/dashboard/layout.tsx and code following code:

import React from "react"

export default function Layout({
  children, users, products
}: {
  children: React.ReactNode,
  users: React.ReactNode,
  products: React.ReactNode
}) {
  return (
    <main className="flex flex-col gap-4 bg-white p-4">
       <div>
        {children}
      </div>
      <div className="grid grid-cols-2 gap-4">
        {users}…