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.

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

Get your Apryse trial key.

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

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

npm start

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

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

import {useEffect, useRef} from 'react';

export default function HomePage() {

    const viewer = useRef(null);

    useEffect(() => {
      import('@pdftron/webviewer').then(() => {
        WebViewer(
          {
            path: '/webviewer/lib',
            licenseKey: 'YOUR_LICENSE_KEY', // sign up to get a key at https://dev.apryse.com
            initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
          },
          viewer.current,
        ).then((instance) => {
            const { docViewer } = instance;
            // you can now call WebViewer APIs here...
          });
      })
    }, []);


    return (
      <div className="MyComponent">
        <div className="header">React sample</div>
        <div className="webviewer" ref={viewer} style={{height: "100vh"}}></div>
      </div>
    );
  
}

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 .