26/02/2025, 01:42 Open PDFs in a Next.

js App with PSPDFKit | Nutrient

BLOG POST

Open PDFs in a Next.js App with PSPDFKit

RITESH KUMAR NOVEMBER 4, 2019

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
ASK AI
web application.

https://www.nutrient.io/blog/open-pdf-nextjs/ 1/6
26/02/2025, 01:42 Open PDFs in a Next.js App with PSPDFKit | Nutrient
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
Thank you for
subscribing to our
Use create-next-app to start a new Next.js project by running the following:

1
2
npm i -g create-next-app
create-next-app
newsletter!
We’re thrilled to have you join our community. You’re now
one
It’ll ask for the project name and stepacloser
create to with
directory receiving the latest
that name. One ofupdates, exclusive
the questions will ask if you want to use
content,( No
TypeScript. Respond with your preference andorspecial offers
Yes ) to set updirectly in your
your project inbox.
accordingly.

Once inside that directory, you can run npm run dev to start the development server, and you can load the page on
http://localhost:3000 . Now, your next goal is to integrate PSPDFKit into your application.

Integrating PSPDFKit
Before you integrate PSPDFKit, you need to install the PSPDFKit package using npm :

npm install pspdfkit

To open the PDF, you also need to integrate PSPDFKit for Web (our JavaScript PDF library). For PSPDFKit for Web to work,
you have to copy the directory containing all the required library files (artifacts) to the public folder. Use the following
command to do this:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib ./public

Alternatively, you can add the copy command as a postinstall hook in package.json :

1 {
2 "scripts": {
3 "dev": "next dev",
4 "start": "next start",
5 "build": "next build",
6 "postinstall": "cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib ./public"
7 }
8 }

This means every time you 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 your application module, but in your
case, you kept it inside the public folder, so you’ll have to pass a baseUrl option while initializing PSPDFKit. In
app/page.js , you’ll load PSPDFKit with the required options (to view all the options, visit our API documentation). Make

https://www.nutrient.io/blog/open-pdf-nextjs/ 2/6
26/02/2025, 01:42 Open PDFs in a Next.js App with PSPDFKit | Nutrient
sure you put your PDF file (in this case, document.pdf ) in the public folder too. Now you’re ready to initialize PSPDFKit in
app/page.js :

1 'use client';
Thank you for
subscribing to our
2 import { useEffect, useRef } from 'react';
3
4 export default function App() {

newsletter!
5 const containerRef = useRef(null);
6
7 Nutrient
useEffect(() => { SDK Low-Code Workflow DWS API
8 const container = containerRef.current;
9
We’re thrilled to have you join our community. You’re now
10 if (typeof window !== 'undefined') {
11
PRODUCTS one step closer to receiving the latest updates, exclusive
SOLUTIONS DOCS
import('pspdfkit').then((PSPDFKit) => {
RESOURCES PRICING TRY FOR FREE CONTACT SALES
12 if (PSPDFKit) { content, and special offers directly in your inbox.
13 PSPDFKit.unload(container);
14 }
15
16 PSPDFKit.load({
TABLE OF CONTENTS
17 container,
18 document: '/document.pdf',
19 baseUrl: `${window.location.protocol}//${window.location.host}/`,
Setting
20
Up Next.js });
21 PSPDFKit});
Integrating
22 }
Opening
23 a Local
},PDF[]);
24
Wrapping
25
Up return <div ref={containerRef} style={{ height: '100vh' }} />;
26 }
Conclusion

FAQ

In the snippet above, PSPDFKit.load is called with a configuration object where you define:

baseUrl , which is where your assets are available.

document , which is the relative URL for your example PDF file. You can also pass the ArrayBuffer of your file.
container , which is where you mount PSPDFKit.

The above code uses Hooks. If you aren’t familiar with Hooks, you can read about them on the official React website.

You asynchronously import PSPDFKit inside a useEffect hook after the page has mounted. This way, you ensure your
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 document configuration option should be an
ArrayBuffer of your file.

To open a file, you need to create a file picker and, when selecting a file, convert it to ArrayBuffer using the FileReader API
(see an example here).

Once you have the PDF in the ArrayBuffer format, you can call PSPDFKit.load with it.

Wrapping Up
https://www.nutrient.io/blog/open-pdf-nextjs/ 3/6
26/02/2025, 01:42 Open PDFs in a Next.js App with PSPDFKit | Nutrient

You can now start the server by running npm run dev , and if everything works as expected, you’ll be able to see PSPDFKit
running at http://localhost:3000 .

Conclusion Thank you for

subscribing to our
With just a few lines of code, you were able to utilize the full power of our JavaScript PDF library in a Next.js application. In

newsletter!
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 marktoup,

We’re thrilled drawyou
have on, join
and our
add community.
comments to You’re
documents.
now
onerotate,
PDF editing to merge, split, step closer to documents.
and crop receiving the latest updates, exclusive
PDF forms to create, fill, andcontent, andform
capture PDF special
data.offers directly in your inbox.
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.

FAQ
How can I install PSPDFKit in my Next.js app?
You can install PSPDFKit using npm install pspdfkit and configure the public folder to hold the library
files.

Where should I place the PDF file in my Next.js app?

Place the PDF file in the public folder and reference it in the PSPDFKit.load function using the document

option.

Can I load PDFs asynchronously in Next.js?

Yes, use dynamic imports within a useEffect hook to load PSPDFKit asynchronously for better
performance.

Does PSPDFKit support loading PDFs from local files?

Yes, PSPDFKit can load local PDFs using the ArrayBuffer format with a file picker and the FileReader

API.

How do I optimize PSPDFKit's loading in Next.js?

To reduce the bundle size and improve perceived load time, asynchronously import PSPDFKit in the
client-side code.

https://www.nutrient.io/blog/open-pdf-nextjs/ 4/6
26/02/2025, 01:42 Open PDFs in a Next.js App with PSPDFKit | Nutrient

Ritesh Kumar
WEB ENGINEER

Thank you for

subscribing to our
Ritesh loves to write code, play keyboard, and paint. He likes working on projects that involve developer tooling, design
systems, and music. He wants to make art a part of everyone’s life by using technology.

newsletter!
Explore related topicsWe’re thrilled to have you join our community. You’re now
one step closer to receiving the latest updates, exclusive
WEB NEXT.JS JAVASCRIPT content,
HOW TOand special offers directly in your inbox.

Ready to get started?

Related articles
EXPLORE MORE

https://www.nutrient.io/blog/open-pdf-nextjs/ 5/6
26/02/2025, 01:42 Open PDFs in a Next.js App with PSPDFKit | Nutrient

Thank you for

subscribing to our
newsletter!
We’re thrilled to have you join our community. You’re now
one step closer to receiving the latest updates, exclusive
content, and special offers directly in your inbox.

How to merge PDFs using an SDK: A developer’s guide

POPULAR SDK RESOURCES COMMUNITY COMPANY CONNECT

Java PDF Web Blog Free Trial About Contact

Library
Mobile/VR Events Documentation Security LinkedIn
PDF SDK
Viewer Server Customer Nutrient Portal Careers YouTube
Stories
React Use Cases Contact Legal Discord
Native PDF Tutorials Support
SDK Industries Pricing X
Features
PDF SDK List Partners Facebook
iOS PDF Compare
Viewer
PDF Viewer
SDK/Library
PDF
Generation

Copyright 2024 Nutrient. All rights reserved.

https://www.nutrient.io/blog/open-pdf-nextjs/ 6/6