PDF Viewer in Nextjs 13.4 using @react-pdf-viewer
Tags: react, nextjs, tailwindcss, web3
Published: 2023-10-19 12:12:20

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 _<u>@react-pdf-viewer</u>_ 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 _<u>page.js</u>_ File
Inside the _<u>pages</u>_ directory, create a file called _<u>page.js</u>_. 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;
```
In this code, we import and use the _<u>PdfViewer</u>_ component with a sample PDF URL.

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

```

// 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;
```
This configuration ensures that Next.js can handle the specified image domains and use _<u>raw-loader</u>_ for _<u>.node</u>_ files.

## Creating the _<u>PdfViewer.jsx</u>_ Component
Now, let’s create the _<u>PdfViewer</u>_ component inside the _<u>components</u>_ directory. This component will use the <u>_@react-pdf-viewer/core_</u> 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;
```
In this component:

- We import the necessary components and styles from _<u>@react-pdf-viewer/core</u>_ and _<u>@react-pdf-viewer/default-layout</u>_.
- We create the <u>_PdfViewer_</u> component, which takes a <u>_url_</u> prop for the PDF file's URL.
- Inside the component, we set up the <u>_Worker_</u> and _<u>Viewer</u>_ components provided by _<u>@react-pdf-viewer/core</u>_. The <u>_Worker_</u> component loads the PDF.js worker script.
- We use the _<u>defaultLayoutPlugin</u>_ to apply a default layout to the PDF viewer.
- Finally, we render the PDF viewer within a _<u>div</u>_ 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.