> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/alchemy-run/alchemy/llms.txt
> Use this file to discover all available pages before exploring further.

# Cloudflare Next.js

> Deploy a Next.js application to Cloudflare with KV storage

# Cloudflare Next.js Example

This example demonstrates deploying a Next.js application to Cloudflare using the Next.js adapter with KV Namespace integration.

## Features

* **Next.js**: Full-stack React framework with SSR and SSG
* **KV Namespace**: Key-value storage for session data, caching, etc.
* **Cloudflare Pages**: Automatic deployment with edge rendering

## Project Setup

<Steps>
  ### Install Dependencies

  ```bash theme={null}
  npm install alchemy
  npm install next react react-dom
  ```

  ### Create alchemy.run.ts

  Create your infrastructure file:

  ```ts theme={null}
  import alchemy from "alchemy";
  import { KVNamespace, Nextjs } from "alchemy/cloudflare";

  const app = await alchemy("cloudflare-nextjs");

  export const kv = await KVNamespace("kv");

  export const website = await Nextjs("website", {
    adopt: true,
    bindings: { KV: kv },
  });

  console.log(`Website: ${website.url}`);

  if (process.env.ALCHEMY_E2E) {
    const { test } = await import("./test/e2e.js");
    await test({
      url: website.url,
    });
  }

  await app.finalize();
  ```

  ### Configure Next.js

  Create `next.config.ts` for Cloudflare:

  ```ts theme={null}
  import type { NextConfig } from "next";

  const config: NextConfig = {
    // Cloudflare-specific configuration
  };

  export default config;
  ```

  ### Create Next.js Pages

  Create `src/app/page.tsx`:

  ```tsx theme={null}
  import { getRequestContext } from '@cloudflare/next-on-pages';

  export const runtime = 'edge';

  export default async function Home() {
    const ctx = getRequestContext();
    const kv = ctx.env.KV;
    
    // Access KV namespace
    const count = await kv.get('visit-count') || '0';
    const newCount = parseInt(count) + 1;
    await kv.put('visit-count', newCount.toString());

    return (
      <div>
        <h1>Next.js on Cloudflare</h1>
        <p>Visit count: {newCount}</p>
      </div>
    );
  }
  ```

  ### Environment Types

  Create `env.d.ts` for TypeScript support:

  ```ts theme={null}
  import type { website } from "./alchemy.run";

  declare module "@cloudflare/next-on-pages" {
    interface RequestContext {
      env: typeof website.Env;
    }
  }
  ```

  ### Deploy

  Deploy your Next.js app to Cloudflare:

  ```bash theme={null}
  npm exec tsx alchemy.run.ts
  ```
</Steps>

## Key Features Explained

### KV Namespace Integration

KV is bound to your Next.js application:

```ts theme={null}
export const kv = await KVNamespace("kv");

export const website = await Nextjs("website", {
  bindings: { KV: kv },
});
```

### Edge Runtime

Next.js pages run on Cloudflare's edge:

```tsx theme={null}
export const runtime = 'edge';
```

### Adoption Mode

The `adopt: true` flag allows reusing existing deployments:

```ts theme={null}
export const website = await Nextjs("website", {
  adopt: true,
  bindings: { KV: kv },
});
```

## Source Code

View the complete source code: [examples/cloudflare-nextjs](https://github.com/sam-goodwin/alchemy/tree/main/examples/cloudflare-nextjs)