Code Splitting in Next.js

Code Splitting in Next.js is a built-in optimization technique that divides JavaScript into smaller bundles, allowing only the code required for the current route or feature to be loaded instead of the entire application.

• Splits JavaScript into smaller bundles automatically.
• Loads code on demand for routes and components.
• Reduces the initial JavaScript download.
• Improves application loading efficiency.

Syntax:

There is no dedicated syntax for automatic code splitting. Next.js performs route-based code splitting automatically based on the file structure in the app/ directory.

app/
├── page.js
├── about/
│   └── page.js
├── contact/
│   └── page.js
└── dashboard/
    └── page.js

Each route is automatically compiled into a separate JavaScript bundle, which is loaded only when that route is visited.

Working of Code Splitting

Next.js automatically splits an application into multiple JavaScript bundles during the build process. When a user visits a route, only the bundle associated with that route is downloaded initially, while other bundles are loaded on demand as users navigate through the application.

• Creates separate JavaScript bundles for each route.
• Loads only the bundle required for the current page.
• Downloads additional bundles during navigation.
• Optimizes resource loading without manual configuration.

Types of Code Splitting in Next.js

Next.js supports automatic and component-level code splitting to load JavaScript efficiently based on application needs.

1. Automatic Route-Based Code Splitting

Next.js automatically creates a separate JavaScript bundle for each route in the app directory during the build process. When a user visits a route, only the JavaScript required for that page is downloaded. Additional route bundles are loaded automatically when users navigate to other pages.

• Creates separate bundles for each route automatically.
• Loads only the code required for the current page.
• Downloads additional bundles during navigation.
• Requires no manual configuration.

Example Project Structure

app/
│
├── page.js
├── about/
│   └── page.js
├── contact/
│   └── page.js
└── dashboard/
    └── page.js

Create the following file:

import Link from "next/link";

export default function Home() {
  return (
    <main style={{ padding: "20px" }}>
      <h1>Automatic Route-Based Code Splitting</h1>

      <ul>
        <li>
          <Link href="/about">About</Link>
        </li>

        <li>
          <Link href="/contact">Contact</Link>
        </li>

        <li>
          <Link href="/dashboard">Dashboard</Link>
        </li>
      </ul>
    </main>
  );
}

export default function About() {
  return <h1>About Page</h1>;
}

export default function Contact() {
  return <h1>Contact Page</h1>;
}

export default function Dashboard() {
  return <h1>Dashboard Page</h1>;
}

Run the Application:

npm run dev

Open:

http://localhost:3000

Note: Route-based code splitting is enabled by default in the Next.js App Router. Developers do not need to write additional code or configure any settings to use this feature.

2. Component-Level Code Splitting

Component-level code splitting loads individual components only when they are needed instead of including them in the initial JavaScript bundle. This is useful for large or rarely used components, helping reduce the initial bundle size and improving application loading efficiency.

• Loads individual components on demand.
• Reduces the initial JavaScript bundle size.
• Improves page loading efficiency.
• Suitable for heavy components such as charts, maps, and editors.

Example: Chart component is loaded dynamically using next/dynamic.

import dynamic from "next/dynamic";

// Dynamically import the Chart component
const Chart = dynamic(() => import("./components/Chart"));

export default function Home() {
  return (
    <main style={{ padding: "20px" }}>
      <h1>Component-Level Code Splitting</h1>

      <p>
        The Chart component is loaded only when this page is rendered.
      </p>

      <Chart />
    </main>
  );
}

export default function Chart() {
  return (
    <div
      style={{
        marginTop: "20px",
        padding: "20px",
        border: "1px solid #ccc",
        borderRadius: "8px",
      }}
    >
      <h2>Sales Chart</h2>
      <p>This component was loaded dynamically.</p>
    </div>
  );
}

Output:

• dynamic() imports the Chart component only when it is required.
• The Chart component is separated into its own JavaScript bundle.
• The main page loads first, while the Chart bundle is fetched separately.
• This approach is beneficial for components that are large or not immediately required.

Benefits of Code Splitting in Next.js

Code Splitting helps improve application efficiency by loading only the JavaScript required for the current page or feature. This reduces unnecessary downloads and provides a smoother user experience.

• Reduces the initial JavaScript bundle size.
• Loads code on demand for faster page rendering.
• Improves application performance and responsiveness.
• Optimizes bandwidth by avoiding unnecessary downloads.
• Enhances scalability for large applications.
• Contributes to better Core Web Vitals and SEO.

Also Check:

• Routing in Next.js
• Lazy loading