# Setting up Pintura Image Editor with NextJS

For a quick start use the [NextJS example project](https://github.com/pqina/pintura-example-nextjs) 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](../react/), 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

```js
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](https://github.com/swc-project/swc/issues/6780), the JavaScript compressor used by NextJS. This is fixed v13.2.

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

```bash
npm i next-transpile-modules --save
```

Then we edit the config file as shown below.

```js
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](https://github.com/pqina/pintura-example-nextjs) defines a dark and light theme.

```css
/* 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.

```jsx
// 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](../../customization/adjust-styles/)

## 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](../../api/image-editor/)