---
title: turbopackLazyDynamicImports
description: Compile client-side dynamic imports when they are first requested during development.
url: "https://nextjs.org/docs/app/api-reference/config/next-config-js/turbopackLazyDynamicImports"
docs_index: /docs/llms.txt
lastUpdated: 2026-10-06
badge: "Experimental"
prerequisites:
  - "Configuration: /docs/app/api-reference/config"
  - "next.config.js: /docs/app/api-reference/config/next-config-js"
related:
  - /docs/app/api-reference/config/next-config-js/turbopackLazyDynamicImportsSSR
---

> For an index of all documentation, see [/docs/llms.txt](/docs/llms.txt).

The `experimental.turbopackLazyDynamicImports` option defers compiling client-side dynamic `import()` targets until the browser first requests them during `next dev`.

**TypeScript**

```ts highlight={5} title="next.config.ts" 
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    turbopackLazyDynamicImports: true,
  },
}

export default nextConfig
```

**JavaScript**

```js highlight={4} title="next.config.js" 
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbopackLazyDynamicImports: true,
  },
}

module.exports = nextConfig
```

## How it works

With `turbopackLazyDynamicImports` enabled, Turbopack waits to compile the target of a client-side dynamic `import()` until the browser requests its chunk. Code that the application never imports remains uncompiled during the development session.

For example, the module in this Client Component is compiled when the visitor selects the button:

**TypeScript**

```tsx title="app/greeting-button.tsx" 
'use client'

import { useState } from 'react'

export function GreetingButton() {
  const [message, setMessage] = useState('')

  async function showGreeting() {
    const { getGreeting } = await import('./get-greeting')
    setMessage(getGreeting('Ada'))
  }

  return (
    <>
      <button onClick={showGreeting}>Show greeting</button>
      <p>{message}</p>
    </>
  )
}
```

**JavaScript**

```jsx title="app/greeting-button.js" 
'use client'

import { useState } from 'react'

export function GreetingButton() {
  const [message, setMessage] = useState('')

  async function showGreeting() {
    const { getGreeting } = await import('./get-greeting')
    setMessage(getGreeting('Ada'))
  }

  return (
    <>
      <button onClick={showGreeting}>Show greeting</button>
      <p>{message}</p>
    </>
  )
}
```

> **Good to know:**
>
> - The option defaults to `false` and only affects Turbopack during `next dev`. It does not change production builds.
> - Errors in a deferred module appear when Turbopack first compiles that module.
> - Some [`next/dynamic`](/docs/app/guides/lazy-loading#nextdynamic) targets are still compiled eagerly.
> - To defer dynamic imports reached while rendering Client Components on the server, use [`turbopackLazyDynamicImportsSSR`](/docs/app/api-reference/config/next-config-js/turbopackLazyDynamicImportsSSR).

## Version History

| Version   | Changes                                                                |
| --------- | ---------------------------------------------------------------------- |
| `v16.4.0` | `experimental.turbopackLazyDynamicImports` configuration option added. |

- [turbopackLazyDynamicImportsSSR](/docs/app/api-reference/config/next-config-js/turbopackLazyDynamicImportsSSR): Compile dynamic imports when server rendering first reaches them during development.

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/docs/llms.txt](/docs/llms.txt)