What is loading.js in Next.js: Explanation and Usage

loading.js in Next.js is a special file used to show a loading indicator while a page or component is being loaded asynchronously. It helps improve user experience by displaying a visual cue during slow network or heavy data fetching.

How It Works

Imagine you are waiting for a bus. Instead of standing still and wondering when it will come, you see a sign that says "Bus arriving soon." This sign is like loading.js in Next.js. It shows users that something is happening while the page or component is loading.

In Next.js, when you navigate to a page that takes time to load, the framework can display the loading.js component automatically. This component acts as a placeholder, giving users feedback that the app is working and the content will appear shortly.

This mechanism is especially useful for pages that use dynamic imports or server-side rendering with delays. It prevents blank screens and keeps the user engaged.

Example

This example shows a simple loading.js component that displays a message while the page loads.

javascript

export default function Loading() {
  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: '100vh',
      fontSize: '1.5rem',
      fontWeight: 'bold'
    }}>
      Loading, please wait...
    </div>
  )
}

Output

A full screen message centered vertically and horizontally that says: Loading, please wait...

When to Use

Use loading.js in Next.js when your pages or components take noticeable time to load. This includes:

• Pages with heavy data fetching from APIs.
• Components loaded dynamically with next/dynamic.
• Server-side rendered pages that may have network delays.

By showing a loading indicator, you keep users informed and reduce frustration caused by blank or frozen screens.

Key Points

• loading.js is a special file in Next.js for showing loading states.
• It improves user experience by providing visual feedback during page or component loading.
• Works well with dynamic imports and server-side rendering delays.
• Should be simple and clear to avoid confusing users.

Key Takeaways

loading.js shows a loading indicator during slow page or component loads in Next.js.

It helps keep users informed and improves the app's perceived speed.

Use it with dynamic imports, server-side rendering, or heavy data fetching.

The loading component should be simple and visually clear.

Next.js automatically uses loading.js when placed in the right folder.