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

You can read this outside of Hashnode too.

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.

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 (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 Basic usage — React PDF Viewer (react-pdf-viewer.dev) 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.

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

5. Run the project again

Now you will encounter another error.

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.

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: starter/nextjs at main · react-pdf-viewer/starter (github.com)

// 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

7. Run the project for the final time

Upon running the project now, the PDF will be displayed on the full page.

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.

How to Display a PDF in Next.js Using React PDF Viewer?

Table of contents