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. Na verdade, o SimplePDF é desenvolvido com Next.js!

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

1. Vamos escolher um nome para o nosso projeto:

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

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

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

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

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

6. Vamos navegar para a pasta

cd simple-pdf-react-embed-example/

7. E iniciar o nosso projeto!

yarn dev
# ou
npm dev

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

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

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

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

2. Vamos importar o componente EmbedPDF no topo do nosso ficheiro:

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

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

E o nosso navegador deverá mostrar o seguinte: um pequeno botão "Open SimplePDF!"!

Passo 4: E a seguir?

O SimplePDF Embed é muito poderoso e há mais para descobrir:

• Abrir um documento específico indicando o URL desse documento
• Receber eventos sempre que o documento é carregado e a submissão é enviada
• Adicionar a sua própria marca

Pode saber mais sobre tudo isto na documentação no Github.

Esperamos que tenha gostado deste tutorial!

Se tiver alguma questão ou comentário, não hesite em contactar-nos usando o botão de feedback no canto inferior direito do seu ecrã