How to Display a PDF in Next.js Using React PDF Viewer?
Tags: webdev, nextjs, tutorial, frontend
Published: 2024-06-02 19:20:02

This blog talks about how you can display a PDF file in your Next.js app.

## Prerequisites

### 1. Create a Next.js project with the following command

```
npx create-next-app@latest
```
Follow the instructions and a new Next.js project will be created.

### 2. Run the Next.js project

Type the following command on the terminal.

```
npm run dev
```
Open a web browser like Chrome, and go to http://localhost:3000. You will see your new Next.js project running.

![Next.js app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8m87ns6j7vciwsedksg8.png)

Now, we will use the React PDF viewer component to display the PDF file on the page.

You can refer this documentation to get started: [Getting started — React PDF Viewer](https://react-pdf-viewer.dev/)

## Steps to use React PDF Viewer:

### 1. Install a few packages

```
npm install pdfjs-dist@3.4.120
npm install @react-pdf-viewer/core@3.12.0
```
### 2. Copy the original code
Go to [this page](https://react-pdf-viewer.dev/docs/basic-usage/) and paste the code on `page.js` inside the project.

```
import { Viewer, Worker } from "@react-pdf-viewer/core";

export default function Home() {
  return (
    <main>
      <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.15.349/build/pdf.worker.js">
        <div>
          <Viewer fileUrl="./sample-pdf-file.pdf" />
        </div>
      </Worker>
    </main>
  );
}
```
### 3. Run the project

Most likely, you will encounter an error.

![runtime error on nextjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54gg6x4xoh30reogrlka.png)

This is a pretty common error in Next.js about the usage of client components.

Basically, it just says that React PDF Viewer component uses some code that can only work on client components and not the server components.

### 4. Fix the server error

What you have to do is just type `“use client”` on top of your page.

Now, the overall code becomes this

![screenshot of the code with use client at the top](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ms5zf4ujhjauwkjshfo.png)



### 5. Run the project again
Now you will encounter another error.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zf512chwvfjrzn2o9t5u.png)



This error comes when there is a mismatch in the versions of the worker and the `pdfjs-dist` package.

To fix this, just change the version of `pdfjs-dist` inside the `workerUrl` to `3.4.120`.

```
<Worker workerUrl="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.js">
```
If you run now, you will see the PDF being displayed on the page.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v02z3gtlzpt6tfa3532m.png)


But hold on! There’s something weird.

Look at the right side of the page, there’s a black background which looks odd.

### 6. Copy styles
To make the styling correct, copy and paste the styles from [this page](https://github.com/react-pdf-viewer/starter/tree/main/nextjs)

```
// Import the styles provided by the react-pdf-viewer packages
import "@react-pdf-viewer/default-layout/lib/styles/index.css";
import "@react-pdf-viewer/core/lib/styles/index.css";
```
Now, you will encounter another error:

```
Module not found: Error: Can't resolve '@react-pdf-viewer/default-layout/lib/styles/index.css'
```
To resolve this, install this package:

```
npm install @react-pdf-viewer/default-layout
```
Now, final dependencies are

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjremskis3jpt2h3d21v.png)



### 7. Run the project for the final time
Upon running the project now, the PDF will be displayed on the full page.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tp1jvuiya9lv67g6fkf7.png)



## Final code

```
"use client";
import { Viewer, Worker } from "@react-pdf-viewer/core";
import "@react-pdf-viewer/default-layout/lib/styles/index.css";
import "@react-pdf-viewer/core/lib/styles/index.css";

export default function Home() {
  return (
    <main>
      <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.js">
        <div>
          <Viewer fileUrl="./sample-pdf-file.pdf" />
        </div>
      </Worker>
    </main>
  );
}
```
## Conclusion

In this blog post, we saw how you can display a PDF previewer on a page in Nextjs application.

## Read more:

- [2024 Guide to Infinite Scrolling in React/Next.js](https://sumansourabh.in/2024-guide-to-infinite-scrolling-in-react-next-js/)
- [How to Actually Upgrade Expo and React Native Versions to Latest?](https://sumansourabh.in/how-to-upgrade-latest-expo-react-native-version/)
- [How to Create Toggle Password Visibility with Material UI?](https://sumansourabh.in/how-to-create-toggle-password-visibility-with-material-ui/)