Next.js Dynamic Import

Dynamic Imports: Unlike standard import modules, dynamic import modules are flexible in terms of when and how they are loaded. Instead of being forced to upload a module file during reading, a powerful import can be requested during use. With code separating the module into a separate batch file it can be downloaded separately which reduces the load on the first page.

Set Up Dynamic Imports in Next.js:

Before you proceed, there are some things you should be aware of about the dynamic import. Although dynamic import can reduce page load, it is very important to know how the bulk download process behaves in order to avoid negative consequences that may increase page load.

• Dynamic imports are fetched when the component is rendered for the first time.
• Already rendered imports do not trigger an additional re-fetch.
• Each dynamic import will create a newly incremented bundle file. This includes nested dynamic imports.
• Each dynamic import adds a new server request.

Creating React Application:

Step 1: Create a React application using the following command and move to that folder:

npx create-next-app gfg
cd gfg 

Step 2: Create components named folder in your root directory. Create a folder named components. Run the command to create a folder

mkdir components 

Step 3: Inside the folder create two files. Inside the component folder, the two javascript files are named GFG.js and Hello.js with the following code.

GFG.js

import React from "react";

function GFG() {
    return (
        <div>
            <h1>Welcome TO GeeksforGeeks</h1>
        </div>
    );
}

export default GFG;

Hello.js

import React from "react";

function Hello() {
    return (
        <div>
            <h1>Hello Geeks</h1>
        </div>
    );
}

export default Hello;

Project Structure: Your project directory will look like this:

Directory

Step 4: Inside index.js we have import dynamic. 

In your directory, you can see a pages folder inside that index.js file will be there. import dynamic from ‘next/dynamic’. And make state and button to show those two components and working of dynamic as well as benefits.

index.js

import dynamic from "next/dynamic";
import { useState } from "react";
import Hello from "../components/Hello";

export default function Home() {
    const [showComp, SetShowComp] = useState(false);
    const GFG = dynamic(() => import("../components/GFG"));

    return (
        <div>
            {showComp ? <GFG /> : <Hello />}
            <button onClick={() => SetShowComp(!showComp)}>
                Toggle Component
            </button>
        </div>
    );
}

Step to run the application: Run the application using the following command:

npm start

Output:

References:

• Dynamic Import 
• MDN Dynamic JS Imports
• Code splitting with dynamic imports in Next.js