How to use Polotno Design editor with Next.js framework?
Create an isolated React component for all Polotno-related UI.
Put that component inside
components
folder. Or it can be another folder.
⚠️ Important: avoid usingpages
orapp
folders.Use dynamic import for that component. It will help to avoid SSR errors. https://nextjs.org/docs/advanced-features/dynamic-import
In some versions of next.js you may need to set up
next.config.js
to make it work:
If you use turbopack you may need to create an empty file called empty.js
and use this config to disable canvas module loading:
Note: polotno is not designed for Server-Side Rendering. Most of its modules are browser-only. This is why we need to move the editor component out of pages
or app
folder. Otherwise, Next.js will try to render it on the server and it will fail.