# Next.js Image Editor

Embed Editor works in Next.js with the App Router or the Pages Router. Its React entry starts with 'use client', so a server component can render EmbedEditor directly: the server sends an empty host and the editor mounts in the browser after hydration, with no hydration warning.

## Add It to Your Next.js App

Free is on public npm, with no key. Lite and Full install from the private registry with your license key: put the two lines in your project's .npmrc, keep the key in an environment variable, then install by name.

### Free

```bash
npm install @embededitor/free
```

```tsx
'use client';

import { EmbedEditor } from '@embededitor/free/react';

const PhotoEditor = ({ src }: { src: string }) => (
  <div style={{ height: 600 }}>
    <EmbedEditor
      onProcess={({ dest }) => {
        console.info('saved', dest.name);
      }}
      src={src}
    />
  </div>
);

export default PhotoEditor;
```

### Lite

```ini
@embededitor:registry=https://get.embededitor.com/
//get.embededitor.com/:_authToken=${EMBED_EDITOR_KEY}
```

```bash
npm install @embededitor/lite
```

```tsx
'use client';

import { EmbedEditor } from '@embededitor/lite/react';

const PhotoEditor = ({ src }: { src: string }) => (
  <div style={{ height: 600 }}>
    <EmbedEditor
      onProcess={({ dest }) => {
        console.info('saved', dest.name);
      }}
      src={src}
    />
  </div>
);

export default PhotoEditor;
```

### Full

```ini
@embededitor:registry=https://get.embededitor.com/
//get.embededitor.com/:_authToken=${EMBED_EDITOR_KEY}
```

```bash
npm install @embededitor/full
```

```tsx
'use client';

import { EmbedEditor } from '@embededitor/full/react';

const PhotoEditor = ({ src }: { src: string }) => (
  <div style={{ height: 600 }}>
    <EmbedEditor
      onProcess={({ dest }) => {
        console.info('saved', dest.name);
      }}
      src={src}
    />
  </div>
);

export default PhotoEditor;
```

## The Editor You Just Installed

The Full edition with the embededitor.com badge, running in your browser. Photo by [Aron Van de Pol](https://unsplash.com/photos/red-double-decker-bus-passing-palace-of-westminster-london-during-daytime-tZDtyUrYrFU) on Unsplash.

## What Changes in Next.js

- A Server Component Can Render It: The entry is marked as a client module, so a page.tsx can render EmbedEditor with no wrapper. A server component can pass only serializable props.
- Callbacks Need a Client Component: onProcess and onClose are functions, and functions do not cross from a server component. Put the editor in a file that starts with 'use client', as the code above does.
- Safe Areas on a Phone: Export the viewport from the root layout with viewportFit: 'cover', so the editor knows about the notch and the home indicator.
- The Server Renders an Empty Host: The server render holds only <div data-ee-host="">. Anything that opens the editor from code (openEditor, mountEditor) belongs in an event handler or an effect.

## The Props You Will Use Most

- [src](https://docs.embededitor.com/api-reference/props#source): A public path such as /photos/sunset.jpg works from a server component, since a string is serializable.
- [layout](https://docs.embededitor.com/api-reference/props#layout): 'page' covers the whole viewport as the page itself, and the page behind it does not scroll.
- [onProcess](https://docs.embededitor.com/api-reference/props#callbacks): Receives the saved File and the state.
- [onClose](https://docs.embededitor.com/api-reference/props#callbacks): Given, it closes the editor on Escape (closeOnEscape) as well as from the Close button, which shows only then.

[Every prop in the docs](https://docs.embededitor.com/api-reference/props)

## Next.js Questions

### Can I render the editor from a server component?

Yes, with serializable props. The React entry starts with 'use client', so a server component can render EmbedEditor directly.

### Does it cause hydration warnings?

No. The server sends only an empty host element, and the editor mounts in the browser after hydration.

### Does it work with the Pages Router and Turbopack?

Yes, the same way: the page renders the empty host on the server and the editor after hydration. It was verified with Next.js 14.2 on webpack and 16.3 on Turbopack.

### Why does a call to openEditor fail on the server?

openEditor and mountEditor touch the DOM, so call them from an event handler or an effect, never during a server render. Importing either entry on the server touches nothing of window, document or navigator.

## Set it up for Next.js in the playground.

Change the edition, the colors, the tools and the crop, and copy the code for your app.

[Open in the Playground](https://embededitor.com/playground#c=eyJlZGl0aW9uIjoiRlVMTCIsImZyYW1ld29yayI6Ik5FWFRKUyJ9)