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

# Integrar con Next.js

> Agrega cobros y pagos a tu aplicación de Next.js con Commet.

Instala la Commet Skill para que tu agente integre el SDK actual y valide su trabajo contra el contrato vivo de la API.

```bash theme={null}
npx skills add commet-labs/skills --skill commet
```

<Steps>
  <Step title="Instalar">
    <Tabs>
      <Tab title="pnpm">
        ```bash theme={null}
        pnpm add @commet/node @commet/next
        ```
      </Tab>

      <Tab title="npm">
        ```bash theme={null}
        npm install @commet/node @commet/next
        ```
      </Tab>

      <Tab title="yarn">
        ```bash theme={null}
        yarn add @commet/node @commet/next
        ```
      </Tab>

      <Tab title="bun">
        ```bash theme={null}
        bun add @commet/node @commet/next
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Configurar">
    ```bash title=".env.local" theme={null}
    COMMET_API_KEY=ck_sandbox_xxx
    ```

    ```typescript title="lib/commet.ts" theme={null}
    import { Commet } from '@commet/node'

    export const commet = new Commet({
      apiKey: process.env.COMMET_API_KEY!,
    })
    ```
  </Step>

  <Step title="Crear Cliente y Suscribir">
    `customers.create` es idempotente — si ya existe un cliente con el mismo `id`, retorna el registro existente.

    ```typescript title="app/actions/billing.ts" theme={null}
    'use server'

    import { redirect } from 'next/navigation'
    import { commet } from '@/lib/commet'

    export async function subscribe(customerId: string) {
      await commet.customers.create({
        email: 'user@example.com',
        id: customerId,
      })

      const subscription = await commet.subscriptions.create({
        customerId,
        planCode: 'pro',
      })

      const checkoutUrl = subscription.checkoutUrl
      if (checkoutUrl) {
        redirect(checkoutUrl)
      }
    }
    ```

    El cliente es redirigido al checkout para completar el pago. Cuando `checkoutUrl` es `null` no hace falta pago y la suscripción ya está activa.
  </Step>

  <Step title="Verificar Acceso">
    ```typescript title="app/actions/billing.ts" theme={null}
    export async function getSubscription(customerId: string) {
      const subscription = await commet.subscriptions.getActive({ customerId })

      return subscription
    }
    ```

    ```typescript title="app/actions/features.ts" theme={null}
    export async function canUseFeature(customerId: string, feature: string) {
      const access = await commet.featureAccess.get({ code: feature, customerId })

      return access.allowed
    }
    ```
  </Step>

  <Step title="Trackear Uso">
    ```typescript title="app/actions/usage.ts" theme={null}
    export async function trackApiCall(customerId: string) {
      await commet.usage.track({
        customerId,
        featureCode: 'api_calls',
        value: 1,
      })
    }
    ```

    El uso se agrega y se cobra al final del período.
  </Step>

  <Step title="Portal del Cliente">
    ```typescript title="app/api/commet/portal/route.ts" theme={null}
    import { CustomerPortal } from '@commet/next'

    export const GET = CustomerPortal({
      apiKey: process.env.COMMET_API_KEY!,
      getCustomerId: async (req) => {
        return 'user_123'
      },
    })
    ```

    ```tsx theme={null}
    <a href="/api/commet/portal">Gestionar Cobros y Pagos</a>
    ```
  </Step>
</Steps>

## Relacionado

* [Suscripciones](/docs/es/manage-subscriptions)
* [Trackear Uso](/docs/es/track-usage)
* [Portal del Cliente](/docs/es/customer-portal)
* [Referencia del SDK](/docs/es/sdk-reference)


## Related topics

- [Integrar con Hono](/docs/es/integrate-with-hono.md)
- [Integrar con Express](/docs/es/integrate-with-express.md)
- [Integrar con Astro](/docs/es/integrate-with-astro.md)
- [Integrar con Bun](/docs/es/integrate-with-bun.md)
- [Integrar con Nuxt](/docs/es/integrate-with-nuxt.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.