Build a Next.js PDF viewer with Apryse WebViewer SDK

This guide shows how to build a Next.js PDF viewer using the Apryse WebViewer SDK. You'll learn how to integrate the SDK into a Next.js application to render, view, and interact with PDF documents using the WebViewer UI. This guide uses JavaScript examples. TypeScript projects will require minor adjustments.

You can also download a ready-to-use GitHub sample to get started quickly, or explore the interactive Showcase demo to see WebViewer's full capabilities in action.

This guide assumes basic familiarity with Next.js development. Before you start:

• Install Node.js and npm. See the Next.js documentation for version details.
• Install Visual Studio Code or another code editor to develop and debug your code.
• Get your Apryse trial key.

In this section, you’ll create a new Next.js application using npm. This project provides the foundation for integrating Apryse WebViewer. If you already have an existing Next.js app, you can skip this step and continue to the Install WebViewer section.

1. In your terminal, go to the directory where you want to create the project.
2. Create a new webviewer-nextjs project using a minimal setup:

1npx --yes create-next-app@latest webviewer-nextjs --js --no-eslint --no-react-compiler --no-tailwind --no-src-dir --app --yes

3. Navigate to your new Next.js project directory and install dependencies:

1cd webviewer-nextjs
2npm install

Next, install the Apryse WebViewer SDK using npm. This command adds the WebViewer package to your project, allowing you to integrate the PDF viewer and editor into your Next.js application.

After navigating to your webviewer-nextjs project directory, run the following command to install WebViewer:

1npm i @pdftron/webviewer

WebViewer needs access to its static assets at runtime, including WebAssembly modules, HTML, and CSS files. In a Next.js project, you must copy these assets into the public directory so they can be served correctly. For more, see Copying WebViewer static assets.

1. In your terminal, create the public/lib/webviewer directory if it doesn't already exist:

1npx --yes shx mkdir -p public/lib/webviewer

2. Copy all WebViewer static assets from node_modules/@pdftron/webviewer/public into the new public/lib/webviewer directory:

1npx --yes cpy-cli "node_modules/@pdftron/webviewer/public/**/*" public/lib/webviewer

Your project should now include a similar structure:

1webviewer-nextjs/
2├── .next/
3├── app/
4├── node_modules/
5├── public/
6│   └── lib/
7│       └── webviewer/
8│           ├── core/
9│           └── ui/
10├── file.svg
11└── ...

In this section, you'll add WebViewer to your Next.js app by creating a component and initializing the viewer. This mounts the WebViewer UI and loads a document in your application.

 1. Create a components folder in your project's root:

1npx --yes mkdirp components

2. Create a webviewer.js file in the components folder:

1npx --yes shx touch components/webviewer.js

3. In Visual Studio Code, add this code to the webviewer.js file and save:

1// Runs only on the client
2'use client';
3
4// Import React hooks
5import { useEffect, useRef } from 'react';
6
7export default function WebViewer() {
8  // Create a ref to hold div where WebViewer is mounted
9  const viewer = useRef(null);
10
11  // Run once after the component is mounted
12  useEffect(() => {
13    // Dynamically import WebViewer to avoid SSR issues
14    import('@pdftron/webviewer').then((module) => {
15      // Access the default export from the module
16      const WebViewer = module.default;
17
18      // Initialize WebViewer
19      WebViewer(
20        { 
21          // Path to the WebViewer lib assets
22          path: '/lib/webviewer',
23          // Replace with your Apryse license key
24          licenseKey: 'YOUR_LICENSE_KEY',
25          // Initial document to load into the viewer
26          initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
27        },
28        // DOM element where WebViewer will be rendered
29        viewer.current,
30      ).then((instance) => {
31        // Destructure the documentViewer from the Core API
32        const { documentViewer } = instance.Core;
33
34      // WebViewer APIs can now be used here
35      // Example: documentViewer.addEventListener(...)
36      });
37    });
38
39  // Empty dependency array ensures this runs once
40  }, []);
41
42  // Render the container that WebViewer mounts into
43  return (
44    <div
45      className='webviewer'
46      ref={viewer}
47      style={{ width: '100%', height: '100vh', margin: '0 auto' }}
48    />
49  );
50}

4. Replace the contents of the app/page.js file with the following and save:

1import WebViewer from '../components/webviewer';
2
3export default function Page() {
4  return (
5    <div>
6      <WebViewer />
7    </div>
8  );
9}

You can now load and display a PDF document in the WebViewer UI. Run your Next.js application to launch WebViewer and see the PDF in your browser.

1. From your project directory, run the following command to start the application:

1npm run dev

A successful output looks similar to:

1> webviewer-nextjs@0.1.0 dev
2> next dev
3
4▲ Next.js 16.2.7 (Turbopack)
5- Local:         http://localhost:3000
6✓ Ready in 413ms

2. Open the localhost URL from your terminal to view the WebViewer UI and PDF document.

In this video, learn how to install and integrate the Apryse WebViewer SDK into a Next.js project using TypeScript. You’ll set up the PDF viewer, enable content editing, and explore the DOCX and Spreadsheet Editors.