WebViewer is a powerful JavaScript-based PDF Library that is part of the Apryse SDK. It 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.
This sample is specifically designed for any users interested in integrating WebViewer into a Next.js 14 project. With the source code access, it gives developers full control to customize and style the UI, build custom controls and logic, integrate into workflows, or build a UI from scratch.
Due to SSR in Next.js, the module needs to be imported dynamically, to avoid a "window is not defined" error due to re-rendering. Read more here: vercel/next.js#42319
A license key is required to run WebViewer. You can obtain a trial key in our get started guides, or by signing-up on our developer portal.
WebViewer comes with a 7-day trial without any feature limitations or trial key needed. To extend the trial, you can obtain the trial key by signing-up on our developer portal.
Before you begin, make sure the development environment includes Node.js.
git clone --depth=1 https://github.com/ApryseSDK/webviewer-samples.git
cd webviewer-samples/webviewer-nextjs-14
npm install
npm run dev
npm run build
npm start
npm run lint