Setting up Pintura Image Editor with NextJS
For a quick start use the NextJS example project included in the product package as a guideline (
'/presets/nextjs'). 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
Adjusting the next.config.js file
When using NextJS 13 we need to set the
swcMinify property to
false as it somehow results in a client-side error, NextJS will then fallback to Terser. Investigation ongoing.
The next part is only needed on NextJS version 12 and lower.
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();
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