v8.82.6

Setting up Pintura Image Editor with NextJS

For a quick start use the NextJS example project as a guideline.

It includes a normal, modal, and overlay editor example as well as an integration of FilePond and Pintura Image Editor.

For the most part the NextJS installation process is the same as the React installation process, we only have to make a couple additional adjutments to the next.config.js file.

Adjusting the next.config.js file

NextJS versions v13.2 and newer

We have to instruct NextJS to transpile the Pintura library, we can do so like this

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

NextJS versions before v13.2

When using NextJS 13 we need to set the swcMinify property to false as it results in a client-side error, NextJS will then fallback to Terser. This is caused by a bug in SWC, the JavaScript compressor used by NextJS. This is fixed v13.2.

We have to install next-transpile-module to transpile the Pintura modules.

npm i next-transpile-modules --save

Then we edit the config file as shown below.

const withTM = require('next-transpile-modules')([
    '@pqina/pintura',
    '@pqina/react-pintura',
]);

module.exports = withTM({
    swcMinify: false,
});

Please make sure all your NextJS plugins are at their latest versions.

Using CSS Modules to style Pintura

This small theme module from the NextJS example project defines a dark and light theme.

/* index.module.css */
.index :global .pintura-editor {
    --color-background: 255, 255, 255;
    --color-foreground: 10, 10, 10;
}

@media (prefers-color-scheme: dark) {
    .index :global .pintura-editor {
        --color-background: 10, 10, 10;
        --color-foreground: 255, 255, 255;
    }
}

Now we import the index CSS Module and combine it with the Pintura CSS module.

// index.js
import { pintura } from '@pqina/pintura/pintura.module.css';
import { index as pinturaTheme } from './index.module.css';

export default function Page() {
    return <PinturaEditor className={`${pintura} ${pinturaTheme}`} />;
}

More information on styling Pintura

Next steps

With the editor set up, we can continue to configure the editor to our liking by adjusting the available options exposed by the editor API