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

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


3 min read

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.


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:

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

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) => {
      test: /\.node/,
      use: "raw-loader",
return config;
module.exports = nextConfig;

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">
export default PdfViewer;

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.


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.