Como adicionar o editor SimplePDF à sua aplicação Next.js

Benjamin André-Micolon

O Next.js tornou-se um padrão para desenvolver aplicações React.

Que melhor escolha do que o Next.js para mostrar como integrar o editor SimplePDF na sua própria aplicação.

Pode saltar este tutorial e ir diretamente ao código disponível no repositório Github do SimplePDF embed.

Passo 1: Configurar o nosso projeto

Se já tem uma aplicação Next.js ou React em execução, pode ir diretamente ao Passo 2: Adicionar a dependência SimplePDF Embed ao nosso projeto ou Passo 3: Adicionar o editor SimplePDF à nossa aplicação Next.js

Vamos começar por usar a ferramenta CLI do Next.js para configurar interativamente o nosso projeto.

Execute o seguinte comando no seu terminal de preferência e siga os passos.

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

Vamos escolher um nome para o nosso projeto:

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

No SimplePDF gostamos muito de Typescript, por isso vamos dizer "sim!" ao passo seguinte.

Isto não é um requisito, por isso não se preocupe se não está familiarizado com Typescript!

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

Vamos também usar o ESLint

Da mesma forma, o ESLint não é um requisito, por isso se não está familiarizado, diga apenas não

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

Agora o nosso computador vai trabalhar: buscar e instalar as dependências necessárias

Estamos a usar yarn, por isso se usar npm por exemplo, a mensagem será ligeiramente diferente

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

Quando terminar com sucesso, deverá ver esta mensagem:

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

Vamos navegar para a pasta

cd simple-pdf-react-embed-example/

E iniciar o nosso projeto!

yarn dev
# ou
npm dev

Se tudo correu bem, deverá agora ver o seguinte:

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

O nosso servidor está em execução no seguinte URL: http://localhost:3000

Isto é o que deverá ver

Poderá haver pequenas diferenças dependendo de quando está a seguir este tutorial

O nosso projeto antes de adicionar o SimplePDF embed

Passo 2: Adicionar a dependência SimplePDF Embed ao nosso projeto

Pré-requisito: uma aplicação React (Next.js) em execução localmente - se seguiu o passo anterior, está tudo pronto!

A confirmar que estamos no local certo: executando o seguinte comando

ls

deverá listar estes ficheiros:

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

Vamos começar por adicionar o @simplepdf/react-embed-pdf ao nosso projeto

Instale o @simplepdf/react-embed-pdf

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

Uma vez instalado, deverá ver a seguinte mensagem:

Estamos a usar yarn, por isso se usar npm por exemplo, a mensagem será ligeiramente 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.

Hora de escrever código React!

Passo 3: Adicionar o editor SimplePDF à nossa aplicação Next.js

Neste passo vamos aprender a adicionar o componente do editor SimplePDF: este componente vai permitir-nos abrir qualquer PDF a partir da nossa aplicação.

Vamos começar por abrir o código da nossa aplicação no editor de código de preferência - no SimplePDF gostamos muito do VScode

Vamos limpar um pouco removendo tudo dentro de main e atualizar o título da página:

O código deverá agora ficar assim:

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 o nosso navegador deverá mostrar a seguinte página: nada!

Adicionar o Editor SimplePDF ponto de partida

Vamos importar o componente EmbedPDF no topo do nosso ficheiro:

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

E adicioná-lo ao nosso código:

Note que só precisa de um elemento filho dentro de EmbedPDF. Pode ser qualquer elemento HTML: a, div, button...

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

O código completo deverá ficar assim:

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