From c5cfbed28ce6d47e72ec7c227687153d38129f1c Mon Sep 17 00:00:00 2001
From: Jan <72730682+JanTrichter@users.noreply.github.com>
Date: Tue, 17 Oct 2023 21:25:49 +0200
Subject: [PATCH] add info about dynamic imports to nextjs docs (#1564)

* add info about dynamic imports to nextjs docs

* remove warning
---
 docs/guide/packages/lucide-react.md | 18 +++++++++++++++---
 packages/lucide-react/README.md     | 18 +++++++++++++++---
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/docs/guide/packages/lucide-react.md b/docs/guide/packages/lucide-react.md
index 7c8782e304e..36bcf4858ac 100644
--- a/docs/guide/packages/lucide-react.md
+++ b/docs/guide/packages/lucide-react.md
@@ -99,8 +99,6 @@ export default App;
 
 #### With Dynamic Imports
 
-> :warning: This is experimental and only works with bundlers that support dynamic imports.
-
 Lucide react exports a dynamic import map `dynamicIconImports`, which is useful for applications that want to show icons dynamically by icon name. For example, when using a content management system with where icon names are stored in a database.
 
 When using client side rendering, it will fetch the icon component when it's needed. This will reduce the initial bundle size.
@@ -134,7 +132,21 @@ export default Icon
 
 ##### NextJS Example
 
-In NextJS [the dynamic function](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic) can be used to load the icon component dynamically.
+In NextJS, [the dynamic function](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic) can be used to dynamically load the icon component.
+
+To make dynamic imports work with NextJS, you need to add `lucide-react` to the [`transpilePackages`](https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages) option in your `next.config.js` like this:
+
+```js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['lucide-react'] // add this
+}
+
+module.exports = nextConfig
+
+```
+
+You can then start using it:
 
 ```tsx
 import dynamic from 'next/dynamic'
diff --git a/packages/lucide-react/README.md b/packages/lucide-react/README.md
index 36da825facf..10a9b33d781 100644
--- a/packages/lucide-react/README.md
+++ b/packages/lucide-react/README.md
@@ -73,8 +73,6 @@ export default Icon;
 
 #### With Dynamic Imports
 
-> :warning: This is experimental and only works with bundlers that support dynamic imports.
-
 Lucide react exports a dynamic import map `dynamicIconImports`. Useful for applications that want to show icons dynamically by icon name. For example when using a content management system with where icon names are stored in a database.
 
 When using client side rendering, it will fetch the icon component when it's needed. This will reduce the initial bundle size.
@@ -108,7 +106,21 @@ export default Icon
 
 ##### NextJS Example
 
-In NextJS [the dynamic function](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic) can be used to load the icon component dynamically.
+In NextJS, [the dynamic function](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic) can be used to dynamically load the icon component.
+
+To make dynamic imports work with NextJS, you need to add `lucide-react` to the [`transpilePackages`](https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages) option in your `next.config.js` like this:
+
+```js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['lucide-react'] // add this
+}
+
+module.exports = nextConfig
+
+```
+
+You can then start using it:
 
 ```tsx
 import dynamic from 'next/dynamic'