Get started with Apryse WebViewer SDK in a Next.js Project

The WebViewer SDK is expansive, allowing you to do the following with PDFs inside your app:

• View
• Edit
• Annotate
• Flatten
• Extract
• Search
• Build forms
• Calculate using measurements
• Support layers
• Customize the UI
• Meet global accessibility standards through the UI
• Page manipulation
• Compare different versions of a PDF
• Archive
• Use digital signature
• Redact
• Generate templates
• Add security
• Document conversion, including Office and CAD conversion

You can also:

• View and edit in Spreadsheet Editor for .xlsx files.
• View and edit in DOCX Editor for .docx files.

Adding WebViewer to your application allows users to use PDFs, .xlsx, and .docx files without going outside of your application. This reduces reliance on third-party systems, multiple vendors, and file downloads for everyday tasks without compromising control, compliance, or security.

Interact with our showcase demo to test out all of the Apryse WebViewer SDK functionality.

This guide walks you through how to integrate the WebViewer SDK into your Next.js application. By the end, you'll be able to render a PDF document in the UI.

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

Before you start:

• Install Node and npm to use as your run-time environment and package manager.
• Open a text editor like Visual Studio Code.
• Get your Apryse trial key.

Scaffold your Next.js project.

1. On the command line, cd to where you want your new project to sit.

2. Run the following on the command line to generate a project:

1npx create-next-app@latest

3. You may be asked if you want to install the create-next-app package. In this case, select yes.

4. Next, complete the following tasks from the command line during project creation:

a. Change the default project name to a project name of your choice.

b. Choose no for Typescript.

c. Choose none for linter.

d. Choose no for Tailwind CSS.

d. Choose no for src/ directory.

e. Select yes for App Router.

f. Select yes for Turbopack.

g. Select no for import alias.

Selections made during Next.js project setup for this tutorial

You could, of course, select whatever configurations you like for your project. The selections above are what was used in writing this guide. We include ready-made JavaScript code in this guide.

Enter the following on the command line to navigate into your new project:

1cd <project-name>

Enter the following on the command line from within your project directory to install WebViewer into your Next.js project:

1npm i @pdftron/webviewer

You have to copy the static assets required for WebViewer to run. The files must be moved into a location that will be served and publicly accessible.

1. Via your text editor, create a subfolder within the existing public folder in your project and name it lib/webviewer.

2. Next, copy specific static assets required for WebViewer. The static folders to copy are located in node_modules/@pdftron/webviewer/public in your project and are as follows:

• core
• ui

3. Paste the select folders you copied to the new lib/webviewer public location that will be served.

Copied WebViewer static assets Core and UI in public/lib/webviewer

Next, you'll create a WebViewer component that can be used across the app. You'll add code into new folders you create and existing default folders that are part of your Next.js project.

1. Via your text editor, create a folder and file called components/WebViewer.js within the existing /app folder in your project.

2. Add the following code to the app/components/WebViewer.js file, keeping in mind the following:

• An element with a useEffect is specified.
• WebViewer is substantiated within a useEffect hook.
• In the useEffect, the options you want are specified and include the element where it should be mounted. We've also included some styling.
  • path is the path to the copied static assets.
  • Add your own license key in place of 'YOUR_LICENSE_KEY'. If you've created your license key and you're logged in, your key is already in the code below.
  • An initial PDF document is specified to open when WebViewer starts using the initialDoc parameter.

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

3. Delete the code in the existing app/page.js file.

4. Add the following code to the app/page.js file to import the component and use it elsewhere in your app:

1import WebViewer from './components/WebViewer'
2
3export default function Page() {
4  return (
5    <div>
6      <WebViewer />
7    </div>  
8  )
9}

The code above adds a div element which contains a reference variable of WebViewer that you just used in the WebViewer.js file.

After you've saved all of the files, you'll serve the webpage so you can see the WebViewer UI and the PDF you included to open in WebViewer.

1. Run the following command on the command line from your project directory to run the project.

1npm run dev

2. Click the localhost link created in your terminal to view the WebViewer UI and PDF file locally.