Skip to main content
SuperDoc works seamlessly with Next.js. The recommended approach is using @superdoc-dev/react, which handles SSR automatically. The React wrapper is the simplest way to integrate SuperDoc with Next.js: 
npm install @superdoc-dev/react

​
App Router (Next.js 13+)

// app/editor/page.jsx
'use client';

import { SuperDocEditor } from '@superdoc-dev/react';
import '@superdoc-dev/react/style.css';

export default function EditorPage() {
  return (
    <SuperDocEditor
      document="/sample.docx"
      documentMode="editing"
      onReady={() => console.log('Editor ready!')}
      style={{ height: '100vh' }}
    />
  );
}

​
Pages Router

// pages/editor.jsx
import { SuperDocEditor } from '@superdoc-dev/react';
import '@superdoc-dev/react/style.css';

export default function EditorPage() {
  return (
    <SuperDocEditor
      document="/sample.docx"
      documentMode="editing"
      style={{ height: '100vh' }}
    />
  );
}
The React wrapper is SSR-safe — it renders container divs on the server (hidden until initialized) and starts SuperDoc after hydration. Use renderLoading for custom loading UI, or Next.js dynamic imports if you prefer to skip SSR entirely.

​
CSS Import

Import styles in your layout or page: 
// app/layout.jsx
import '@superdoc-dev/react/style.css';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

​
Next Steps

React Integration

Full React wrapper documentation

Configuration

Configuration options

Collaboration

Real-time collaboration

React Example

React + TypeScript example

Next.js Example

Next.js SSR integration