Pintura NextJS example project

Run npm install to install project dependencies, then run npm start to start the development server.

Navigate to http://localhost:3000 to view the project.

Please note that for some reason this project won't run on StackBlitz, it will run fine locally.

License

This projects uses a test version of Pintura. This version of Pintura will show a watermark in the editor and on generated images.

Purchase a license at https://pqina.nl/pintura to use Pintura in production.

Transpiling packages

With version 13.1+ of NextJS we can add the following to the next.config.js file:

module.exports = {
  transpilePackages: ["@pqina/pintura", "@pqina/react-pintura"],
};

NextJS < 13.1

For older versions we need the "next-transpile-modules" package (see vercel/next.js#706, and vercel/next.js#31518).

https://github.com/martpie/next-transpile-modules

npm i next-transpile-modules --save

And add or adjust the next.config.js file like this:

// next.config.js
const withTM = require("next-transpile-modules")([
  "@pqina/pintura",
  "@pqina/react-pintura",
]);
module.exports = withTM({
  // NextJS config
});

Additionally we need to disable swcMinify as it contains a bug when compiling certain JavaScript code, see: swc-project/swc#6780

// next.config.js
const withTM = require("next-transpile-modules")([
  "@pqina/pintura",
  "@pqina/react-pintura",
]);
module.exports = withTM({
  // For NextJS 13
  swcMinify: false,
});

Alternative solution

Alternatively we can wrap the Pintura component and load it dynamically.

// dynamic-pintura-editor.js
import { PinturaEditor } from "@pqina/react-pintura";

export default function (props) {
  return <PinturaEditor {...props} />;
}

How to import the component.

// index.js
import dynamic from "next/dynamic";

const PinturaEditor = dynamic(() => import("./dynamic-pintura-editor"), {
  ssr: false,
});