This guide will help you integrate a free trial of WebViewer into a Next.js application on the browser. You can also checkout a ready to go sample on GitHub.

Get the Nextjs sample source code here

• Node.js and npm

git clone https://github.com/PDFTron/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.

import {useEffect, useRef} from 'react';

export default function HomePage() {

    const viewer = useRef(null);

    useEffect(() => {
      import('@pdftron/webviewer').then(() => {
        WebViewer(
          {
            path: '/webviewer/lib',
            initialDoc: '/files/pdftron_about.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 .

Usage Guides Samples API docs