Render PDF server-side with NextJS 13.x.x

[ystewart]

Has anyone tried to do server-side rendering with NextJS 13.x.x?
Or maybe a example of client-side rendering that is performant?

Current stack:

• @react-pdf/renderer: ^3.1.12
• next: ^13.5.2
• react: ^18.2.0
• react-dom: ^18.2.0

[fturmel]

@ystewart it works with the pages API (renderToStream and send the stream back in the response). I haven't tried with the new app router, so can't comment on that.

[pangelo123]

también pude hacer con el api de pages, pero con la nueva carpeta de app no he tenido éxito, encontraste alguna solución?

[byron-ojua]

I have the same question. Are there examples of videos of how to use ReactPDF/renderer with the NextJS 13+ app router?

[diegomura]

The official project site uses NextJS 13. You can find the source code here in https://github.com/diegomura/react-pdf-site

[fturmel]

@diegomura Thanks for the great work on this library!

Looks like the docs site you linked is using the renderer client-side.

I wanted to make sure you were aware of #2350 and #2460. It still doesn't seem possible to render a PDF server-side with the NextJS App router in a route handler in NextJS 13 or 14.

[wojtekmaj]

It's possible now! See this: #2350 (comment)

[Dharitri25]

I am using next14 with node v23. Able to use react-pdf to generate pdf from server side. But i am facing issue in font registartion to use fontWeight and fontStyle. It would be grateful if I get the solution for this to make the fontWeight used on Text.

`Font.register({
family: "Inter",
fonts: [
{
src: "https://fonts.googleapis.com/css2?family=Inter:wght@100&display=swap", // Thin font (100 weight)
fontWeight: 100,
},
{
src: "https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap", // Regular font (400 weight)
fontWeight: 400,
},
{
src: "https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap", // Semi-Bold font (600 weight)
fontWeight: 600,
},
{
src: "https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap", // Bold font (700 weight)
fontWeight: 700,
},
],
});

header: {
fontSize: 15,
fontWeight: 700,
fontFamily: "Inter",
marginBottom: 15,
},
`