Integrate WebViewer into a Next.js 14 Project

Using a Next.js 14 project, WebViewer is defined in a TSX component and added to the home page in the Page.tsx file. The component is able to view, annotate, and manipulate PDFs and other documents.

The sample also demonstrates how to programmatically add a rectangle annotation with user-defined dimensions.

WebViewer provides a slick out-of-the-box responsive UI that enables you to view, annotate and manipulate PDFs and other document types inside any web project.

Click the button below to view the full project in Github.

1'use client';
2
3import { WebViewerInstance } from '@pdftron/webviewer';
4import { Ref, useEffect, useState, useRef } from 'react';
5
6export default function Viewer() {
7 const viewer: Ref<HTMLDivElement | any> = useRef(null);
8 const [webviewerInstance, setWebViewerInstance] = useState<WebViewerInstance | any>(null);
9
10 useEffect(() => {
11 // Due to SSR in Next.js, we need to import the module dynamically, to avoid window is not defined error due to re-rendering.
12 // Read more here: https://github.com/vercel/next.js/discussions/42319
13 import('@pdftron/webviewer').then((module) => {
14 const WebViewer = module.default;
15 WebViewer(
16 {
17 path: '/lib/webviewer',
18 initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
19 licenseKey: 'your_license_key' // sign up to get a free trial key at https://dev.apryse.com
20 },
21 viewer.current,
22 ).then((instance: WebViewerInstance) => {
23 const { documentViewer, annotationManager, Annotations } = instance.Core;
24 // Run APIs here.
25
26 documentViewer.addEventListener('documentLoaded', () => {
27 const rectangleAnnot = new Annotations.RectangleAnnotation({
28 PageNumber: 1,
29 // values are in page coordinates with (0, 0) in the top left
30 X: 100,
31 Y: 150,
32 Width: 200,
33 Height: 50,
34 Author: annotationManager.getCurrentUser()
35 });
36
37 annotationManager.addAnnotation(rectangleAnnot);
38 // need to draw the annotation otherwise it won't show up until the page is refreshed
39 annotationManager.redrawAnnotation(rectangleAnnot);
40 });
41 setWebViewerInstance(instance);
42 });
43 });
44 }, []);
45
46 return (
47 <div className="h-full w-full" ref={viewer}></div>
48 );
49}
50
51

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales