Come aggiungere l'editor SimplePDF alla tua app Next.js

Benjamin André-Micolon

Next.js è diventato uno standard per lo sviluppo di applicazioni React. SimplePDF stesso è costruito con Next.js!

Quale scelta migliore di Next.js per mostrarti come integrare l'editor SimplePDF nella tua app.

Puoi saltare questo tutorial e andare direttamente al codice disponibile nel repository Github di SimplePDF embed.

Passaggio 1: Configurazione del progetto

Se hai già un'app Next.js o React funzionante, puoi andare direttamente al Passaggio 2: Aggiunta della dipendenza SimplePDF Embed al progetto o al Passaggio 3: Aggiunta dell'editor SimplePDF alla nostra app Next.js

Iniziamo usando lo strumento CLI di Next.js per configurare il nostro progetto in modo interattivo.

Esegui il seguente comando nel terminale e segui i passaggi.

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

1. Scegliamo un nome per il nostro progetto:

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

2. A SimplePDF ci piace molto Typescript, quindi diremo "sì!" al prossimo passaggio.

Non è un requisito, quindi nessun problema se non hai familiarità con Typescript!

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

3. Usiamo anche ESLint

Allo stesso modo, ESLint non è un requisito, quindi se non lo conosci, rispondi no

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

4. È il momento che il nostro computer faccia un po' di lavoro: recupero e installazione delle dipendenze necessarie

Stiamo usando yarn, quindi se usi npm ad esempio, il messaggio sarà leggermente diverso

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

5. Una volta completato, dovresti vedere questo messaggio:

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

6. Navighiamo nella cartella

cd simple-pdf-react-embed-example/

7. E avviamo il nostro progetto!

yarn dev
# or
npm dev

8. Se tutto è andato bene, dovresti vedere quanto segue:

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

Il nostro server è attivo e funzionante al seguente URL: http://localhost:3000

Ecco cosa dovresti vedere

Potrebbero esserci alcune piccole differenze a seconda di quando segui questo tutorial

Passaggio 2: Aggiunta della dipendenza SimplePDF Embed al progetto

Prerequisito: un'app React (Next.js) funzionante in locale - se hai seguito il passaggio precedente, sei a posto!

Confermiamo di essere nella posizione giusta: eseguendo il seguente comando

ls

dovrebbe elencare questi file:

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

Iniziamo aggiungendo @simplepdf/react-embed-pdf al nostro progetto

1. Installa @simplepdf/react-embed-pdf

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

Una volta installato, dovresti vedere il seguente messaggio:

Stiamo usando yarn, quindi se usi npm ad esempio, il messaggio sarà leggermente diverso

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.

È il momento di scrivere un po' di codice React!

Passaggio 3: Aggiunta dell'editor SimplePDF alla nostra app Next.js

In questo passaggio impareremo come aggiungere il componente editor SimplePDF: questo componente ci permetterà di aprire qualsiasi PDF dall'interno della nostra applicazione.

Iniziamo aprendo il codice della nostra app nell'editor di codice preferito - a SimplePDF ci piace molto VScode

1. Facciamo un po' di ordine rimuovendo tutto all'interno di main e aggiornando il titolo della pagina:

Il codice dovrebbe ora apparire così:

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

E il nostro browser dovrebbe mostrare la seguente pagina: niente!

2. Importiamo il componente EmbedPDF nella parte superiore del nostro file:

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

3. E aggiungiamolo al nostro codice:

Nota che è necessario un solo elemento figlio all'interno di EmbedPDF. Può essere qualsiasi elemento HTML: a, div, button...

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

Il codice completo dovrebbe apparire così:

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

E il nostro browser dovrebbe mostrare quanto segue: un piccolo pulsante "Open SimplePDF!"!

Passaggio 4: E dopo?

SimplePDF Embed è davvero potente e c'è altro da scoprire:

• Apri un documento specifico indicando l'URL di quel documento
• Ricevi eventi ogni volta che il documento viene caricato e la compilazione viene inviata
• Aggiungi il tuo branding

Puoi saperne di più nella documentazione su Github.

Speriamo che questo tutorial ti sia piaciuto!

Se hai domande o commenti, non esitare a farcelo sapere usando il pulsante di feedback in basso a destra dello schermo