How to add the SimplePDF editor to your Next.js App

December 20, 2022

Benjamin André-Micolon

Next.js has become a standard for developing React applications. In fact, SimplePDF is powered by Next.js!

So what better choice than Next.js to show you how to embed the SimplePDF editor into your own app.

You can skip this tutorial and get straight to the code that is available in the SimplePDF embed Github repository.

Step 1: Setting up our project

If you already have a Next.js or React app running, you can go straight to the Step 2: Adding SimplePDF Embed dependency to our project or Step 3: Adding the SimplePDF editor to our Next.js app

Let's start by using the Next.js CLI tool to interactively set up our project.

Run the following command in your terminal of choice and follow the steps.

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

1. Let's choose a name for our project:

? What is your project named? › simple-pdf-react-embed-example

2. At SimplePDF we really like Typescript, so we'll say "yes!" to the next step.

This is not a requirement, so no worries if you're not familiar with Typescript!

? Would you like to use TypeScript with this project? › No / Yes

3. Let's also use ESLint

Likewise, ESLint is not a requirement, so if you're not familiar with it, just say no

Would you like to use ESLint with this project? › No / Yes

4. Time for our computer to do some work: fetching and installing the necessary dependencies

We're using yarn, so if you use npm for example, the message will be slightly different

info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[#####################################-------------------------------------------------------] 105/263

5. Once successful, you should be greeted with this message:

Success! Created simple-pdf-react-embed-example at /Users/bendersej/workspace/widget-simplepdf/react/simple-pdf-react-embed-example

6. Let's navigate to the folder

cd simple-pdf-react-embed-example/

7. And start our project!

yarn dev
# or
npm dev

8. If everything went well, you should now see the following:

$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 529 ms (165 modules)

Our server is up and running at the following URL: http://localhost:3000

This is what you should see

There might be some small differences depending on when you're following this tutorial

Step 2: Adding SimplePDF Embed dependency to our project

Prerequisite: a React (Next.js) app running locally - if you followed the previous step, you're all good!

Confirming that we are at the right location: running the following command

ls

should list these files:

README.md      next.config.js package.json   public         tsconfig.json  yarn.lock
next-env.d.ts  node_modules   pages          styles         yarn-error.log

Let's start by adding @simplepdf/react-embed-pdf to our project

1. Install @simplepdf/react-embed-pdf

yarn add @simplepdf/react-embed-pdf
# or
npm install @simplepdf/react-embed-pdf

Once installed, you should see the following message:

We're using yarn, so if you use npm for example, the message will be slightly different

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @simplepdf/react-embed-pdf@1.3.0
info All dependencies
└─ @simplepdf/react-embed-pdf@1.3.0
✨  Done in 5.91s.

Time to write some React code!

Step 3: Adding the SimplePDF editor to our Next.js app

In this step we will learn how to add the SimplePDF editor component: this component will allow us to open any PDFs from within our application.

Let's start by opening the code of our app in our code editor of choice - at SimplePDF we really like VScode

1. Let's clean up the room a bit by removing everything inside main and update the page title:

The code should now look like this:

import Head from 'next/head'
import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>SimplePDF Embed Example</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
      </main>
    </>
  )
}

And our browser should display the following page: nothing!

2. Let's import the EmbedPDF component at the top of our file:

import { EmbedPDF } from '@simplepdf/react-embed-pdf';

3. And add it to our code:

Note that you only need one child inside EmbedPDF. It can be any HTML element: a, div, button...

<EmbedPDF>
  <div className={inter.className}>
    <div className={styles.card}>Open SimplePDF!</div>
  </div>
</EmbedPDF>

The entire code should look as follows:

import Head from 'next/head'
import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'
import { EmbedPDF } from '@simplepdf/react-embed-pdf';

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>SimplePDF Embed Example</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <EmbedPDF>
          <div className={inter.className}>
            <div className={styles.card}>Open SimplePDF!</div>
          </div>
        </EmbedPDF>
      </main>
    </>
  )
}

And our browser should display the following: a tiny "Open SimplePDF!" button!

Step 4: What's next?

SimplePDF Embed is really powerful and there's more for you to discover:

• Open a specific document by specifying the URL of that document
• Receive events whenever the document is loaded and the submission is sent
• Add your own branding

You can learn more about all of this in the documentation on Github.

We hope that you enjoyed this tutorial!

If you have any question or comment, feel free to let us know using the feedback button in bottom right side of your screen