Next.js Built-in Loader Feature for Smooth Page Transitions

In this article, we’ll explore how to harness the Next.js Loader feature by creating a “loading.js” component that will be automatically displayed between page transitions.

Next.js Loader Feature

Next.js Loader feature is typically designed to be displayed during page transitions when content is being fetched from the server. If the content is already present in cache memory, such as when a user revisits a page they’ve previously loaded, the loader may not be displayed since there is no need to fetch data from the server.

The loader primarily serves to improve the user experience when there is a delay in loading content during navigation, especially when making network requests to retrieve data. When content is readily available in the cache, Next.js optimizes the user experience by minimizing unnecessary loading animations or delays.

Steps to install Next.js application

Step 1: Create Next.js Application

Open the terminal and create a new Next.js application using the following command:

npx create-next-app@latest gfg

Step 2: Move to Project Folder

After creating your project folder (i.e. gfg ), move to it by using the following command:

cd gfg

Project Structure

The project structure will look like this.

Approach

We’ll go through the steps to create and implement the loading.js component. This component will be automatically displayed when navigating between pages, making the transition smoother and more visually appealing. It’s worth noting that Next.js, by default, considers the loading.js file to implement this feature.

This addition highlights that Next.js automatically recognizes the loading.js file as part of its default behavior when implementing the loader feature.

Implementing the loading.js Component

Step 1: Create the “loading.js” Component

Inside your Next.js project’s app directory, create a loading.js component. Here’s an example of the component:

Javascript

// File path: app/loading.js

'use client';
export default function Page() {
    return (
        <>
            <h1>Loading.............</h1>
        </>
    )
}

Step 2: Add the Following Code Inside the “page.js” File Located in the “app” Directory

This will be one of your application’s pages, and it will demonstrate the use of the loader. Here’s an example:

Javascript

// File path: app/page.js
import Link from "next/link";

export default function Home() {
  return (
    <>
        <h3>Geeks For Geeks | Home Page</h3> <hr />
        <Link href={'/page1'}>Go to Page 1</Link>
    </>
  )
}

Step 3: Create a New Folder “page1” for Another Page.

Create a new folder named ‘page1‘ inside the app directory. Inside this folder, create a ‘page.js‘ file for another page in your application. Here’s an example:

Javascript

// File path: app/page1/page.js
import Link from "next/link";

export default function Page() {
    return (
        <>
            <h4>Page 1</h4>
            <Link href={'/'}>Home Page</Link> <hr />
            <img src="/gfg.png" height={70} width={100} />
        </>
    )
}

Running the Application

To run the application: Enter the following command in your terminal.

 npm run dev

Output: