# Integração com Next.js

Separe a troca de token no runtime Node e o editor em um Client Component pequeno e previsível.

[Abrir a versão HTML](https://rhizzalab.com/docs/integration/nextjs)

## Desenhe a fronteira server/client

No App Router, mantenha `@rhizzalab/report-node` atrás de uma Route Handler com `runtime = "nodejs"`. Importe `@rhizzalab/report-react` apenas a partir de um Client Component.

| Arquivo                             | Runtime          | Pode conhecer                                       |
| ----------------------------------- | ---------------- | --------------------------------------------------- |
| `app/api/rhizzadocs/token/route.ts` | Node.js          | Client id, client secret e sessão do host           |
| `components/report-screen.tsx`      | Browser          | JWT temporário, `reportType`, `data`, `documentKey` |
| `app/reports/[id]/page.tsx`         | Server Component | Dados do produto antes da serialização              |

## Configure as variáveis de ambiente

```dotenv filename=".env.local"
RHIZZADOCS_CLIENT_ID=client_xxx
RHIZZADOCS_CLIENT_SECRET=secret_xxx
RHIZZADOCS_API_URL=https://api.rhizzalab.com
NEXT_PUBLIC_RHIZZADOCS_API_URL=https://api.rhizzalab.com
```

> **Atenção: Somente a origem da API é pública**
>
> `NEXT_PUBLIC_RHIZZADOCS_API_URL` pode ir ao browser. A credencial não pode. Em produção, faça fail-fast se `CLIENT_ID` ou `CLIENT_SECRET` estiver ausente.

## Trate o ciclo de vida do editor

* Em `onReady`, registre apenas identificadores e permissões efetivas — nunca token ou dados do relatório.

* Em `onAuthRequired`, peça outro token ao backend do host.

* Em `onDirtyChange`, decida se a navegação do seu produto deve confirmar alterações pendentes.

* Em `onConflict`, apresente uma escolha explícita entre o trabalho local e a versão remota.

* Em `onError`, use o código estável para decidir recuperação e uma mensagem adequada ao seu fluxo.

O [Quickstart](https://rhizzalab.com/docs/quickstart) contém os dois arquivos mínimos. Para emissão isolada, veja [Token no backend](https://rhizzalab.com/docs/integration/backend-token).