Discover Next.js Parallel Routing in just 16 Minutes

In this tutorial, we will learn how to create parallel routes in Next.js in just 16 minutes. Parallel routes allow multiple pages to be loaded at the same time, improving performance and user experience.

Step 1: Install Next.js

First, you need to have Node.js installed on your machine. Next, open your terminal and run the following command to create a new Next.js project:

npx create-next-app my-next-app

This command will create a new Next.js project in a directory called my-next-app. Once the project is created, navigate to the project directory by running:

cd my-next-app

Step 2: Create Parallel Routes

Next, we need to create the parallel routes in our Next.js project. To do this, navigate to the pages directory in your project and create two new files: page1.js and page2.js.

In page1.js, add the following code:

import React from 'react';

const Page1 = () => {
  return (
    <div>
      <h1>Page 1</h1>
    </div>
  );
};

export default Page1;

In page2.js, add the following code:

import React from 'react';

const Page2 = () => {
  return (
    <div>
      <h1>Page 2</h1>
    </div>
  );
};

export default Page2;

Step 3: Create Parallel Route

Next, we need to create a parallel route that will load both page1.js and page2.js at the same time. To do this, open the pages/index.js file and add the following code:

import React from 'react';
import { ParallelRoutes } from 'next-parallel-routes';
import { useRouter } from 'next/router';

const ParallelRoute = () => {
  const router = useRouter();

  return (
    <ParallelRoutes routes={[
      { Component: () => import('./page1'), path: '/page1' },
      { Component: () => import('./page2'), path: '/page2' }
    ]} router={router} />
  );
};

export default ParallelRoute;

Step 4: Install Next Parallel Routes

To make use of parallel routes in Next.js, we need to install the next-parallel-routes package. To do this, run the following command in your terminal:

npm install next-parallel-routes

Step 5: Start the Next.js Development Server

Now that we have set up our parallel routes, we can start the Next.js development server to see our changes in action. To start the server, run the following command in your terminal:

npm run dev

Once the server is running, open your browser and navigate to http://localhost:3000. You should see a page with links to Page 1 and Page 2. Clicking on either link should load the respective page without refreshing the entire page.

Congratulations! You have successfully learned how to create parallel routes in Next.js in just 16 minutes. You can now experiment with adding more parallel routes to your project to further improve performance and user experience.