Skip to main content

​
O que é Next.js?

Next.js é um framework React para construção de aplicações web full-stack. Ele suporta renderização no servidor, geração estática e outras estratégias modernas. Visite o site oficial do Next.js para saber mais.

​
Instalação

Para começar o desenvolvimento, instale a biblioteca com seu gerenciador de pacotes favorito: 
npm i pagamentos

​
Frontend

Para criar interfaces de pagamento no frontend, use o componente Checkout:
app/checkout/page.tsx
import { Checkout, CheckoutValues } from 'pagamentos/react'

export default function CheckoutPage() {
  async function onSubmit(data: CheckoutValues) {
    console.log('Dados do pagamento:', data)
  }

  return (
    <Checkout 
      onSubmit={onSubmit}
      metodoPagamento={[
        'pix',
        'boleto',
        'cartaoCredito'
      ]}      
    />
  )
}

​
Backend (API Routes)

No Next.js App Router, crie um route.ts para tratar webhooks:
app/api/webhook/route.ts
import { toNextJs } from 'pagamentos/nextjs'
import { pg } from '@/pagamentos'

export const POST = toNextJs(pg.webhooks.handler)
Confira um exemplo completo de API Route com Next.js + Mercado Pago em: github.com/pagamentosdev/pagamentos/blob/main/examples/with-nextjs/app/api/webhook/route.ts