How to Add a Rich Text Editor in Next.js 2026 (Complete 10-Minute Guide)

How to Add a Rich Text Editor in Next.js 2026 (Complete 10-Minute Guide)

How to add a rich text editor in Next.js has become the single most-searched developer question in 2026 — and the answer changed significantly this year.

Next.js 15 stabilised in 2026. Server Actions became the recommended save pattern (replacing Route Handlers for most cases). Turbopack shipped stable dev + build. Partial Prerendering matured. React 19 became the default. And most rich text editor tutorials from 2023-2024 now break Server Component patterns, throw hydration errors, or miss Next.js 15's new APIs entirely.

This guide fixes all of that. In 10 minutes, you ship a production-ready editor using Next.js 15 App Router patterns. Server Component fetches data. Client Component renders editor. Server Action handles saves. Three steps. Real working code. No wrappers, no hacks.

What Changed in Next.js in 2026 (Why This Guide Matters)

Six Next.js shifts made editor integration more consequential this year:

If you last integrated an editor in Next.js before 2026, your patterns predate Server Actions + after() API — the two most important App Router additions this year.

What You Get in 10 Minutes

Why Next.js Makes Editor Choice Tricky in 2026

Next.js 14 and 15 have specific rules that break most editors:

• ⚡ Server Components run by default — editors need window and document, which servers don't have
• 🎯 React 19 concurrent rendering — old wrapper-based editors throw errors
• 📉 Core Web Vitals affect SEO rankings — bundles over 400 KB drop your search position
• 🔒 Edge runtimes have restrictions — Node-only editors break on Vercel Edge
• 🚀 Server Actions preferred over Route Handlers — old fetch patterns are legacy

The editor we'll use — Eddyter — was built specifically for these constraints. Built on Meta's Lexical framework (same as WhatsApp Web and Facebook Messenger). Ships in 10 minutes instead of 3 hours.

What This Tutorial Covers

• ✅ 3-step setup — install, add API key, render editor
• ✅ Working code — copy-paste ready for Next.js 14 and 15
• ✅ Server Actions save pattern — Next.js 15 recommended approach
• ✅ Route Handlers pattern — alternative for streaming/API needs
• ✅ Server Component + Client Component split — proper App Router
• ✅ Load existing content — for editing existing posts
• ✅ 7 common issues fixed — hydration errors, CSS paths, env vars, more
• ✅ Production checklist — verify before shipping
• ✅ AI tool prompt — for Cursor, Claude Code, Lovable users

If you already know you want the code, jump to Step 1 — Get Your API Key or the Complete Working Component.

🎥 Prefer to watch? See the full Next.js integration: Integrate Eddyter in 30 Minutes with Cursor, Claude, Lovable

Prerequisites

Before we start, you need:

• A Next.js 14 or 15 project (npx create-next-app@latest)
• Node.js 20 or newer (Next.js 15 minimum)
• React 18.2+ or 19.x (included by default)
• A code editor (Cursor, VS Code, or similar)

No special setup. Works with App Router (recommended) and Pages Router.

<a id="step-1"></a>

Step 1 — Get Your Eddyter API Key

Eddyter is an AI-powered WYSIWYG editor built on Meta's Lexical framework. Ships as a complete production-ready editor with AI, tables, slash commands, and clean HTML — all built in.

Grab your API key:

1. Sign up at eddyter.com — real free tier available
2. Open your License Page
3. Copy your API key

Add it to .env.local in your project root:

bash

1
2
# .env.local
NEXT_PUBLIC_EDDYTER_API_KEY=your-api-key-here

Use the NEXT_PUBLIC_ prefix. The editor runs in the browser, so the key needs client-side access. Standard Next.js pattern.

🎥 New to Eddyter? Watch: What is Eddyter? Why Developers Are Switching in 2026

Step 2 — Install Eddyter

Install with your preferred package manager:

bash

1
npm install eddyter

Or:

bash

1
2
3
yarn add eddyter
# or
pnpm add eddyter

That's the only dependency you need. Eddyter runs on React 18.2+ or 19.x — both standard in Next.js 14/15.

<a id="complete-component"></a>

Step 3 — Create the Editor Component (Client Component)

