document viewer in Nextjs

How to Build a Document Viewer in Nextjs?

This guide will show you how to display a document viewer component using react-documents package in a Nextjs application.

With this package, you can show the following types of documents:

  • ppt
  • pptx
  • doc
  • docx
  • xls
  • xlsx
  • pdf

Let’s start.

Steps to create a Document Previewer

1. Create a Next.js project

Open a text editor of your choice (I use VS Code) and type the following command in the terminal:

npx create-next-app@latest

Follow the instructions and a new Next.js app will be created.

You can run the app with npm run dev and go to http://localhost:3000 to see your application.

The Nextjs app on http://localhost:3000
The Nextjs app on http://localhost:3000

2. Install react-documents package

react documents home page on npm
react-documents home page on npm

Install the react-documents package with this command:

npm i react-documents

Now, in your package.json file, the following line will be added:

"react-documents": "^1.2.1"

3. Add the code for document preview

Copy the code below into the page.js file present in this path: app\page.js

<DocumentViewer queryParams="hl=Nl"></DocumentViewer>

Do not save just yet as it will throw a runtime error.

The ugly runtime error that Nextjs developers run frequently to

To prevent this error, paste the code below on the top of your page.js file:

"use client";

Now, code will look like this:

If you save now, this is how your project will look like on the browser.

This is because we did not add the location or the URL of the document, so nothing can be previewed.

4. Add a document URL

You can use this PDF URL:

Now, add the code below to the DocumentViewer component.


Now, code will be like this:

5. Final result

Save the project and check the browser. The PDF will be displayed on the viewer component.

Screenshot of the document viewer in Nextjs

You can enhance the look and feel of the page by adding a few styles.


This guide talked about how to display a component for document viewer in a Nextjs app with the help of react-documents package. Likewise you can follow the same procedure for React.

Additionally, you can use one more package called React PDF Viewer for displaying just PDFs on the Nextjs/React application.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top