Integrate WebViewer PDF Viewer & Editor into a Next.js app

This guide will show you how to integrate WebViewer Document Viewer & Editor into a Next.js 14 application. WebViewer works with other versions of Next.js, but you may need to tweak the code slightly.

You can also download a ready-to-go sample on GitHub.

Prior to starting, you should have already installed Node and npm.

Get your Apryse trial key.

This video teaches you the fundamentals of installing and initializing WebViewer in any web application. If you wish, you may skip this section and proceed to the steps below.

We will use create-next-app to scaffold our project. To get started, run the following command:

1npx create-next-app@latest

You may be asked if you want to install the create-next-app package. In this case, select yes.

Next you will be asked to name your project. You can choose whatever name you wish.

You will now be asked to select which features to include in your project. For this step, you may also choose whatever you wish - your choices will not impact the rest of the steps.

Now, we can install WebViewer by running the following command.

1npm i @pdftron/webviewer

We also have to copy the static assets required for WebViewer to run. The files are located in node_modules/@pdftron/webviewer/public and must be moved into a location that will be served and publicly accessible. In Next.js, it will be public folder.

In package.json we will add a command that copies these static assets to our public folder.

1{
2  "scripts": {
3    "copy-webviewer": "mkdir -p ./public/lib/webviewer && cp -a ./node_modules/@pdftron/webviewer/public/* ./public/lib/webviewer",
4    "dev": "npm run copy-webviewer && next dev",
5    "build": "npm run copy-webviewer && next build",
6  }
7}

You'll notice that we also updated our other scripts to run this command first - this is recommended to make sure your WebViewer assets are always in the right place.

Read more about copying static assets.

Next, we can build our WebViewer component.

Create a file called components/WebViewer.jsx and add the following code:

1'use client';
2
3import { useEffect, useRef } from 'react';
4
5export default function WebViewer() {
6
7    const viewer = useRef(null);
8
9    useEffect(() => {
10      import('@pdftron/webviewer').then((module) => {
11        const WebViewer = module.default;
12        WebViewer(
13          {
14            path: '/lib/webviewer',
15            licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
16            initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
17          },
18          viewer.current,
19        ).then((instance) => {
20            const { documentViewer } = instance.Core;
21            // you can now call WebViewer APIs here...
22          });
23      })
24    }, []);
25
26
27    return (
28      <div className="webviewer" ref={viewer} style={{height: "100vh"}}></div>
29    );
30  
31}

Then, we can import our component and use it elsewhere in our app.

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

Now run the app by running npm run dev. You should see WebViewer mounted with a default document loaded.

You can now checkout other guides like how to open your own documents or how to disable certain features.