How to Build a PDF and Office File Viewer With Next.js
By Andy Luu | 2021 Oct 21
4 min
Tags
view
next.js
tutorial
Next.js has risen in popularity due to its numerous features that build on top of the React.js framework, such as SSR (server-side rendering). Since SSR is enabled by default for a Next.js project, it can be tricky to import and use libraries, such as Webviewer, our JavaScript PDF and Office file viewer.
If you're looking to add a library that allows you to open document files, view them, annotate them, and more — look no further. This guide will give you straightforward steps to add a professional document viewer, annotator, and editor to a Next.js web app. And you won’t require any Office software or MS Office licenses, as WebViewer handles Word, PowerPoint, and Excel natively right in the browser.
The source code for this project is available in our GitHub Repository. You can also view our get started guide, which includes a YouTube video tutorial.
Prerequisites
You just need Node.js installed. That's it.
Feel free to skip ahead if you’re already a Next pro, or clone the GitHub repository mentioned earlier.
Install Required Packages
Once you’ve installed Node.js, open your terminal and type the following to install create-next-app globally. It’s also available via npmjs.
npm install -g create-next-app
Now navigate to where you want the project to be created. Create and configure your project using the following command in a terminal of your choice.
npx create-next-app@latest
For this example, we stick with the defaults. If you get stuck with any of the steps, you can check out the official Next.js documentation. Navigate into your project directory and open it with your preferred code editor.
Adding the WebViewer Component
We will now modify our Next project to add WebViewer as a component. We’ll go through each file and modification in sequence.
Install the Apryse WebViewer Package
Ensure you are in the root of your project directory. Then run:
npm i @pdftron/webviewer
Copy Static Assets
Next, we copy the static assets required for WebViewer to run. There are two ways to do this: manual and automated.
For the manual approach, locate the static assets containing WebViewer inside node_modules/@pdftron/webviewer/public and copy them to a location that will be served and publicly accessible. In Next.js, this will be the public folder. For organization, you can also create a folder called webviewer/lib and place these static assets in there (for reference, view the folder structure below).
For the automated approach, modify the package.json to add two lines that will download WebViewer as a dependency to our project. To do this, find the scripts section inside of package.json and add postinstall, download-webviewer scripts that will download WebViewer:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next dev",
"postinstall": "npm run download-webviewer",
"download-webviewer": "npx @pdftron/webviewer-downloader"
},
By default, the WebViewer downloader will download and extract all the necessary files to public/lib. This is normally where we want them to be. However, if you would like to change the directory to, for example, public/webviewer/lib, you can do so by adding:
"download-webviewer": "npx @pdftron/webviewer-downloader --webviewerLocation ./public/webviewer/lib"
Note, it has to be inside of the public folder to preserve the folder structure. WebViewer is smart at only requesting resources when it needs to. Now, run npm install again to trigger the script and add these static assets to your project.
Also, if you clone the GitHub project and run npm install, this process is automated using the script copy-webviewer-files.js, which is a slightly different automation approach than the above, but it achieves the same result (i.e., copying static assets).
You can also download a sample PDF here and place it in a folder called /files (inside the public folder). This is required for the next step. By now, your project structure should look something like this:
Add WebViewer to Index.js
Now we're ready to add WebViewer into our component. Ensure that the path property in the constructor points to where you copied the static assets from earlier (in the 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>
);
}
Here’s how the above code works:
The viewer variable references a DOM element, which we'll use later to initialize WebViewer.
Next, inside the useEffect lifecycle method (which gets called when the element is mounted) we call the WebViewer constructor and use the passed-in properties. Note that this is where we also import the WebViewer library, as it needs to know that the component exists first (before import) to avoid ReferenceError: window is not defined. This is because Next.js uses server-side rendering by default, which you can read more about on the official Next.js website.
When WebViewer is initialized, it returns an instance of WebViewer that can be used to call a number of useful APIs for document creation, manipulation, annotation, collaboration, redaction, and more.
Learn more about WebViewer’s comprehensive functionality by diving into the documentation. In addition, WebViewer is capable of loading files from a URL, blob, file system or base64 data.
Lastly, the style option helps us apply custom CSS like width and height on the viewer’s div element which WebViewer gets mounted on.
Run the App
We can now run our app by using:
npm run dev
or if you have yarn installed:
yarn dev
“Next” (pun intended), to view your app navigate to http://localhost:3000. That's it!
Conclusion
In this blog, we showed you how to add Apryse's WebViewer inside a Next app using create-next-app in a few straightforward steps.
You can download the complete working sample here on GitHub.
Then, to get started with Apryse WebViewer, download a free trial. You can also check out its documentation. There, you’ll find details on WebViewer’s many supported features and on how to customize the WebViewer UI to your desired look and feel.
If you have any questions about integrating Apryse into your project, feel free to contact us or start a chat on Discord with our solutions engineers. We’ll be more than happy to help!
