Comment ajouter l'éditeur SimplePDF à votre application Next.js

Benjamin André-Micolon

Next.js est devenu un standard pour le développement d'applications React. En fait, SimplePDF utilise Next.js !

Alors quoi de mieux que Next.js pour vous montrer comment intégrer l'éditeur SimplePDF dans votre propre application.

Vous pouvez sauter ce tutoriel et aller directement au code disponible dans le dépôt GitHub de SimplePDF embed.

Étape 1 : Configuration de notre projet

Si vous avez déjà une application Next.js ou React en cours d'exécution, vous pouvez passer directement à l'Étape 2 : Ajout de la dépendance SimplePDF Embed à notre projet ou à l'Étape 3 : Ajout de l'éditeur SimplePDF à notre application Next.js

Commençons par utiliser l'outil CLI de Next.js pour configurer interactivement notre projet.

Exécutez la commande suivante dans votre terminal de choix et suivez les étapes.

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

1. Choisissons un nom pour notre projet :

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

2. Chez SimplePDF, nous adorons Typescript, alors nous dirons "oui !" à l'étape suivante.

Ce n'est pas une obligation, donc pas de souci si vous n'êtes pas familier avec Typescript !

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

3. Utilisons également ESLint

De même, ESLint n'est pas obligatoire, donc si vous n'êtes pas familier, dites simplement non

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

4. L'heure est venue pour notre ordinateur de travailler : téléchargement et installation des dépendances nécessaires

Nous utilisons yarn, donc si vous utilisez npm par exemple, le message sera légèrement différent

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

5. Une fois terminé, vous devriez voir ce message :

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

6. Allons dans le dossier

cd simple-pdf-react-embed-example/

7. Et démarrons notre projet !

yarn dev
# or
npm dev

8. Si tout s'est bien passé, vous devriez voir :

$ 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)

Notre serveur fonctionne à l'adresse suivante : http://localhost:3000

Voici ce que vous devriez voir

Il peut y avoir de légères différences selon le moment où vous suivez ce tutoriel

Étape 2 : Ajout de la dépendance SimplePDF Embed à notre projet

Préalable : une application React (Next.js) en cours d'exécution localement - si vous avez suivi l'étape précédente, tout va bien !

Confirmation que nous sommes au bon endroit : en exécutant la commande suivante

ls

devrait lister ces fichiers :

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

Commençons par ajouter @simplepdf/react-embed-pdf à notre projet

1. Installez @simplepdf/react-embed-pdf

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

Une fois installé, vous devriez voir ce message :

Nous utilisons yarn, donc si vous utilisez npm par exemple, le message sera légèrement différent

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.

C'est le moment d'écrire du code React !

Étape 3 : Ajout de l'éditeur SimplePDF à notre application Next.js

Dans cette étape, nous allons apprendre à ajouter le composant de l'éditeur SimplePDF : ce composant nous permettra d'ouvrir n'importe quel PDF depuis notre application.

Commençons par ouvrir le code de notre application dans l'éditeur de code de notre choix - chez SimplePDF, nous aimons vraiment VScode

1. Nettoyons un peu en supprimant tout ce qui est à l'intérieur de main et mettons à jour le titre de la page :

Le code devrait maintenant ressembler à ceci :

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>
    </>
  )
}

Et notre navigateur devrait afficher la page suivante : rien !

2. Importons le composant EmbedPDF en haut de notre fichier :

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

3. Et ajoutons-le à notre code :

Vous n'avez besoin que d'un seul enfant à l'intérieur de EmbedPDF. Cela peut être n'importe quel élément HTML : a, div, button...

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

Le code complet devrait ressembler à ceci :

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>
    </>
  )
}

Et notre navigateur devrait afficher ce qui suit : un petit bouton "Ouvrir SimplePDF !"

Étape 4 : Que faire ensuite ?

L'intégration SimplePDF est vraiment puissante et il y a encore plus à découvrir :

• Ouvrir un document spécifique en spécifiant l'URL de ce document
• Recevoir des événements chaque fois qu'un document est chargé et que la soumission est envoyée
• Ajouter votre propre personnalisation de marque

Vous pouvez en apprendre davantage sur tout cela dans la documentation sur GitHub.

Nous espérons que vous avez apprécié ce tutoriel !

Si vous avez des questions ou des commentaires, n'hésitez pas à nous le faire savoir en utilisant le bouton de feedback en bas à droite de votre écran.