---
title: "Next.js"
description: "Integrate the Integrate SDK with Next.js"
---
The Integrate SDK provides seamless integration with Next.js through server-side configuration and catch-all route handlers. Set up OAuth in just 2 files.

## Installation

Install the Integrate SDK in your Next.js project:

```bash
bun add integrate-sdk
```

## Setup

Setting up OAuth in Next.js requires only **3 files**:

### 1. Server Configuration

Create a server configuration file with your OAuth credentials:

```typescript
// lib/integrate.ts
import { createMCPServer, githubIntegration } from "integrate-sdk/server";

export const { client: serverClient } = createMCPServer({
  apiKey: process.env.INTEGRATE_API_KEY,
  integrations: [
    githubIntegration({
      scopes: ["repo", "user"],
    }),
  ],
});
```

Next.js supports automatically importing the environment variables from the .env file.

You can get an API key from the [Integrate Dashboard](https://integrate.dev/dashboard/login).

### 2. Mount the Handler

Create a single catch-all route that handles all OAuth operations at `app/api/integrate/[...all]/route.ts`

```typescript
import { serverClient } from "@/lib/integrate";
import { toNextJsHandler } from "integrate-sdk/server";

export const { POST, GET } = toNextJsHandler(serverClient);
```

## Configuration

Add your OAuth credentials to your `.env` file:

```bash
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret
```

## Example

Clone the [Next.js example](https://github.com/integratedotdev/examples/tree/main/frameworks/frontend/nextjs-example) for a runnable project with GitHub OAuth and repo listing. Database-backed token storage examples live under [`database/`](https://github.com/integratedotdev/examples/tree/main/database) in the same repo.

## Usage Examples

### Client-Side Authorization

The client is automatically configured when making requests to the server.

```typescript
import { client } from "integrate-sdk";

await client.authorize("github");
```