Skip to content

SDK

Low-Code

Workflow

DWS API
Nutrient Web SDK

Add PDF functionality with Next.js

Nutrient Web SDK is a JavaScript PDF library for viewing, annotating, and editing PDFs directly in the browser. Use it to add PDF capabilities to any web app.

This guide walks you through the steps to integrate Nutrient Web SDK into your project. By the end, you'll be able to render a PDF document in the UI.

Test without installing You can test the SDK capabilities in our playground.
Jump to example Prefer to jump straight to code? View the example repo on GitHub.

Installation

You can load Nutrient Web SDK directly from Nutrient's content delivery network (CDN). Nutrient maintains the CDN for customers and it's a good way to get started. For more control and flexibility, you can use local installation.

  1. Add the following in your NextJS layout component (for example, layout.tsx):

    layout.tsx
    import Script from "next/script";
    

    export default function RootLayout({
      children,
    }: Readonly<{
      children: React.ReactNode;
    }>) {
      return (
        <html lang="en">
          <head>
            <Script
              src="https://cdn.cloud.pspdfkit.com/[email protected]/nutrient-viewer.js"
              // Load before the page becomes interactive to reference window.NutrientViewer in the client
              strategy="beforeInteractive"
            />
          </head>
          <body>
            {children}
          </body>
        </html>
      );
    }

  2. You're now ready to use the Nutrient Web SDK and reference window.NutrientViewer in the client side code.

Render a PDF

This guide covers integration using app router. You can use a similar approach for pages router.

  1. Load the PDF file into a component (for example, page.tsx) using NutrientViewer:

    page.tsx
    // Only render the SDK on the client-side
    "use client";
    

    import React, { useEffect, useRef } from "react";
    

    export default function Home() {
      const containerRef = useRef(null);
    

      useEffect(() => {
        const container = containerRef.current;
    

        const { NutrientViewer } = window;
        if (container && NutrientViewer) {
          NutrientViewer.load({
            container,
            // You can specify a file in public directory, for example /document.pdf
            document: "https://www.nutrient.io/downloads/pspdfkit-web-demo.pdf",
          });
        }
    

        return () => {
          NutrientViewer?.unload(container);
        };
      }, []);
    

      // You must set the container height and width
      return <div ref={containerRef} style={{ height: "100vh", width: "100%" }} />;
    }

  2. Start the development server:

    Terminal window
    npm run dev

  3. You should see the PDF rendered in the Nutrient Web SDK UI.

Next steps

Further steps to set up your project.

Automatically copy assets

Nutrient Web SDK requires its assets to be in the public directory so it can load them as and when needed.

This is required during the initial setup and whenever you update the SDK version. You can add a script in package.json to automate this. Set the script to run before starting the development server or building the app:

{
  "scripts": {
    "copy-assets": "cp -R ./node_modules/@nutrient-sdk/viewer/dist/ public/nutrient-viewer",
    "dev": "npm run copy-assets && next dev --turbo",
    "build": "npm run copy-assets && next build"
  }
}

You can include the SDK assets public/nutrient-viewer in your .gitignore file to avoid committing them to your repository.

TypeScript with CDN installation

Nutrient Web SDK comes with built-in support for TypeScript. This should work out of the box for local installation. For the CDN installation follow these steps:

  1. Add the Nutrient Web SDK dependency, if not done previously:

    Terminal window
    npm i @nutrient-sdk/viewer

  2. Create a module for custom typings (for example, global.d.ts in the root directory) to reference the built-in typings for the SDK:

    global.d.ts
    import NutrientViewer from "@nutrient-sdk/viewer";
    

    declare global {
      interface Window {
        // Nutrient Web SDK will be available on window.NutrientViewer once loaded
        NutrientViewer?: typeof NutrientViewer;
      }
    }

  3. Restart the TS server or your editor if needed.

Optimize CDN installation

If you use the CDN installation approach in production, Nutrient recommends optimizations such as prefetching.

Troubleshooting

Example View the example repo on GitHub.
Facing issues? Visit the troubleshooting guide for solutions to some common errors.