<div id="readability-page-1" class="page"><div id="main-title">
 <a href="https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy36239jiswrmr8uoha4z.png">
 <img src="https://media.dev.to/cdn-cgi/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy36239jiswrmr8uoha4z.png" width="1000" height="420" alt="Cover image for How to integrate plotly.js on Next.js 14 with App Router">
 </a>

 <div>
 <a href="/composite"><img src="https://media.dev.to/cdn-cgi/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F201866%2F5014b724-95d6-43af-8561-79a14911a196.png" width="40" height="40" alt="Composite"></a>
 
 
 </div>
 </div><div data-article-id="1867550" id="article-body">
 I remember struggling quite a bit with integrating the plotly.js library into Next.js in the past. 
However, now with Next.js 14 and the use of app routers, I've had to do it all over again, but this time the pain was quite painful. 
Eventually I got over it, and today I'm going to share my experience with you, along with a few tips on how to integrate plotly.js into next.js.

Add the plotly.js library to your existing environment.
<h2>
 <a name="install-plotlyjs" href="#install-plotlyjs">
 </a>
 Install plotly.js
</h2>


<div>
<pre><code>npm i -S plotly.js
# or
yarn add plotly.js
# or
pnpm add plotly.js
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>


If you're using Typescript, you can't forget about type definitions. 


<div>
<pre><code>npm i -D @types/plotly.js
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



If you felt something strange, yes, you're right, plotly.js has a React wrapper. But, it hasn't been updated anymore since 2 years ago, and I don't install it because I personally felt a lot of discomfort in the Typescript environment when I first developed it. 
If you still want to install it, you can do so. However, I'm going to skip the React wrapper part and create a very simple wrapper component.
<h2>
 <a name="use-plotlyjs" href="#use-plotlyjs">
 </a>
 Use plotly.js
</h2>

Of course, the plotly.js library is completely browser-specific, so build errors will be waiting for you the moment you import it and start using it. 
So, the react-plotly's issue suggests using it as follows: 


<div>
<pre><code>import dynamic from 'next/dynamic'

export const Plotly = dynamic(() =&gt; import('react-plotly.js'), { ssr: false });
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



The reason why the react-plotly component doesn't work despite the <code>'use client'</code> directive is because it's a class component, and it was designed from the ground up assuming a browser. As if that weren't bad enough, now that I'm not touching anything but JS libraries, I'm starting to feel self-conscious about why I'm using this when there are actually better charting libraries out there.

Now, let's get back to business. Here's the simple wrapper component I created. 


<div>
<pre><code>export const Plotly = dynamic(
 () =&gt;
 import('plotly.js/dist/plotly.js').then(({ newPlot, purge }) =&gt; {
 const Plotly = forwardRef(({ id, className, data, layout, config }, ref) =&gt; {
 const originId = useId();
 const realId = id || originId;
 const originRef = useRef(null);
 const [handle, setHandle] = useState(undefined);

 useEffect(() =&gt; {
 let instance;
 originRef.current &amp;&amp;
 newPlot(originRef.current!, data, layout, config).then((ref) =&gt; setHandle((instance = ref)));
 return () =&gt; {
 instance &amp;&amp; purge(instance);
 };
 }, [data]);

 useImperativeHandle(
 ref,
 () =&gt; (handle ?? originRef.current ?? document.createElement('div')),
 [handle]
 );

 return &lt;div id={realId} ref={originRef} className={className}&gt;&lt;/div&gt;;
 });
 Plotly.displayName = 'Plotly';
 return Plotly;
 }),
 { ssr: false }
);
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



Is the import path weird? No, this is the import path used by the <a href="https://github.com/plotly/react-plotly.js/blob/master/src/react-plotly.js#L2">react-plotly source</a>.

Anyway, apply the component like this, and you're done. 


<div>
<pre><code>&lt;div&gt;
 &lt;Plotly
 style={{ width: '640px', height: '480px' }}
 data={[{ x: [1, 2, 3, 4, 5], y: [1, 2, 4, 8, 16] }]}
 layout={{ margin: { t: 0 } }}
 /&gt;
&lt;/div&gt;
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



But if you're using Typescript, there's still one problem.

<h2>
 <a name="make-typescript-friendly" href="#make-typescript-friendly">
 </a>
 Make typescript friendly
</h2>

If you specify an import path like <code>import('plotly.js/dist/plotly.js')</code>, Typescript will fail to import the type. The reason for this is simple. It's because the type definition is based on the default path, <code>import('plotly.js')</code>.

There are two ways to fix the problem.

<ol>
<li>Create a <code>d.ts</code> file that duplicates the default types in the path <code>'plotly.js/dist/plotly.js'</code>.</li>
<li>include webpack resolve alias to bypass it (included when using turbopack)</li>
</ol>

I used method #2 because it also solved the build error.

Now let's touch the <code>next.config.js</code> file, which in my case was based on <code>next.config.mjs</code>. 


<div>
<pre><code>import path from 'node:path';

/** @type {import('next').NextConfig} */
const nextConfig = {
 reactStrictMode: true,
 swcMinify: true,
 output: 'standalone',
 images: {},
 ...bundleOptions(),
};

export default nextConfig;

