Next.js PDF viewer with React-PDF and Nutrient SDK

next-viewer/
├── public/
│   └── example.pdf
├── scripts/
│   └── copy-pdf-assets.cjs
└── src/
    ├── app/
    │   ├── layout.js
    │   └── page.js
    └── components/
        ├── PDFViewer.js
        └── PDFViewerClient.js

const fs = require('node:fs');
const path = require('node:path');

const reactPdfDirectory = path.dirname(require.resolve('react-pdf'));
const pdfjsDirectory = path.dirname(
  require.resolve('pdfjs-dist/package.json', {
    paths: [reactPdfDirectory],
  }),
);

fs.mkdirSync('public/pdfjs', { recursive: true });
fs.copyFileSync(
  path.join(pdfjsDirectory, 'build/pdf.worker.min.mjs'),
  'public/pdfjs/pdf.worker.min.mjs',
);
for (const directory of ['cmaps', 'standard_fonts', 'wasm']) {
  fs.cpSync(
    path.join(pdfjsDirectory, directory),
    path.join('public/pdfjs', directory),
    { recursive: true },
  );
}

'use client';

import { useEffect, useRef, useState } from 'react';
import { Document, Page, pdfjs } from 'react-pdf';
import 'react-pdf/dist/Page/TextLayer.css';
import 'react-pdf/dist/Page/AnnotationLayer.css';

pdfjs.GlobalWorkerOptions.workerSrc = '/pdfjs/pdf.worker.min.mjs';

const options = {
  cMapUrl: '/pdfjs/cmaps/',
  standardFontDataUrl: '/pdfjs/standard_fonts/',
  wasmUrl: '/pdfjs/wasm/',
};

export default function PDFViewerClient() {
  const containerRef = useRef(null);
  const [width, setWidth] = useState(0);
  const [numPages, setNumPages] = useState(0);
  const [pageNumber, setPageNumber] = useState(1);
  const [failed, setFailed] = useState(false);

  useEffect(() => {
    const observer = new ResizeObserver(([entry]) => {
      setWidth(Math.floor(entry.contentRect.width));
    });
    observer.observe(containerRef.current);
    return () => observer.disconnect();
  }, []);

  return (
    <section aria-label="PDF viewer">
      <nav aria-label="PDF page navigation">
        <button
          type="button"
          disabled={!numPages || pageNumber <= 1}
          onClick={() => setPageNumber((page) => Math.max(1, page - 1))}
        >
          Previous
        </button>
        <button
          type="button"
          disabled={!numPages || pageNumber >= numPages}
          onClick={() =>
            setPageNumber((page) => Math.min(numPages, page + 1))
          }
        >
          Next
        </button>
        <p aria-live="polite">
          {numPages
            ? 'Page ' + pageNumber + ' of ' + numPages
            : failed ? 'PDF unavailable.' : 'Loading PDF…'}
        </p>
      </nav>
      <div ref={containerRef} style={{ width: '100%', maxWidth: 800 }}>
        <Document
          file="/example.pdf"
          options={options}
          suspense={false}
          onLoadSuccess={({ numPages }) => {
            setNumPages(numPages);
            setPageNumber(1);
            setFailed(false);
          }}
          onLoadError={() => {
            setNumPages(0);
            setFailed(true);
          }}
          loading={<p>Loading document…</p>}
          error={<p role="alert">Could not load the PDF. Check its URL and permissions.</p>}
          onItemClick={({ pageNumber }) => {
            if (pageNumber) setPageNumber(pageNumber);
          }}
        >
          {width > 0 && (
            <Page
              pageNumber={pageNumber}
              width={width}
              renderTextLayer
              renderAnnotationLayer
              loading={<p>Loading page…</p>}
              error={<p role="alert">Could not render this page.</p>}
            />
          )}
        </Document>
      </div>
    </section>
  );
}

'use client';

import dynamic from 'next/dynamic';

const PDFViewerClient = dynamic(() => import('./PDFViewerClient'), {
  ssr: false,
  loading: () => <p>Loading viewer…</p>,
});

export default function PDFViewer() {
  return <PDFViewerClient />;
}

import PDFViewer from '@/components/PDFViewer';

export default function Home() {
  return (
    <main style={{ padding: 16 }}>
      <h1>PDF viewer</h1>
      <PDFViewer />
    </main>
  );
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body style={{ margin: 0, fontFamily: 'sans-serif' }}>{children}</body>
    </html>
  );
}

'use client';

import { useEffect, useRef, useState } from 'react';

export default function NutrientPDFViewer() {
  const containerRef = useRef(null);
  const [error, setError] = useState('');

  useEffect(() => {
    const container = containerRef.current;
    const controller = new AbortController();
    let NutrientViewer;

    async function openPDF() {
      NutrientViewer = (await import('@nutrient-sdk/viewer')).default;
      if (controller.signal.aborted) return;

      const response = await fetch('/example.pdf', {
        signal: controller.signal,
      });
      if (!response.ok) {
        throw new Error('PDF download failed: ' + response.status);
      }
      const document = await response.arrayBuffer();
      if (controller.signal.aborted) return;

      await NutrientViewer.load({
        container,
        document,
        baseUrl: window.location.origin + '/',
        signal: controller.signal,
        // Add your production license key here when deploying.
      });
    }

    openPDF().catch((loadError) => {
      if (!controller.signal.aborted) {
        setError(loadError.message || 'Could not open the PDF.');
      }
    });

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

  return (
    <section aria-label="Nutrient PDF viewer">
      {error && <p role="alert">{error}</p>}
      <div ref={containerRef} style={{ width: '100%', height: '85vh' }} />
    </section>
  );
}

import NutrientPDFViewer from '@/components/NutrientPDFViewer';

export default function Home() {
  return (
    <main>
      <h1>PDF viewer</h1>
      <NutrientPDFViewer />
    </main>
  );
}