Configuring Next's Client Side

The React PDF library is designed to work exclusively in client-side environments. It relies on browser-specific APIs and features that are not available during server-side rendering (SSR). This means React PDF cannot be used as a server component in frameworks like Next.js, which support both SSR and client-side rendering (CSR).

Common Issue: Promise.withResolve is not a function in Next.js

This error occurs because Next.js attempts to render the component on the server, where certain browser-specific APIs (required by React PDF) are not available. React PDF relies on these APIs to generate and render PDF documents, so it must run exclusively in the browser.

To resolve this issue, you need to explicitly tell Next.js to render the component only on the client side. This can be done by adding the 'use client' directive at the top of your component file:

  'use client'

  import { RPProvider, RPDefaultLayout, RPPages, RPConfig } from '@pdf-viewer/react'
  ...

By adding 'use client', you ensure that the component is rendered only in the browser, preventing the Promise.withResolve error.

Best Practices for Using React PDF in Next.js

If you are curious on how to add React PDF effectively into a Next application, here is a Next.js example in the Basic Usage section.