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. De hecho, SimplePDF funciona con Next.js.

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

1. Elijamos un nombre para nuestro proyecto:

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

2. 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

3. 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

4. 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

5. 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

6. Naveguemos a la carpeta

cd simple-pdf-react-embed-example/

7. ¡E iniciemos nuestro proyecto!

yarn dev
# o
npm dev

8. 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

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

1. 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

1. 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!

2. Importemos el componente EmbedPDF al inicio de nuestro archivo:

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

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

Y nuestro navegador debería mostrar lo siguiente: ¡un pequeño botón "Open SimplePDF!"!

Paso 4: ¿Qué sigue?

SimplePDF Embed es realmente potente y hay más por descubrir:

• Abrir un documento específico especificando la URL de ese documento
• Recibir eventos cuando el documento se carga y el envío se realiza
• Añadir su propia marca

Puede aprender más sobre todo esto en la documentación en Github.

¡Esperamos que haya disfrutado este tutorial!

Si tiene alguna pregunta o comentario, no dude en escribirnos usando el botón de feedback en la parte inferior derecha de su pantalla