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 user interface (UI).

Test without installing
Jump to example

Installation

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

  1. Add the following in your Next.js 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">
          <body>
            <Script
              src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@1.7.0/nutrient-viewer.js"
              // Load before the page becomes interactive to reference `window.NutrientViewer` in the client.
              strategy="beforeInteractive"
            />
            {children}
          </body>
        </html>
      );
    }

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

Rendering a PDF

This guide covers integration using App Router(opens in a new tab) (Next.js 13+). You can use a similar approach for Pages Router(opens in a new tab) (Next.js 12 and earlier).

  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;
    

        if (container && window.NutrientViewer) {
          window.NutrientViewer.load({
            container,
            document: "https://www.nutrient.io/downloads/nutrient-web-demo.pdf",
          });
        }
    

        return () => {
          if (window.NutrientViewer && container) {
            window.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’ll see the PDF rendered in the Nutrient Web SDK UI.

Next steps

This section outlines additional steps for setting up your project.

Automatically copying 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",
    "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.

Nutrient Web SDK comes with built-in TypeScript support for a better development experience with autocompletion and type safety.

For a local installation — TypeScript support works out of the box.

For CDN installation — Follow the steps below to add the correct type declarations.

  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;
      }
    }
    

    export {}; // Make this file a module.

  3. Update tsconfig.json to include the types directory. This step is only needed if TypeScript doesn’t automatically detect the global.d.ts file:

    {
      "compilerOptions": {
        "typeRoots": ["./types", "./node_modules/@types"]
      }
    }

  4. Restart the TypeScript server or your editor.

With correct type declarations, you’ll get complete IntelliSense support, including autocompletion for SDK methods and error checking.

Optimizing CDN installation

If you use the CDN installation approach in production, we recommend optimizations such as prefetching(opens in a new tab).

Troubleshooting

If you encounter issues, refer to the common issues guide.

Note for developers using AI coding assistants: To get accurate troubleshooting help, copy the content from the troubleshooting guide, and include it in your prompt, along with your specific error.