Getting Example to work with Next.js & React 19+

[RaisinBread42]

Describe the bug
Followed the example in README.MD but had to resolve a few errors. Perhaps adding the below to the example may be useful?
Just got back into react dev so definitely quite new here. Figured sharing this may help others too.

   "@react-pdf/renderer": "^4.1.6",
   "next": "15.1.2",
   "react": "^19.0.0",

To Reproduce
Steps to reproduce the behavior including code snippet (if applies):

Copy & paste example in project.

Expected behavior
For example to work.
Major breaking change is ReactDOM is obsolete https://legacy.reactjs.org/docs/react-dom.html, use createRoot instead https://react.dev/reference/react-dom/client/createRoot#reference

Few other syntax changes required to work with NextJs.

See solution below in comments

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows
• Browser: Brave
• React-pdf version: 4.1.6

[RaisinBread42]

How it works

//template.tsx
import React from 'react';
import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4',
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);


export default MyDocument;

Web. Render in DOM

//page.tsx
'use client';

import React from 'react';
import { createRoot } from 'react-dom/client';
import { PDFViewer } from '@react-pdf/renderer';
import MyDocument from './template'


export default function App() {
    return (
        <PDFViewer>
            <MyDocument />
        </PDFViewer>
    );
}