Using Dynamic Import in Next.js | Updated 2024

80

Dynamic import is a feature in Next.js that allows you to load JavaScript modules and components only when they are needed. This can improve the performance of your application by reducing the initial load time. In this guide, we’ll explore how to use dynamic import in Next.js to optimize your application.

Prerequisites

Ensure you have the following installed:

• Node.js
• npm or yarn
• A Next.js project

Steps for Using Dynamic Import in Next.js

Step 1: Setting Up the Next.js Project

If you don’t have a Next.js project set up already, you can create one using the following command:

npx create-next-app my-nextjs-dynamic-import
# or
yarn create next-app my-nextjs-dynamic-import

Navigate to your project directory

cd my-nextjs-dynamic-import

Step 2: Installing Necessary Dependencies

If you have not installed Next.js yet, you can do so using npm or yarn:

npm install next react react-dom
# or
yarn add next react react-dom

Step 3: Creating a Component for Dynamic Import

First, let’s create a simple component that we will import dynamically. Create a file Hello.js in the components directory:

// components/Hello.js
export default function Hello() {
  return <div>Hello, world!</div>;
}

Step 4: Using Dynamic Import

Next, we’ll use dynamic import to load the Hello component only when it is needed.

Open pages/index.js and modify it as follows

// pages/index.js
import dynamic from 'next/dynamic';
import { useState } from 'react';

const DynamicHello = dynamic(() => import('../components/Hello'));

export default function Home() {
  const [showHello, setShowHello] = useState(false);

  return (
    <div>
      <h1>Welcome to My Next.js App</h1>
      <button onClick={() => setShowHello(!showHello)}>
        {showHello ? 'Hide' : 'Show'} Hello Component
      </button>
      {showHello && <DynamicHello />}
    </div>
  );
}

Step 5: Adding Loading Indicator

You can also add a loading indicator while the dynamic component is being loaded. Modify the dynamic import in pages/index.js:

// pages/index.js
import dynamic from 'next/dynamic';
import { useState } from 'react';

const DynamicHello = dynamic(() => import('../components/Hello'), {
  loading: () => <p>Loading...</p>,
});

export default function Home() {
  const [showHello, setShowHello] = useState(false);

  return (
    <div>
      <h1>Welcome to My Next.js App</h1>
      <button onClick={() => setShowHello(!showHello)}>
        {showHello ? 'Hide' : 'Show'} Hello Component
      </button>
      {showHello && <DynamicHello />}
    </div>
  );
}

Step 6: Using Dynamic Import with SSR

By default, dynamic imports in Next.js are client-side only. If you need server-side rendering (SSR) support, you can enable it with the ssr option.

Modify the dynamic import to enable SSR

// pages/index.js
import dynamic from 'next/dynamic';
import { useState } from 'react';

const DynamicHello = dynamic(() => import('../components/Hello'), {
  loading: () => <p>Loading...</p>,
  ssr: true,
});

export default function Home() {
  const [showHello, setShowHello] = useState(false);

  return (
    <div>
      <h1>Welcome to My Next.js App</h1>
      <button onClick={() => setShowHello(!showHello)}>
        {showHello ? 'Hide' : 'Show'} Hello Component
      </button>
      {showHello && <DynamicHello />}
    </div>
  );
}

Step 7: Dynamic Import with Named Exports

If your component uses named exports, you can specify which export to load dynamically.

Modify components/Hello.js to use named exports

// components/Hello.js
export function Hello() {
  return <div>Hello, world!</div>;
}

Update the dynamic import to load the named export

// pages/index.js
import dynamic from 'next/dynamic';
import { useState } from 'react';

const DynamicHello = dynamic(() => import('../components/Hello').then(mod => mod.Hello), {
  loading: () => <p>Loading...</p>,
});

export default function Home() {
  const [showHello, setShowHello] = useState(false);

  return (
    <div>
      <h1>Welcome to My Next.js App</h1>
      <button onClick={() => setShowHello(!showHello)}>
        {showHello ? 'Hide' : 'Show'} Hello Component
      </button>
      {showHello && <DynamicHello />}
    </div>
  );
}

Conclusion

In this guide, we covered how to use dynamic imports in Next.js to optimize your application’s performance. We created a component for dynamic import, implemented a loading indicator, and explored how to handle SSR and named exports. By using dynamic imports, you can ensure that your application loads faster and only fetches the necessary code when needed.

For more updates on programming trends and tutorials, visit blogsea.net regularly.

Using Dynamic Import in Next.js – FAQs