Create components/Editor.tsx:

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
"use client";
import {
  ConfigurableEditorWithAuth,
  EditorProvider
} from 'eddyter';
import 'eddyter/style.css';
interface EditorProps {
  initialContent?: string;
  onChange?: (html: string) => void;
}
export default function Editor({ initialContent, onChange }: EditorProps) {
  const apiKey = process.env.NEXT_PUBLIC_EDDYTER_API_KEY ?? '';
  const handleChange = (html: string): void => {
    onChange?.(html);
  };
  return (
    <EditorProvider>
      <ConfigurableEditorWithAuth
        apiKey={apiKey}
        initialContent={initialContent}
        onChange={handleChange}
      />
    </EditorProvider>
  );
}

TypeScript strict mode compatible. Props typed. Clean pattern.

The 4 Things Every Next.js Dev Should Know About This Code

1. The "use client" Directive

The first line tells Next.js this is a Client Component. Rich text editors need browser APIs — they must run in the browser, not the server. Standard Next.js App Router pattern.

2. The CSS Import Path

import 'eddyter/style.css' — not eddyter/dist/style.css. AI coding tools like Cursor sometimes autocomplete the wrong path. Watch for this.

3. The Provider Wrapper

ConfigurableEditorWithAuth must sit inside EditorProvider. The provider handles context, auth, and config.

4. HTML Output via onChange

The editor gives you clean HTML through onChange. Log it, save it to state, POST it via Server Action, or stream it to your backend.

For advanced config (toolbar customization, theming, read-only mode), see the Eddyter documentation.

Step 4 — Use the Editor in a Page (Next.js 15 App Router Pattern)

The proper Next.js 15 pattern separates Server Component (fetches data) from Client Component (renders editor):

Server Component — app/documents/[id]/page.tsx:

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// This is a Server Component (no "use client" directive)
import { db } from '@/lib/database';
import DocumentEditor from './DocumentEditor';
interface PageProps {
  params: Promise<{ id: string }>;
}
export default async function DocumentPage({ params }: PageProps) {
  const { id } = await params;  // Next.js 15 async params
  // Server fetches data
  const document = await db.query(
    'SELECT content FROM documents WHERE id = $1',
    [id]
  );
  return (
    <main>
      <h1>Edit Document</h1>
      <DocumentEditor
        documentId={id}
        initialContent={document?.content ?? ''}
      />
    </main>
  );
}

Client Component — app/documents/[id]/DocumentEditor.tsx:

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
"use client";
import { useState } from 'react';
import { saveDocument } from './actions';
import Editor from '@/components/Editor';
interface DocumentEditorProps {
  documentId: string;
  initialContent: string;
}
export default function DocumentEditor({
  documentId,
  initialContent
}: DocumentEditorProps) {
  const [content, setContent] = useState<string>(initialContent);
  const [saving, setSaving] = useState<boolean>(false);
  const [saved, setSaved] = useState<boolean>(false);
  const handleSave = async (): Promise<void> => {
    setSaving(true);
    setSaved(false);
    try {
      // Call Server Action directly (no fetch!)
      const result = await saveDocument(documentId, content);
      if (result.success) {
        setSaved(true);
        setTimeout(() => setSaved(false), 2000);
      }
    } catch (error) {
      console.error('Save failed:', error);
    } finally {
      setSaving(false);
    }
  };
  return (
    <div>
      <Editor
        initialContent={initialContent}
        onChange={(html) => setContent(html)}
      />
      <button
        onClick={handleSave}
        disabled={saving}
        className="save-button"
      >
        {saving ? 'Saving...' : saved ? 'Saved ✓' : 'Save'}
      </button>
    </div>
  );
}

Server Action — app/documents/[id]/actions.ts:

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
"use server";
import { db } from '@/lib/database';
import { revalidatePath } from 'next/cache';
import { after } from 'next/server';
interface SaveResult {
  success: boolean;
  error?: string;
}
export async function saveDocument(
  documentId: string,
  content: string
): Promise<SaveResult> {
  try {
    // Sanitize HTML (critical for security)
    const sanitized = sanitizeHTML(content);
    // Save to database
    await db.query(
      'UPDATE documents SET content = $1, updated_at = NOW() WHERE id = $2',
      [sanitized, documentId]
    );
    // Revalidate cache
    revalidatePath(`/documents/${documentId}`);
    // Next.js 15 after() API for background tasks (Next.js 15.1+)
    after(async () => {
      // Runs after response sent to user
      await sendSaveNotification(documentId);
      await updateSearchIndex(documentId, sanitized);
    });
    return { success: true };
  } catch (error) {
    console.error('Save error:', error);
    return {
      success: false,
      error: 'Failed to save document'
    };
  }
}

