Section:

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 application.

You can watch a step-by-step video to help you get started.

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

Prerequisites

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

Get your Apryse trial key.

License Key

Apryse collects some data regarding your usage of the SDK for product improvement.

If you wish to continue without data collection, contact us and we will email you a no-tracking trial key for you to get started.

Get Started with the Sample

1. Clone the Sample

sh

1git clone https://github.com/ApryseSDK/webviewer-nextjs-sample.git

2. Enter the directory and run npm install:

sh

1cd webviewer-nextjs-sample
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.

3. Run the sample by executing:

sh

1npm start

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

Integrate into your application

1. Install the Apryse WebViewer Package by running:

sh

1npm i @pdftron/webviewer

2. Copy static assets

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.

3. Place WebViewer into a component

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'.

JavaScript

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

Then, run the app by running npm start.

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

Next step

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales