> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pagamentos.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Next.js

> Integrando o Next.js com o **pagamentos.dev**

## 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](https://nextjs.org/) para saber mais.

## Instalação

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

<CodeGroup>
  ```bash npm theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
  npm i pagamentos
  ```

  ```bash Yarn theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
  yarn add pagamentos
  ```

  ```bash pnpm theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
  pnpm add pagamentos
  ```

  ```bash Bun theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
  bun i pagamentos
  ```
</CodeGroup>

## Frontend

Para criar interfaces de pagamento no frontend, use o componente `Checkout`:

```tsx app/checkout/page.tsx theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
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:

```ts app/api/webhook/route.ts theme={"theme":{"light":"vitesse-light","dark":"vitesse-dark"}}
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](https://github.com/pagamentosdev/pagamentos/blob/main/examples/with-nextjs/app/api/webhook/route.ts)