Hoe de SimplePDF-editor toevoegen aan uw Next.js-app

Benjamin André-Micolon

Next.js is een standaard geworden voor het ontwikkelen van React-applicaties. SimplePDF draait zelf ook op Next.js!

Welke betere keuze dan Next.js om u te laten zien hoe u de SimplePDF-editor in uw eigen app integreert.

U kunt deze tutorial overslaan en direct naar de code gaan die beschikbaar is in de SimplePDF embed Github-repository.

Stap 1: Ons project opzetten

Als u al een Next.js- of React-app draaiende heeft, kunt u direct naar Stap 2: SimplePDF Embed-afhankelijkheid toevoegen aan ons project of Stap 3: De SimplePDF-editor toevoegen aan onze Next.js-app gaan

Laten we beginnen met het Next.js CLI-gereedschap om interactief ons project op te zetten.

Voer het volgende commando uit in uw terminal en volg de stappen.

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

1. Laten we een naam kiezen voor ons project:

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

2. Bij SimplePDF zijn we grote fans van TypeScript, dus we zeggen "ja!" bij de volgende stap.

Dit is geen vereiste, dus geen zorgen als u niet bekend bent met TypeScript!

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

3. Laten we ook ESLint gebruiken

ESLint is ook geen vereiste, dus als u er niet bekend mee bent, zeg dan gewoon nee

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

4. Tijd voor onze computer om wat werk te doen: de benodigde afhankelijkheden ophalen en installeren

We gebruiken yarn, dus als u bijvoorbeeld npm gebruikt, zal het bericht enigszins anders zijn

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

5. Na succes zou u dit bericht moeten zien:

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

6. Laten we naar de map navigeren

cd simple-pdf-react-embed-example/

7. En ons project starten!

yarn dev
# of
npm dev

8. Als alles goed is gegaan, zou u nu het volgende moeten zien:

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

Onze server draait op de volgende URL: http://localhost:3000

Dit is wat u zou moeten zien

Er kunnen kleine verschillen zijn, afhankelijk van wanneer u deze tutorial volgt

Stap 2: SimplePDF Embed-afhankelijkheid toevoegen aan ons project

Vereiste: een React (Next.js)-app die lokaal draait - als u de vorige stap heeft gevolgd, bent u klaar!

Bevestig dat we op de juiste locatie zijn: het volgende commando uitvoeren

ls

zou deze bestanden moeten tonen:

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

Laten we beginnen met het toevoegen van @simplepdf/react-embed-pdf aan ons project

1. Installeer @simplepdf/react-embed-pdf

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

Na installatie zou u het volgende bericht moeten zien:

We gebruiken yarn, dus als u bijvoorbeeld npm gebruikt, zal het bericht enigszins anders zijn

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.

Tijd om wat React-code te schrijven!

Stap 3: De SimplePDF-editor toevoegen aan onze Next.js-app

In deze stap leren we hoe we de SimplePDF-editor-component toevoegen: met deze component kunnen we elke PDF openen vanuit onze applicatie.

Laten we beginnen door de code van onze app te openen in onze favoriete code-editor - bij SimplePDF zijn we grote fans van VScode

1. Laten we eerst opruimen door alles binnen main te verwijderen en de paginatitel bij te werken:

De code zou er nu zo uit moeten zien:

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

En onze browser zou de volgende pagina moeten tonen: niets!

2. Laten we de EmbedPDF-component importeren bovenaan ons bestand:

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

3. En het toevoegen aan onze code:

Let op: u heeft slechts een child-element nodig binnen EmbedPDF. Het kan elk HTML-element zijn: a, div, button...

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

De volledige code zou er als volgt uit moeten zien:

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

En onze browser zou het volgende moeten tonen: een kleine "Open SimplePDF!"-knop!

Stap 4: Wat nu?

SimplePDF Embed is zeer krachtig en er is meer voor u te ontdekken:

• Open een specifiek document door de URL van dat document op te geven
• Ontvang events wanneer het document is geladen en de inzending is verstuurd
• Voeg uw eigen branding toe

U kunt er meer over leren in de documentatie op Github.

We hopen dat u deze tutorial leuk vond!

Als u vragen of opmerkingen heeft, laat het ons weten via de feedbackknop rechtsonder in uw scherm