Open PDFs in a Next.js app with Nutrient

Next.js(opens in a new tab) is a JavaScript framework created by Vercel(opens in a new tab) that lets you build server-side rendered and static web applications using React. It has many great features and advantages, which might make Next.js your first option for building your next web application.

In this blog post, we’ll show how to use our Next.js PDF library to open a PDF in your application in a matter of minutes.

Setting up Next.js

Use create-next-app(opens in a new tab) to start a new Next.js project by running the following:

npm i -g create-next-app
create-next-app

It’ll ask for the project name and create a directory with that name. One of the questions will ask if you want to use TypeScript. Respond with your preference (No or Yes) to set up your project accordingly.

Once inside that directory, you can run npm run dev to start the development server, and you can load the page on http://localhost:3000. Now, your next goal is to integrate Nutrient into your application.

Integrating Nutrient

Before you integrate Nutrient, you need to install the Nutrient package using npm:

npm install @nutrient-sdk/viewer

To open the PDF, you also need to integrate Nutrient Web SDK (our JavaScript PDF library). For Nutrient Web SDK to work, you have to copy the directory containing all the required library files (artifacts) to the public folder. Use the following command to do this:

cp -R ./node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib ./public

Alternatively, you can add the copy command as a postinstall hook in package.json:

{
  "scripts": {
    "dev": "next dev",
    "start": "next start",
    "build": "next build",
    "postinstall": "cp -R ./node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib ./public"
  }
}

This means every time you install the @nutrient-sdk/viewer package from npm, the nutrient-viewer-lib directory will automatically get copied from the node_modules folder to the public folder.

By default, Nutrient assumes that the assets folder is present in the same folder of your application module, but in your case, you kept it inside the public folder, so you’ll have to pass a baseUrl option while initializing Nutrient. In app/page.js, you’ll load Nutrient with the required options (to view all the options, visit our API documentation). Make sure you put your PDF file (in this case, document.pdf) in the public folder too. Now you’re ready to initialize Nutrient in app/page.js:

'use client';
import { useEffect, useRef } from 'react';

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

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

    if (typeof window !== 'undefined') {
      import('@nutrient-sdk/viewer').then((NutrientViewer) => {
        if (NutrientViewer) {
          NutrientViewer.unload(container);
        }

        NutrientViewer.load({
          container,
          document: '/document.pdf',
          baseUrl: `${window.location.protocol}//${window.location.host}/`,
        });
      });
    }
  }, []);

  return <div ref={containerRef} style={{ height: '100vh' }} />;
}

In the snippet above, NutrientViewer.load is called with a configuration object where you define:

• baseUrl, which is where your assets are available.
• document, which is the relative URL for your example PDF file. You can also pass the ArrayBuffer(opens in a new tab) of your file.
• container, which is where you mount Nutrient.

The above code uses Hooks. If you aren’t familiar with Hooks, you can read about them on the official React website(opens in a new tab).

You asynchronously import Nutrient inside a useEffect hook after the page has mounted. This way, you ensure your initial bundle size isn’t large, which results in a better perceived load time and the library loading only on the browser (since Nutrient is a client-side library).

Opening a local PDF

Nutrient Web SDK can also open local PDF files. In such a case, the document configuration option should be an ArrayBuffer of your file.

To open a file, you need to create a file picker(opens in a new tab) and, when selecting a file, convert it to ArrayBuffer using the FileReader API (see an example here(opens in a new tab)).

Once you have the PDF in the ArrayBuffer format, you can call NutrientViewer.load with it.

Wrapping up

You can now start the server by running npm run dev, and if everything works as expected, you’ll be able to see Nutrient running at http://localhost:3000.

Conclusion

With just a few lines of code, you were able to utilize the full power of our JavaScript PDF library in a Next.js application. In addition to opening and displaying a PDF in your application, Nutrient Web SDK can help you add advanced PDF capabilities to your app, including:

• 15+ out-of-the-box annotations to mark up, draw on, and add comments to documents.
• A PDF editor SDK to merge, split, rotate, and crop documents.
• PDF forms to create, fill, and capture PDF form data.
• Digital signatures to validate the authenticity and integrity of a PDF.
• And much more!

At Nutrient, we offer a commercial, feature-rich, and completely customizable JavaScript PDF library that’s easy to integrate and comes with well-documented APIs. Try it for free, or visit our web demo to see it in action.

FAQ