Next.js Discord

Discord Forum

create pdf in nextjs

Unanswered
Araucanian herring posted this in #help-forum
Open in Discord
Araucanian herringOP
Hello, is there a library that really works for me to create pdf in nextjs, I have been reviewing some, but they are outdated, or they give me strange errors, example react-pdf, I am using the latest version of nextjs, any clue or suggestion, thank you very much.

8 Replies

fuma
they give me strange errors
Most of the libraries work for me (like react-pdf), you might need to disable SSR for these components with next/dynamic. Feel free to ask their community or in this server if you're facing any issues when using it with Next.js
Araucanian herringOP
import ReactPDF from '@react-pdf/renderer';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';

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

export default function MyDocument() {
    return (
      <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 async function POST(request: Request) {

  await ReactPDF.renderToFile(<MyDocument />, `${__dirname}/my-pdf.test.pdf`);

  return Response.json({
    message: 'Success!',
  });
}
It's just a test but it doesn't work
the error
- error TypeError: ba.Component is not a constructor
    at $$$reconciler (webpack-internal:///(sc_server)/../../node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js:631:50)
    at createRenderer (webpack-internal:///(sc_server)/../../node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js:3889:12)
    at pdf (webpack-internal:///(sc_server)/../../node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js:3997:28)
    at _callee$ (webpack-internal:///(sc_server)/../../node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js:4189:32)
    at tryCatch (webpack-internal:///(sc_server)/../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:36:24)
    at Generator.eval (webpack-internal:///(sc_server)/../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:123:25)
    at Generator.eval [as next] (webpack-internal:///(sc_server)/../../node_modules/@babel/runtime/helpers/regeneratorRuntime.js:64:29)
    at asyncGeneratorStep (webpack-internal:///(sc_server)/../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:4:28)
    at _next (webpack-internal:///(sc_server)/../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:17)
    at eval (webpack-internal:///(sc_server)/../../node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:13)
Araucanian herringOP
Maybe I don't know if that component should be somewhere else, that file is a route.js in an in api folder.
@fuma
fuma
Guess I’ve to reproduce this tomorrow, since I didn’t use React PDF to render the pdf to a file.