Some test text!

Discord Logo

Chat with us

PDFTron is now Apryse, learn more here.

Web / Guides / Next.js

Platform


PDFTron is now Apryse, learn more here.

Integrating PDF, MS Office WebViewer with Next.js framework

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.

Prerequisites

Node.js is not required for WebViewer
WebViewer does not require Node, npm, or node_modules. It is only recommended to run the samples.
No trial license key required.
The trial of Apryse SDK works without a license key. A commercial license key is required for use in a production environment. Please fill out our licensing form if you do not have a valid license key.
Keep your commercial license key confidential.
License keys are uniquely generated. Please make sure that it is not publicly available (e.g. in your public GitHub).

Using The Sample

1. Clone the webviewer-nextjs-sample repository:

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

2. Enter the directory and run npm install:

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

3. Run the sample by executing:

npm start

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

Manually Import Into an Existing Project

1. Install the Apryse WebViewer Package by running:

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

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 .

Next step

Usage Guides Samples API docs

Get the answers you need: Support