Next.js

How to use Polotno Design editor with Next.js framework?​

1. Create an isolated React component for all Polotno-related UI.

2. Put that component inside components folder. Or it can be another folder.
   ⚠️ Important: avoid using pages or app folders.

3. Use dynamic import for that component. It will help to avoid SSR errors. https://nextjs.org/docs/advanced-features/dynamic-import

4. In some versions of next.js you may need to set up next.config.js to make it work:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.externals = [...config.externals, { canvas: 'canvas' }]; // required to make Konva & react-konva work
    return config;
  },
};

module.exports = nextConfig;

If you use turbopack you may need to create an empty file called empty.js and use this config to disable canvas module loading:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      resolveAlias: {
        canvas: { browser: './empty.js' },
      },
    },
  },
};

export default nextConfig;

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.

import dynamic from 'next/dynamic';
const Editor = dynamic(() => import('../components/editor'), {
  ssr: false,
});

export default function IndexPage() {
  return (
    <div>
      <Editor />
    </div>
  );
}