Next.js example

Run the example

From the repository root, build the workspace packages before you start Next.js:

bun install
bun run build:packages
bun run dev:nextjs

Open http://localhost:3000.

Set the client boundary

app/page.tsx is a Client Component. It uses dynamic() with ssr: false:

'use client';

import dynamic from 'next/dynamic';

const Editor = dynamic(() => import('./components/Editor').then((m) => m.Editor), {
  ssr: false,
  loading: () => <div>Loading editor...</div>,
});

export default function Page() {
  return <Editor />;
}

Next.js requires the dynamic() call inside a Client Component. app/components/Editor.tsx also uses 'use client' and renders <DocxEditor />.

Add the editor to Next.js

npm install @docx-editor.dev/react @docx-editor.dev/core

Import @docx-editor.dev/core/styles/editor.css once. Load your editor component with dynamic(..., { ssr: false }).

For more information, see the React adapter guide.