Next.js Integration

Next.js works well when the editor is rendered in a client component.

What works

• Client components with preset package CSS import.
• Dynamic import when you need explicit client-only rendering boundaries.

Install

npm install @lyfie/luthor

'use client';

import '@lyfie/luthor/styles.css';
import { ExtensiveEditor } from '@lyfie/luthor';

export default function EditorClient() {
  return <ExtensiveEditor placeholder="Write here..." />;
}

Caveats

• Keep editor components inside client boundaries.
• For heavy routes, use dynamic(() => import(...), { ssr: false }) when needed.

Related docs

• @lyfie/luthor Presets
• @lyfie/luthor-headless Overview