Next.js Dynamic Import

Last Updated : 26 Jul, 2024

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.

Dynamic Imports

Next.js Dynamic Import allows loading components, pages, or modules asynchronously based on user interactions or conditions, optimizing performance by loading resources only when needed, enhancing application efficiency and user experience.

Syntax:

import dynamic from 'next/dynamic';

const dynamicComp = dynamic(() => import("path_to_dynamicComponent"));

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.

JavaScript

// components/GFG.js  import React from "react";  function GFG() {     return (         <div>             <h1>Welcome TO GeeksforGeeks</h1>         </div>     ); }  export default GFG;

JavaScript

// Filename - components/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:

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.

JavaScript

// Filename - pages/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:

Next.js Dynamic Import

krcpr007

Improve

Article Tags :

Next.js Dynamic Import

Dynamic Imports

Set Up Dynamic Imports in Next.js

Creating React Application

Similar Reads