Open PDFs in a Next.js App with PSPDFKit

Next.js is a JavaScript framework created by Vercel that lets you build server-side rendered and static web applications using React. It has many great features and advantages, which might make Next.js your first option for building your next web application.
In this blog post, we’ll show how to use our Next.js PDF library to open a PDF in your application in a matter of minutes.
Setting Up Next.js
We can use create-next-app
to start a new Next.js project by running the following:
npm i -g create-next-app create-next-app
It’ll ask for the project name and create a directory with that name. Once inside that directory, we can run npm run dev
to start the development server, and we can load the page on http://localhost:3000
. Now our next goal is to integrate PSPDFKit into our application.
Integrating PSPDFKit
To open the PDF, we also need to integrate PSPDFKit for Web (our JavaScript PDF library). For PSPDFKit for Web to work, we have to copy the directory containing all the required library files (artifacts) to the public
folder. We can use the following command to do this:
cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib ./public
ls ./public # -> pspdfkit-lib
Alternatively, we can add the copy command as a postinstall
hook in package.json
:
{ "scripts": { "dev": "next dev", "start": "next start", "build": "next build", "postinstall": "cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib ./public" } }
This means that every time we install the pspdfkit
package from npm, the pspdfkit-lib
directory will automatically get copied from the node_modules
folder to the public
folder.
By default, PSPDFKit assumes that the assets folder is present in the same folder of our application module, but in our case, we kept it inside the public
folder, so we’ll have to pass a baseUrl
option while initializing PSPDFKit. In pages/index.js
, we’ll load PSPDFKit with the required options (to view all the options, visit our API documentation). Make sure you put your PDF file (in this case, example.pdf
) in the public
folder too. Now we’re ready to initialize PSPDFKit in pages/index.js
:
// pages/index.js import React, { useEffect } from "react"; export default function() { const containerRef = useRef(null); useEffect(() => { let instance, PSPDFKit; (async function() { PSPDFKit = await import("pspdfkit"); instance = await PSPDFKit.load({ container: containerRef.current, document: "/example.pdf", baseUrl: `${window.location.protocol}//${window.location.host}/` }); })(); return () => PSPDFKit && PSPDFKit.unload(containerRef.current); }, []); return <div ref={containerRef} style={{ height: "100vh"}}/> ); }
In the snippet above, PSPDFKit.load
is called with a configuration object where we define:
-
baseUrl
, which is where our assets are available. -
pdf
, which is the relative URL for our example PDF file. You can also pass theArrayBuffer
of our file. -
container
, which is where we mount PSPDFKit.
The above code uses Hooks. If you aren’t familiar with Hooks, you can read about them on the official React website.
We asynchronously import PSPDFKit inside a useEffect
hook after the page has mounted. This way, we ensure our initial bundle size isn’t large, which results in a better perceived load time and the library loading only on the browser (since PSPDFKit is a client-side library).
Opening a Local PDF
PSPDFKit for Web can also open local PDF files. In such a case, the pdf
configuration option should be an ArrayBuffer
of our file.
To open a file, we need to create a file picker and, when selecting a file, convert it to ArrayBuffer
using the FileReader API (see an example here).
Once we have the PDF in the ArrayBuffer
format, we can call PSPDFKit.load
with it.
Wrapping Up
Our final folder structure will look like this:
pspdfkit-next-js-example ├─ next.config.js ├─ package.json ├─ pages │ └─ index.js ├─ public │ ├─ example.pdf │ └─ pspdfkit-lib └─ yarn.lock
We can now start the server by running npm run dev
, and if everything works as expected, we will be able to see PSPDFKit running at http://localhost:3000.
You can find the source code of this example on GitHub.
Conclusion
With just a few lines of code, we were able to utilize the full power of our JavaScript PDF library in a Next.js application. In addition to opening and displaying a PDF in your application, PSPDFKit for Web can help you add advanced PDF capabilities to your app, including:
-
15+ out-of-the-box annotations to mark up, draw on, and add comments to documents.
-
PDF editing to merge, split, rotate, and crop documents.
-
PDF forms to create, fill, and capture PDF form data.
-
Digital signatures to validate the authenticity and integrity of a PDF.
-
And much more!
At PSPDFKit, we offer a commercial, feature-rich, and completely customizable JavaScript PDF library that’s easy to integrate and comes with well-documented APIs. Try it for free, or visit our web demo to see it in action.