Next.js Tutorial: Build Next.js Web PDF Viewer

 

Next.js is a versatile React framework that provides all the essential tools for building fast websites. Compared to traditional React, Next.js offers several key features and benefits, including server-side rendering, increased performance and speed, easy setup and deployment, better SEO optimization, and a stable and flexible API.

 

In this Next.js tutorial, we will guide you through building a PDF Viewer using the Next.js framework in conjunction with ComPDFKit PDF SDK for Web. Follow this tutorial and start to create a PDF viewer application for your Web page.

 

 

 

Requirements for Building Next.js App

 

To get started with your Next.js project, ensure you have the following prerequisites:

• The latest stable version of Node.js.
• A package manager compatible with NPM.
• Apply the License Key: Get a free 30-day license for your Next.js project on ComPDFKit website.

 

 

Download Next.js PDF Viewer SDK Package of ComPDFKit

 

To facilitate the integration of PDF viewing capabilities into your Next.js application, download the ComPDFKit SDK. There are two ways to obtain this package:

• GitHub: Access and clone the repository from GitHub to get sample implementations.
• NPM: Install the package directly from NPM and include it in your project.

With these steps, you should be well-prepared to begin developing a robust PDF viewer using Next.js and ComPDFKit.

 

 

Get and Apply the Free License for Next.js ComPDFKit PDF Viewer

 

License of ComPDFKit SDK for Web can be obtained on Website directly. Accurately obtaining the license key is crucial for the application of the license. In the email you received, locate the license key. If it is an XML file, it is an offline license; otherwise, it is an online license.

 

Offline License:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<license version="1">
    <platform>web</platform>
    <starttime>xxxxxxxx</starttime>
    <endtime>xxxxxxxx</endtime>
    <key>LICENSE_KEY</key>
</license>

 

Copy the value located at the LICENSE_KEY position within the <key>LICENSE_KEY</key> field. This is your license key.

• Apply the License Key for Offline License

You can fill in the license with the key in the init function to apply the license key:

// Import the JS file of ComPDFKit Web Demo.
import ComPDFKitViewer from "/@compdfkit/webviewer";

const viewer = document.getElementById('webviewer');
ComPDFKitViewer.init({
  pdfUrl: 'Your PDF Url',
  license: '<Input your license here>'
}, viewer)
.then((core) => {
  const docViewer = core.docViewer;
  docViewer.addEvent('documentloaded', () => {
    console.log('ComPDFKit Web Demo');
  })

 

Online License:

Online licensing supports dynamically updating license information. If we provide you with new services, you can obtain updates in real-time without any modifications.

 

 

Step 1: Create New Next.js Project

 

1. Create a new Next.js project:

npx create-next-app@latest

 

2. During the setup process, Next.js will prompt you with a series of questions, allowing you to customize your project. For this example, we usually use the defaults.
3. Change your directory to compdfkit-app:

cd compdfkit-app

 

 

Step 2: Add PDF Viewer Library of ComPDFKit

 

1. Install webviewer as a dependency with npm:

npm i @compdfkit_pdf_sdk/webviewer --save

 

2. Add the "webviewer" folder that contains the required static resource files to run the ComPDFKit Web demo, to your project’s public resource folder.The folder you need to copy is node_modules/@compdfkit_pdf_sdk/webviewer/dist.

cp -r ./node_modules/@compdfkit_pdf_sdk/webviewer/dist ./public/webviewer

 

 

Step 3: View PDF with Next.js PDF Viewer

 

1. Add the PDF document you want to display to the public/webviewer/example directory. You can use our demo document as an example.
2. When using the Web SDK, you need to use the path parameter to tell it where the copied static resources are located, if not, they will be relative to the current path.

If you chose JavaScript during the setup of your project, add the following code to your app/page.js file:

 

'use client';
import React, { useRef, useEffect } from 'react';
import Head from 'next/head'
import Webviewer from '@compdfkit_pdf_sdk/webviewer';

export default function Home() {
  const viewer = useRef(null);
  let docViewer = null;

  useEffect(() => {
    Webviewer.init({
      path: '/',
      pdfUrl: './example/developer_guide_web.pdf',
      license: '<Input your license here>',
    }, viewer.current).then((instance) => {
      docViewer = instance.docViewer;
      docViewer.addEvent('documentloaded', async () => {
        console.log('ComPDFKit Web Demo loaded');
      })
    })
  });

  return (
    <>
      <Head>
        <title>ComPDFKit Web Viewer</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div id="webviewer" ref={viewer} style={{ height: '100vh', overflow: 'hidden' }}></div>
    </>
  )
}

 

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, and more. Learn more about WebViewer’s comprehensive functionality by diving into the documentation.

Lastly, the style option helps us apply custom CSS like width and height on the viewer’s div element which WebViewer gets mounted on.

3. Start the app and open it in your default browser:

npm run dev

 

 

Final Words

 

By following this Next.js tutorial, you've ensured a seamless setup of a Next.js PDF viewer optimized for performance and usability. Dive deeper into ComPDFKit for Web to explore advanced PDF features and capabilities, enhancing your web application further.

For more information, refer to the following resources on ComPDFKit:

• Integration & Deployment: Get all guides for ComPDFKit for Web.
• Supported PDF Features: All supported features of ComPDFKit for Web.
• Licensing: Get the trial license for your PDF programs.

If you have any additional questions, the ComPDFKit support team is available to assist you.