> ## Documentation Index > Fetch the complete documentation index at: https://superdoc-caio-pizzol-docs-ai-core-preset.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Next.js SuperDoc works seamlessly with Next.js. The recommended approach is using `@superdoc-dev/react`, which handles SSR automatically. ## Recommended: Using @superdoc-dev/react The React wrapper is the simplest way to integrate SuperDoc with Next.js: ```bash theme={null} npm install @superdoc-dev/react ``` ### App Router (Next.js 13+) ```jsx theme={null} // app/editor/page.jsx 'use client'; import { SuperDocEditor } from '@superdoc-dev/react'; import '@superdoc-dev/react/style.css'; export default function EditorPage() { return ( console.log('Editor ready!')} style={{ height: '100vh' }} /> ); } ``` ### Pages Router ```jsx theme={null} // pages/editor.jsx import { SuperDocEditor } from '@superdoc-dev/react'; import '@superdoc-dev/react/style.css'; export default function EditorPage() { return ( ); } ``` 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: ```jsx theme={null} // app/layout.jsx import '@superdoc-dev/react/style.css'; export default function RootLayout({ children }) { return ( {children} ); } ``` *** ## Next Steps Full React wrapper documentation Configuration options Real-time collaboration React + TypeScript example Next.js SSR integration