Integration with Next.js framework

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;

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>
  );
}