Cómo añadir el editor SimplePDF a su aplicación Next.js

Benjamin André-Micolon

Next.js se ha convertido en un estándar para desarrollar aplicaciones React.

Así que qué mejor elección que Next.js para mostrarle cómo integrar el editor SimplePDF en su propia aplicación.

Puede omitir este tutorial e ir directamente al código disponible en el repositorio Github de SimplePDF embed.

Paso 1: Configurar nuestro proyecto

Si ya tiene una aplicación Next.js o React en funcionamiento, puede ir directamente al Paso 2: Añadir la dependencia SimplePDF Embed a nuestro proyecto o Paso 3: Añadir el editor SimplePDF a nuestra aplicación Next.js

Empecemos usando la herramienta CLI de Next.js para configurar nuestro proyecto de forma interactiva.

Ejecute el siguiente comando en su terminal preferida y siga los pasos.

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

Elijamos un nombre para nuestro proyecto:

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

En SimplePDF nos gusta mucho TypeScript, así que diremos "¡sí!" en el siguiente paso.

Esto no es un requisito, así que no se preocupe si no está familiarizado con TypeScript.

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

Usemos también ESLint

Igualmente, ESLint no es un requisito, así que si no lo conoce, diga no

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

Es hora de que nuestro ordenador trabaje: descargando e instalando las dependencias necesarias

Estamos usando yarn, así que si usa npm por ejemplo, el mensaje será ligeramente diferente

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

Una vez completado, debería ver este mensaje:

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

Naveguemos a la carpeta

cd simple-pdf-react-embed-example/

¡E iniciemos nuestro proyecto!

yarn dev
# o
npm dev

Si todo ha ido bien, debería ver lo siguiente:

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

Nuestro servidor está en funcionamiento en la siguiente URL: http://localhost:3000

Esto es lo que debería ver

Puede haber pequeñas diferencias dependiendo de cuándo siga este tutorial

Nuestro proyecto antes de añadir SimplePDF embed

Paso 2: Añadir la dependencia SimplePDF Embed a nuestro proyecto

Requisito previo: una aplicación React (Next.js) ejecutándose localmente. Si siguió el paso anterior, todo listo.

Confirmemos que estamos en la ubicación correcta: ejecutando el siguiente comando

ls

debería listar estos archivos:

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

Empecemos añadiendo @simplepdf/react-embed-pdf a nuestro proyecto

Instale @simplepdf/react-embed-pdf

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

Una vez instalado, debería ver el siguiente mensaje:

Estamos usando yarn, así que si usa npm por ejemplo, el mensaje será ligeramente diferente

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.

¡Es hora de escribir algo de código React!

Paso 3: Añadir el editor SimplePDF a nuestra aplicación Next.js

En este paso aprenderemos cómo añadir el componente del editor SimplePDF: este componente nos permitirá abrir cualquier PDF desde nuestra aplicación.

Empecemos abriendo el código de nuestra aplicación en nuestro editor de código preferido - en SimplePDF nos gusta mucho VScode

Limpiemos un poco eliminando todo dentro de main y actualicemos el título de la página:

El código debería verse así:

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

Y nuestro navegador debería mostrar lo siguiente: ¡nada!

Punto de partida para añadir el editor SimplePDF

Importemos el componente EmbedPDF al inicio de nuestro archivo:

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

Y añadámoslo a nuestro código:

Tenga en cuenta que solo necesita un elemento hijo dentro de EmbedPDF. Puede ser cualquier elemento HTML: a, div, button...

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

El código completo debería verse así:

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