> For the complete documentation index, see [llms.txt](https://developer.paddle.com/llms.txt).

# next-forge

Production-ready Next.js boilerplate with a pluggable payments package that supports Paddle Billing.

---

[next-forge](https://www.next-forge.com) is a production-grade Turborepo template for Next.js apps. Its `@repo/payments` package is processor-agnostic, with a documented migration path to swap in Paddle Billing using the official [Paddle Node.js SDK](https://developer.paddle.com/sdks/libraries/node.md) and [Paddle.js wrapper](https://developer.paddle.com/sdks/libraries/paddle-js-wrapper.md).

{% callout type="info" %}
next-forge is maintained by the community, not by Paddle. For support, use the [next-forge issue tracker](https://github.com/vercel/next-forge/issues).
{% /callout %}

{% card-group cols=2 %}
{% card title="GitHub" icon="carbon:logo-github" url="https://github.com/vercel/next-forge" %}
View source code, report issues, and contribute on GitHub.
{% /card %}
{% card title="Paddle installation guide" icon="carbon:arrows-horizontal" url="https://www.next-forge.com/docs/migrations/payments/paddle" %}
Step-by-step guide to swap the default payments processor for Paddle.
{% /card %}
{% /card-group %}

## Requirements

- Node.js 20+

## Install

Create a new next-forge project:

{% code-group sync="js-package-manager" %}

```bash {% title="pnpm" %}
pnpm dlx next-forge@latest init
```

```bash {% title="yarn" %}
npx next-forge@latest init
```

```bash {% title="npm" %}
npx next-forge@latest init
```

{% /code-group %}

Then, configure your environment variables, set up required services, and run the development server. See the [next-forge documentation](https://www.next-forge.com/docs) for more details.

When setting up your environment variables, don't set up the default payment processor. Instead, follow the [Paddle installation guide](https://www.next-forge.com/docs/migrations/payments/paddle) to configure Paddle.

## Quick example

Initialize the server-side client (after running through the migration steps):

```ts title="packages/payments/index.ts"
import 'server-only';
import { Paddle } from '@paddle/paddle-node-sdk';
import { keys } from './keys';

const { PADDLE_SECRET_KEY, PADDLE_ENV } = keys();

export const paddle = new Paddle(PADDLE_SECRET_KEY, {
  environment: PADDLE_ENV,
});

export * from '@paddle/paddle-node-sdk';
```

Open a checkout from a client component:

```tsx title="apps/web/app/pricing/page.tsx"
'use client';

import { usePaddle } from '@repo/payments/checkout';

export default function Pricing() {
  const paddle = usePaddle();

  return (
    <button
      onClick={() =>
        paddle?.Checkout.open({
          items: [{ priceId: 'pri_01jkzb4x1hc91s8w38cr3m86yy', quantity: 1 }],
        })
      }
    >
      Subscribe
    </button>
  );
}
```