That's the modern Next.js 15 pattern: Server Component fetches → Client Component renders editor → Server Action saves. No fetch() calls needed. Zero API endpoints. Type-safe end-to-end.

Alternative: Route Handler Pattern (Legacy Compatible)

For teams needing traditional REST APIs (mobile apps, third-party integrations), use Route Handlers:

API Route — app/api/documents/[id]/route.ts:

typescript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { NextRequest, NextResponse } from 'next/server';
import { db } from '@/lib/database';
import { sanitizeHTML } from '@/lib/security';
interface Params {
  params: Promise<{ id: string }>;
}
export async function POST(request: NextRequest, { params }: Params) {
  const { id } = await params;
  const { content } = await request.json();
  const sanitized = sanitizeHTML(content);
  await db.query(
    'UPDATE documents SET content = $1 WHERE id = $2',
    [sanitized, id]
  );
  return NextResponse.json({ success: true });
}

Client Component (with Route Handler):

tsx

1
2
3
4
5
6
7
8
9
"use client";
async function handleSave(documentId: string, content: string) {
  const res = await fetch(`/api/documents/${documentId}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ content }),
  });
  return res.json();
}

Use Server Actions when possible (Next.js 15 recommended). Use Route Handlers when you need REST APIs for external clients.

Loading Existing Content With Server Components

The Server Component pattern shown above already handles this — data fetched on server, passed to Client Component as initialContent prop. Clean, type-safe, no client-side loading states needed.

For backward compatibility (Pages Router or older App Router), here's the client-side fetch pattern:

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
"use client";
import { useState, useEffect } from 'react';
import Editor from '@/components/Editor';
interface EditPostProps {
  postId: string;
}
export default function EditPost({ postId }: EditPostProps) {
  const [initialContent, setInitialContent] = useState<string | null>(null);
  useEffect(() => {
    async function loadPost(): Promise<void> {
      const res = await fetch(`/api/posts/${postId}`);
      const data = await res.json();
      setInitialContent(data.content);
    }
    loadPost();
  }, [postId]);
  if (initialContent === null) {
    return <p>Loading...</p>;
  }
  return (
    <Editor
      initialContent={initialContent}
      onChange={(html) => console.log('Updated:', html)}
    />
  );
}

The initialContent prop takes an HTML string. The editor manages its own state after mount — much better than trying to control it like a normal input.

Partial Prerendering With Editors (Next.js 15+)

Next.js 15's Partial Prerendering (PPR) lets you ship static shells with dynamic editor holes:

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// app/documents/[id]/page.tsx
import { Suspense } from 'react';
import DocumentEditor from './DocumentEditor';
export const experimental_ppr = true;  // Enable PPR
export default async function DocumentPage({ params }: PageProps) {
  const { id } = await params;
  return (
    <main>
      {/* Static content — prerendered */}
      <h1>Document Editor</h1>
      <nav>...</nav>
      {/* Dynamic editor — streamed */}
      <Suspense fallback={<div>Loading editor...</div>}>
        <DocumentEditor documentId={id} />
      </Suspense>
    </main>
  );
}

Static shell renders instantly. Editor streams in as data becomes ready. Best UX for editor-heavy pages.

7 Common Next.js Integration Issues (Fixed)

Even with a clean editor, Next.js can trip you up. Here are the fixes.

Issue 1: "ReferenceError: window is not defined"

Cause: Missing "use client" directive.

Fix: Add "use client" as the very first line:

tsx

1
2
3
4
5
6
"use client";
import {
  ConfigurableEditorWithAuth,
  EditorProvider
} from 'eddyter';
// ...

Issue 2: Hydration Mismatch Errors

Cause: Rare edge case with deep Server Component dependencies.

Fix: Use next/dynamic with ssr: false:

tsx

1
2
3
4
5
6
7
import dynamic from 'next/dynamic';
const Editor = dynamic(() => import('@/components/Editor'), {
  ssr: false,
});
export default function Page() {
  return <Editor />;
}

For 95% of Next.js setups, "use client" alone is enough. Only fall back to dynamic() if you see hydration errors in the console.

Issue 3: "Module not found: 'eddyter/dist/style.css'"

Cause: Wrong CSS import path. AI tools like Cursor sometimes autocomplete dist/ because other packages use it.

Fix: Use import 'eddyter/style.css' — no dist/.

Issue 4: API Key Undefined

Cause: Env variable isn't accessible in client-side code.

Fix: Prefix with NEXT_PUBLIC_:

bash

1
2
3
4
# .env.local — CORRECT
NEXT_PUBLIC_EDDYTER_API_KEY=your-key
# This won't work in Client Components:
EDDYTER_API_KEY=your-key

Restart your dev server after changing .env.local. Env vars bake in at build time.

Issue 5: Editor Not Updating After State Change

Cause: You're trying to control the editor with a value prop.

Fix: Eddyter uses initialContent (not value) for preloading. The editor manages its own state after mount. Trying to fully control a rich text editor's state causes cursor jumping and performance problems.

Issue 6: TypeScript Errors

Cause: TypeScript can't find Eddyter's types.

Fix: Eddyter ships with built-in types. Make sure tsconfig.json includes:

json

1
2
3
4
5
6
7
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "strict": true
  }
}

Next.js 15 defaults to "bundler" module resolution. If you're on older Next.js versions, use "node" instead.

Issue 7: Turbopack Errors

Cause: Some legacy packages don't work with Turbopack (Next.js 15 default dev bundler).

Fix: Eddyter is Turbopack-compatible. If you see Turbopack errors, ensure you're on latest Eddyter:

bash

1
npm install eddyter@latest

If issues persist, fall back to Webpack:

bash

1
2
# next dev without --turbo flag uses Webpack
next dev

How to Customize Your Next.js Editor

The default setup ships a complete editor. Customize when you need to:

• Toolbar position — sticky or static
• Toolbar buttons — show/hide specific features
• Theming — CSS variables on .eddyter-scope to match your brand
• Custom auth — validate API keys against your backend
• Read-only mode — display content without editing
• Preview mode — mode="preview" for non-editable previews
• Character limits — max content length for user submissions

Full customization API in the Eddyter documentation.

Ship Even Faster With AI Coding Tools

If you're using Cursor, Claude Code, or Lovable, the integration goes even faster. Eddyter's clean 3-step API was built to be AI-tool-friendly.

Try this prompt:

1
2
3
4
5
6
7
8
9
10
11
Integrate the Eddyter WYSIWYG editor into my Next.js 15 App Router app.
Requirements:
- Use Server Component + Client Component split
- Client Component: "use client" directive at top
- Import ConfigurableEditorWithAuth and EditorProvider from 'eddyter'
- Import 'eddyter/style.css'
- Get API key from process.env.NEXT_PUBLIC_EDDYTER_API_KEY
- Type all props with TypeScript strict mode
- Use Server Actions for saving (not Route Handlers)
- Include revalidatePath after save
Reference: https://eddyter.com/docs

For deeper AI tool integration, see How to Add a Rich Text Editor with Lovable, Bolt, and Cursor (2026).

Production Checklist

Before shipping to production, verify:

• ✅ API key stored in .env.local with NEXT_PUBLIC_ prefix
• ✅ Editor component has "use client" as first line
• ✅ CSS import path is eddyter/style.css (not dist/)
• ✅ HTML content sanitized before rendering (DOMPurify) — see Rich Text Editor Security Guide 2026
• ✅ Server Action or Route Handler handles saves
• ✅ Loading states show during saves
• ✅ Error handling for failed saves
• ✅ Toast notifications for save confirmations
• ✅ Content Security Policy allows Eddyter's API domain
• ✅ revalidatePath() called after save to update cache
• ✅ after() API used for background tasks (Next.js 15.1+)
• ✅ Turbopack compatibility verified in production build
• ✅ Core Web Vitals tested (LCP, CLS, INP) — see Rich Text Editor Performance Benchmarks 2026
• ✅ Accessibility tested (WCAG 2.1 AA) — see Rich Text Editor Accessibility Guide 2026
• ✅ Upgraded to paid plan if past free tier limits (100 loads/mo)

Takes 15-30 minutes to verify before launch.

Why Eddyter Wins for Next.js in 2026

Looking at what we just built, here's why Eddyter is the right pick for Next.js:

• ✅ 3-step integration — under 10 minutes
• ✅ Native React 18.2+/19.x — no wrappers, no shims
• ✅ App Router native — Server Component + Client Component patterns clean
• ✅ Server Actions compatible — modern Next.js 15 save pattern
• ✅ Turbopack compatible — fast dev builds
• ✅ Partial Prerendering ready — static shell + dynamic editor
• ✅ Lightweight (~140 KB) — protects Core Web Vitals
• ✅ TypeScript-first strict mode — full types out of the box
• ✅ AI built in — GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3
• ✅ Advanced features — tables, slash commands, drag-and-drop
• ✅ Clean HTML output — semantic, SEO-friendly
• ✅ 7 frameworks supported — React, Next.js, Vue 3, Angular 17-20, Svelte 4/5, Laravel, Vanilla JS
• ✅ Flat pricing — $12-$59/mo, no per-domain licensing
• ✅ Active development — modern Lexical foundation (Meta uses in WhatsApp Web)

For most Next.js apps, no other editor combines all 14 in one package.

For deeper comparisons, see Best Rich Text Editor for Next.js App Router 2026, Eddyter vs TipTap 2026, Best React Rich Text Editor for Modern Web Apps 2026, 10 Best WYSIWYG Editors for Developers 2026, and 10 Best JavaScript WYSIWYG Editors 2026.

Frequently Asked Questions

1. How do I add a rich text editor in Next.js 15?

Install Eddyter via npm, grab your API key from eddyter.com/user/license-key, and add the editor component with "use client" at the top. Three steps total. Under 10 minutes. Works with Next.js 14 and 15, App Router and Pages Router. Modern Next.js 15 pattern uses Server Component for data fetching, Client Component for editor rendering, and Server Actions for saving (no fetch calls needed). Complete working code shown above. See the step-by-step video for a full walkthrough.

2. Should I use Server Actions or Route Handlers for saving editor content?

For most Next.js 15 apps in 2026, Server Actions are the recommended pattern. Server Actions provide type-safe end-to-end (no JSON serialization boundary), automatic form handling, built-in security (CSRF protection), and cleaner error handling. Working Server Action code shown above with "use server" directive, database update, revalidatePath(), and after() API for background tasks. Route Handlers are still useful when: you need REST APIs for external clients (mobile apps, third-party integrations), you need streaming responses (AI content generation), or you're maintaining backward compatibility with existing Route Handler infrastructure. Both patterns supported by Eddyter.

3. Do I need "use client" for a rich text editor in Next.js?

Yes. Rich text editors need browser APIs like window and document. Server Components don't have those. Add "use client" as the first line of your editor component file. The parent page can stay a Server Component — only the editor itself needs the directive. This is the standard Next.js App Router pattern for any interactive component. The Server Component + Client Component split pattern shown above lets you keep pages as Server Components (SEO-friendly, fast) while making only the editor Client Component (interactive).

4. Does Eddyter work with Turbopack in Next.js 15?

Yes. Eddyter is Turbopack-compatible. Ship with next dev --turbo or next dev (Turbopack is default in Next.js 15). If you see Turbopack errors, ensure you're on the latest Eddyter version (npm install eddyter@latest). Some legacy editor packages don't work with Turbopack yet — Eddyter is built with modern module resolution that works cleanly with Turbopack's Rust-based bundler. For teams still using Webpack, everything works there too.

5. Does Eddyter work with TypeScript strict mode in Next.js?

Yes. Full TypeScript types ship built in. Passes Next.js 15's default strict mode (which enables strict: true in tsconfig.json). No extra @types/* packages needed. IntelliSense works immediately in Cursor, VS Code, and JetBrains IDEs. Component props are strongly typed. Event handlers are strongly typed. Just make sure tsconfig.json uses "moduleResolution": "bundler" (Next.js 15 default) or "node" for older versions. This is default in Next.js's generated tsconfig.json.

6. Why not use TipTap, TinyMCE, or Quill in Next.js?

Each has real trade-offs. TipTap is headless — you spend 2-4 weeks building the UI yourself, plus AI Toolkit costs $500+/mo, and Server Components integration requires workarounds. TinyMCE uses wrapper-based React integration that feels less native, with editor-load pricing at $40 per 1,000 additional loads and $120/mo for AI. Quill has known React 19 compatibility issues in community wrappers and no AI features. CKEditor 5 hits ~500 KB, which hurts Core Web Vitals (Google ranking factor). For most modern Next.js 15 apps in 2026, Eddyter offers the cleanest Server Component + Client Component + Server Actions integration. See Best Rich Text Editor for Next.js App Router 2026 for full comparison.

Ready to Add a Rich Text Editor to Your Next.js App?

Stop debugging hydration errors and wrapper compatibility issues. Drop Eddyter into your Next.js 15 app today — 3 steps, under 10 minutes, native React 19 + App Router + Server Actions support, AI built in.

👉 Try Eddyter free at eddyter.com
📚 Read the docs
💰 See pricing
🎥 Watch the intro video | Watch the 30-min integration guide