What is code splitting in Next.js?

Code splitting is an optimization technique that aims to reduce the size of an app’s (first) payload by splitting or breaking the code modules into chunks and serving them only when needed.

Next.js is a development framework that enables React-based applications functionalities.

Code splitting with Next.js

We can use Next.js to code split our React app with the ES2020 dynamic import() statement.

The import statement is imported from the Next.js next/dynamic module.

import dynamic from 'next/dynamic'

dynamic is a function that accepts a function that calls the import function as its argument. The import function takes the path to the component file.

Example

import dynamic from 'next/dynamic'

const HelloComponent = dynamic(() => import('../components/hello'))



// src/components/hello.js
function HelloComponent() {
    return (
        <div>Hello!!</div>
    )
}

export default HelloComponent

Here, we split out HelloComponent from the main bundle. HelloComponent in ../components/hello is split into a manageable chunk, so it can be served (Server-Side Rendered) by Next.js from the server when needed. HelloComponent can then be used as a component, as shown below.

function App() {
    return (
        <div>
            <HelloComponent />
        </div>
    )
}

Notice that we use the component returned by the dynamic(...) function call so that when the App component is rendered, the HelloComponent component in the ../components/hello file is loaded.

Named exports

Next.js supports named exports when we are trying to code-split a component from a file that is not exported by default.

// src/components/hello.js
function HelloComponent() {
    return (
        <div>Hello!!</div>
    )
}

export HelloComponent

Here, HelloComponent is not exported by default. To import HelloComponent with the dynamic import() from the src/components/hello.js file, we use named exports.

import dynamic from 'next/dynamic'

const HelloComponent = dynamic(() => import('../components/hello').then((module) => module.HelloComponent))

To use named exports in the dynamic import() function, we resolve the Promise returned by import(), then use the resolved value module to access the component HelloComponent and return it.

Loading effect

With what we have done so far, the user will not see any visual cue when the code-split component chunk is being loaded. This is a bad UIUser Interface design because we must give the users a cue if something is being loaded and will be rendered soon.

We will have to add loading effects like Loading.... To do this, we pass a second argument to the dynamic() function. This second argument is an object. We set a loading property in the object with a function value that returns an HTML. This HTML will be the loading visual cue that will be shown when the code split is being loaded.

import dynamic from 'next/dynamic'

const HelloComponent = dynamic(() => import('../components/hello'), { loading: () => <b>Loading...</b> })

Here, we set our loading effect to show <b>Loading...</b> when HelloComponent is being loaded.

We can set it to a loading effect of our choice.

Conclusion

First, we learned what code-splitting is and what it brings to the performance of frontend apps.

Next, we learned about how to use the Next.js dynamic import() function to code-split React components and how to use named exports.

Finally, we learned how to set a loading indicator to show when dynamic components are being loaded.