Generating PDF in next.js - pdf

Question

Hii i am trying to generate PDF in next.js. I tried many libraries like react-pdf, jsPDF etc. but all they are client side library they need window to perform their action. Is There any solution for generating pdf in next.js. If Present then please suggest with code example.

Answer 1

i recommend to use the api routes of next.js and use a node.js pdf library. On the frontend you access the api with the correct path to return the pdf and just render it.
next.js api routes
pdf-lib
Example:
import { PDFDocument, StandardFonts, rgb } from 'pdf-lib'
export default async (req, res) => {
const pdfDoc = await PDFDocument.create();
// do pdf stuff
const buffer = await pdfDoc.save();
res.send(buffer);
};
export const config = {
api: { bodyParser: false, },
};

Answer 2

Using jsPDF, I found this tutorial with Next.js.
pages/index.tsx:
import * as React from "react";
import Image from "next/image";
import dynamic from "next/dynamic";
const GeneratePDF = dynamic(()=>import("./../src/components/GeneratePDF"),{ssr:false});
const app =()=>{
const ref = React.useRef();
return(<div className="main">
<div className="content" ref={ref}>
<h1>Hello PDF</h1>
<img id="image" src="/images/image_header.jpg" width="300" height="200"/>
<p id="text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quisquam animi, molestiae quaerat assumenda neque culpa ab aliquam facilis eos nesciunt! Voluptatibus eligendi vero amet dolorem omnis provident beatae nihil earum!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, est. Magni animi fugit voluptates mollitia officia libero in. Voluptatibus nisi assumenda accusamus deserunt sunt quidem in, ab perspiciatis ad rem.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil accusantium reprehenderit, quasi dolorum deserunt, nisi dolores quae officiis odio vel natus! Pariatur enim culpa velit consequatur sapiente natus dicta alias!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, asperiores error laudantium corporis sunt earum incidunt expedita quo quidem delectus fugiat facilis quia impedit sit magni quibusdam ipsam reiciendis quaerat!
</p>
</div>
<GeneratePDF html={ref}/>
</div>);
}
export default app;