function bundleOptions() {
 const resolvers = {
 'plotly.js': 'plotly.js/dist/plotly.js'
 }

 if (process.env.TURBOPACK) // If you are using dev with --turbo
 return {
 experimental: {
 turbo: {
 resolveAlias: {
 ...resolvers
 }
 },
 },
 };
 else return { // otherwise, for webpack
 webpack: (config) =&gt; {
 for (const [dep, to] of Object.entries(resolvers))
 config.resolve.alias[dep] = path.resolve(
 config.context,
 to
 );
 return config;
 },
 };
}

</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



Now you can modify the import path in the wrapper component as you would normally import it. 


<div>
<pre><code>- import('plotly.js/dist/plotly.js').then(({ newPlot, purge }) =&gt; {
+ import('plotly.js').then(({ newPlot, purge }) =&gt; {
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>



Then, fix the required types for typescript, and voila!

Done. Congratulations. You can now use plotly.js in Next.js!

<h2>
 <a name="conculusion" href="#conculusion">
 </a>
 Conculusion
</h2>

I chose plotly.js over several popular charting libraries, especially the feature-rich Apache ECharts, because my company's algorithmic research team uses Python, and the plotly Python library is available, which is an advantage for exchanging chart data and layouts.

I hope I'm not wrong in my choice for this web application product development. lol

Happy Next.js-ing~!


 </div></div>

Ukjin Yang

I remember struggling quite a bit with integrating the plotly.js library into Next.js in the past.
Add the plotly.js library to your existing environment.
npm i -S plotly.js
# or
yarn add plotly.js
# or
pnpm add plotly.js
If you're using Typescript, you can't forget about type definitions.
npm i -D @types/plotly.js
If you felt something strange, yes, you're right, plotly.js has a React wrapper. But, it hasn't been updated anymore since 2 years ago, and I don't install it because I personally felt a lot of discomfort in the Typescript environment when I first developed it.
Of course, the plotly.js library is completely browser-specific, so build errors will be waiting for you the moment you import it and start using it.
import dynamic from 'next/dynamic'
export const Plotly = dynamic(() => import('react-plotly.js'), { ssr: false });
The reason why the react-plotly component doesn't work despite the 'use client' directive is because it's a class component, and it was designed from the ground up assuming a browser. As if that weren't bad enough, now that I'm not touching anything but JS libraries, I'm starting to feel self-conscious about why I'm using this when there are actually better charting libraries out there.
Now, let's get back to business. Here's the simple wrapper component I created.
export const Plotly = dynamic(
 () =>
 import('plotly.js/dist/plotly.js').then(({ newPlot, purge }) => {
 const Plotly = forwardRef(({ id, className, data, layout, config }, ref) => {
 const originId = useId();
 const realId = id || originId;
 const originRef = useRef(null);
 const [handle, setHandle] = useState(undefined);
 useEffect(() => {
 let instance;
 originRef.current &&
 newPlot(originRef.current!, data, layout, config).then((ref) => setHandle((instance = ref)));
 return () => {
 instance && purge(instance);
 };
 }, [data]);
 useImperativeHandle(
 ref,
 () => (handle ?? originRef.current ?? document.createElement('div')),
 [handle]
 );
 return <div id={realId} ref={originRef} className={className}></div>;
 });
 Plotly.displayName = 'Plotly';
 return Plotly;
 }),
 { ssr: false }
);
Is the import path weird? No, this is the import path used by the react-plotly source.
Anyway, apply the component like this, and you're done.
<div>
 <Plotly
 style={{ width: '640px', height: '480px' }}
 data={[{ x: [1, 2, 3, 4, 5], y: [1, 2, 4, 8, 16] }]}
 layout={{ margin: { t: 0 } }}
 />
</div>
But if you're using Typescript, there's still one problem.
If you specify an import path like import('plotly.js/dist/plotly.js'), Typescript will fail to import the type. The reason for this is simple. It's because the type definition is based on the default path, import('plotly.js').
There are two ways to fix the problem.
Create a d.ts file that duplicates the default types in the path 'plotly.js/dist/plotly.js'.
include webpack resolve alias to bypass it (included when using turbopack)
I used method #2 because it also solved the build error.
Now let's touch the next.config.js file, which in my case was based on next.config.mjs.
import path from 'node:path';
/** @type {import('next').NextConfig} */
const nextConfig = {
 reactStrictMode: true,
 swcMinify: true,
 output: 'standalone',
 images: {},
 ...bundleOptions(),
};
export default nextConfig;
function bundleOptions() {
 const resolvers = {
 'plotly.js': 'plotly.js/dist/plotly.js'
 }
 if (process.env.TURBOPACK) // If you are using dev with --turbo
 return {
 experimental: {
 turbo: {
 resolveAlias: {
 ...resolvers
 }
 },
 },
 };
 else return { // otherwise, for webpack
 webpack: (config) => {
 for (const [dep, to] of Object.entries(resolvers))
 config.resolve.alias[dep] = path.resolve(
 config.context,
 to
 );
 return config;
 },
 };
}
Now you can modify the import path in the wrapper component as you would normally import it.
- import('plotly.js/dist/plotly.js').then(({ newPlot, purge }) => {
+ import('plotly.js').then(({ newPlot, purge }) => {
Then, fix the required types for typescript, and voila!
Done. Congratulations. You can now use plotly.js in Next.js!
I chose plotly.js over several popular charting libraries, especially the feature-rich Apache ECharts, because my company's algorithmic research team uses Python, and the plotly Python library is available, which is an advantage for exchanging chart data and layouts.
I hope I'm not wrong in my choice for this web application product development. lol
Happy Next.js-ing~!

How to integrate plotly.js on Next.js 14 with App Router

댓글