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.

1git clone --depth=1 https://github.com/ApryseSDK/webviewer-samples.git
2cd webviewer-samples

Navigate into the NextJS sample folder and install the dependencies using NPM:

1cd webviewer-nextjs-14
2npm install

This will automatically download required packages, and extract the Apryse WebViewer Package. Optionally, this can also be installed into an existing project by running npm i @pdftron/webviewer.

1npm start

Then open a browser and go to localhost:3000 to see the application.

1npm i @pdftron/webviewer

Next we must 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 Nextjs, it will be public folder.

Note: if you clone the GitHub project and run npm install, this process is automated using the script copy-webviewer-files.js.

First, import WebViewer into your component. Ensure that the path property in the constructor points to where you copied static assets node_modules/@pdftron/webviewer/public in Nextjs public folder.
Add your own license key in place of 'YOUR_LICENSE_KEY'.

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

Then, run the app by running npm run dev.

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

Q: Can you use Apryse with Next Server Actions?

A: Yes, but you will need to configure the Next config file to avoid packaging @pdftron/pdfnet-node. See below.

Q: I'm trying to use a server action. Why do I get the error {"addon":"Error: could not resolve \"./addon\" into a module"}?

A: When Next is packaging the app it will, by default, re-package the @pdftron/pdfnet-node module. That results in the module not being in the expected format for the server action. The solution is simple - specify that @pdftron/pdfnet-node is an external package - then when you build the app the module will be excluded from the repackaging process.

1module.exports = {
2  serverExternalPackages: ['@pdftron/pdfnet-node'],
3}