DEV Community

Cover image for PDF Viewer in Nextjs 13.4 using @react-pdf-viewer
ryad
ryad

Posted on

PDF Viewer in Nextjs 13.4 using @react-pdf-viewer

PDFs are a ubiquitous format for sharing documents and information. In web applications, it’s often necessary to integrate a PDF viewer to display these documents. In this tutorial, we’ll walk through the process of creating a simple PDF viewer using React and the @react-pdf-viewer library. We'll also show you how to configure it within a Next.js application.

Prerequisites

Before we begin, make sure you have the following dependencies installed in your project:

  • @react-pdf-viewer/core: ^3.12.0
  • @react-pdf-viewer/default-layout: ^3.12.0
  • pdfjs-dist: ^3.10.111
  • raw-loader (in devDependencies)

Setting up the Project

Let’s start by setting up our Next.js project with a simple PDF viewer component. Here’s the directory structure we’ll be using:

app/
|-- page.jsx
|-- components/
| |-- PdfViewer.jsx
|-- next.config.js

Creating the page.js File

Inside the pages directory, create a file called page.js. This will be the page where we'll use our PDF viewer component.


// pages/page.js
import PdfViewer from "@/components/PdfViewer";
const Page = () => {
  return (
    <>
      <PdfViewer url={"https://pdfobject.com/pdf/sample.pdf"} />
    </>
  );
};
export default Page;
Enter fullscreen mode Exit fullscreen mode

In this code, we import and use the PdfViewer component with a sample PDF URL.

Configuring next.config.js

Next, let’s configure next.config.js to handle images and any additional webpack rules. We'll need to specify the domains for images and add a rule to load .node files using raw-loader.


// next.config.js
const nextConfig = {
  images: {
    domains: ["img.freepik.com", "veterinaire-tour-hassan.com"],
  },
  webpack: (config) => {
    config.module.rules.push({
      test: /\.node/,
      use: "raw-loader",
    });
return config;
  },
};
module.exports = nextConfig;
Enter fullscreen mode Exit fullscreen mode

This configuration ensures that Next.js can handle the specified image domains and use raw-loader for .node files.

Creating the PdfViewer.jsx Component

Now, let’s create the PdfViewer component inside the components directory. This component will use the @react-pdf-viewer/core library to render PDFs.

// components/PdfViewer.jsx
"use client";
import { Viewer, Worker } from "@react-pdf-viewer/core";
import "@react-pdf-viewer/core/lib/styles/index.css";
import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";
import "@react-pdf-viewer/default-layout/lib/styles/index.css";
const PdfViewer = ({ url }) => {
  const defaultLayoutPluginInstance = defaultLayoutPlugin();
  return (
    <div className="h-screen w-screen">
      <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.10.111/build/pdf.worker.min.js">
        <Viewer
          fileUrl={url}
          plugins={[defaultLayoutPluginInstance]}
        />
      </Worker>
    </div>
  );
};
export default PdfViewer;
Enter fullscreen mode Exit fullscreen mode

In this component:

  • We import the necessary components and styles from @react-pdf-viewer/core and @react-pdf-viewer/default-layout.
  • We create the PdfViewer component, which takes a url prop for the PDF file's URL.
  • Inside the component, we set up the Worker and Viewer components provided by @react-pdf-viewer/core. The Worker component loads the PDF.js worker script.
  • We use the defaultLayoutPlugin to apply a default layout to the PDF viewer.
  • Finally, we render the PDF viewer within a div that occupies the full screen.

Conclusion

With these files in place and the dependencies correctly installed, you now have a basic PDF viewer set up in your Next.js application. You can customize the viewer further by exploring the options and features provided by @react-pdf-viewer/core and @react-pdf-viewer/default-layout. This tutorial serves as a starting point for integrating PDF viewing capabilities into your web applications.

Top comments (4)

Collapse
 
pxlmastrxd profile image
Pxlmastr

Good job, sounds like Adobe Reader on steroids. Great article!

Collapse
 
tockra profile image
Tim

I would not recommend to use react-pdf-viewer further.
The author seems to abandoned his project. At least there is no further work until now. But you are forces to have 21 high vulnarabilities in your program:
github.com/react-pdf-viewer/react-...

Collapse
 
devam12 profile image
Devam Panchasara

The API version "4.5.136" does not match the Worker version "3.10.111".

It's give me error

Collapse
 
beingmusthafa profile image
Muhammad Musthafa

manually edit the worker src to the specified version rather than the one in the blog. worked for me.