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

# NextJS

> Use 4Mica with a NextJS app running on Node.

Use NextJS with 4Mica when your app needs paid API routes, paid server actions, or server-side calls to paid APIs. For route protection, run NextJS behind a Node server entry and mount the 4Mica Express middleware before the Next handler.

<Warning>
  This integration is not stable yet. For now, use the
  [NodeJS quick start](/quick-start/nodejs) for the supported implementation.
</Warning>

## Prerequisites

* NextJS running in the Node runtime.
* A custom server entry such as `server.ts`.
* A seller wallet address for `payTo`.
* A buyer wallet with deposited 4Mica collateral for paid requests.

## Install

<CodeGroup>
  ```bash npm theme={null}
  npm install next react react-dom express @4mica/x402 @x402/fetch viem
  ```

  ```bash pnpm theme={null}
  pnpm install next react react-dom express @4mica/x402 @x402/fetch viem
  ```

  ```bash yarn theme={null}
  yarn add next react react-dom express @4mica/x402 @x402/fetch viem
  ```

  ```bash bun theme={null}
  bun add next react react-dom express @4mica/x402 @x402/fetch viem
  ```
</CodeGroup>

## Create wallet

For wallet setup, see [Wallet](/core-concepts/wallet).

```bash theme={null}
PRIVATE_KEY=0xYourPrivateKey
PAY_TO=0xYourSellerAddress
```

<Warning>
  Use the private key only for buyer-side signing. Use `PAY_TO` as the seller
  address advertised by protected routes.
</Warning>

## Deposit collateral

Deposit collateral for the buyer wallet on the same network your NextJS server advertises. Start with Base Sepolia (`eip155:84532`) and a small test price.

To learn more about collateral setup, see [Deposits and Withdrawals](/core-concepts/deposits-and-withdrawals).

## Protect a route

Create a Node server entry and mount the payment middleware before `nextRequestHandler`.

```ts theme={null}
import express from "express";
import next from "next";
import { paymentMiddlewareFromConfig } from "@4mica/x402/server/express";

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

await app.prepare();

const server = express();
server.use(express.json());

server.use(
  paymentMiddlewareFromConfig(
    {
      "GET /api/premium-content": {
        accepts: {
          scheme: "4mica-credit",
          price: "$0.10",
          network: "eip155:84532",
          payTo: process.env.PAY_TO ?? "0xYourAddress",
        },
        description: "Access to premium content",
      },
    },
  ),
);

server.get("/api/premium-content", (req, res) => {
  res.json({ message: "Paid content from NextJS" });
});

server.all("*", (req, res) => handle(req, res));

server.listen(3000, () => {
  console.log("NextJS server running on http://localhost:3000");
});
```

## Support payment

Use the wrapped client anywhere you run trusted server-side code, such as a route handler, server action, or background job.

```ts theme={null}
import { wrapFetchWithPaymentFromConfig } from "@x402/fetch";
import { FourMicaEvmScheme } from "@4mica/x402/client";
import { privateKeyToAccount } from "viem/accounts";

const account = privateKeyToAccount(process.env.PRIVATE_KEY as `0x${string}`);
const scheme = await FourMicaEvmScheme.create(account);

export const fetchWithPayment = wrapFetchWithPaymentFromConfig(fetch, {
  schemes: [{ network: "eip155:84532", client: scheme }],
});
```

Then call the protected route from server code:

```ts theme={null}
const response = await fetchWithPayment("http://localhost:3000/api/premium-content");
const data = await response.json();
```