---
title: "Next.js server runtime"
section: "frontend/data/connect-from-server-runtime"
platforms: ["android", "angular", "javascript", "nextjs", "react", "react-native", "swift", "vue"]
gen: 2
last-updated: "2026-03-25T17:40:00.000Z"
url: "https://docs.amplify.aws/react/frontend/data/connect-from-server-runtime/nextjs-server-runtime/"
---

This guide walks through how you can connect to Amplify Data from Next.js Server-side Runtimes (SSR). For Next.js applications, Amplify provides first-class support for the [App Router (React Server Components, Route Handlers, and Server Actions)](https://nextjs.org/docs/app), the [Pages Router (Components, API Routes)](https://nextjs.org/docs/pages), and [Middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware).

Before you begin, you will need:

- [A Next.js application created](/[platform]/start/quickstart/)
- [Installed and configured Amplify libraries for Next.js](/[platform]/frontend/server-side-rendering/)
- [Deployed Amplify Data resources](/[platform]/build-a-backend/data/set-up-data/), or directly using [AWS AppSync](https://aws.amazon.com/appsync/)

## Connect to Amplify Data from a Next.js server runtime

Connecting to Amplify Data will include choosing the correct data client for Next.js server runtimes, generating the data client, and then calling the API.

### Step 1 - Choose the correct Data client for Next.js server runtimes

Amplify offers two specialized data clients for Next.js server runtimes (from `@aws-amplify/adapter-nextjs/data`) that you should use depending whether you retrieve the user tokens using [`cookies`](https://nextjs.org/docs/app/api-reference/functions/cookies) or [`NextRequest`](https://nextjs.org/docs/app/api-reference/functions/next-request) and [`NextResponse`](https://nextjs.org/docs/app/api-reference/functions/next-response):

- `generateServerClientUsingCookies()` 🍪 generates a data client with the Next.js `cookies` function from `next/headers`. Each API request dynamically refetches the cookies at runtime.
- `generateServerClientUsingReqRes()` 🌐 generates a data client requiring `NextRequest` and `NextResponse` provided to an `runWithAmplifyServerContext` function to prevent token contamination.

Choose the correct data client based on your Next.js Router (App or Pages) and then the use case:

#### [App Router]

| Use case               | Required Data client                 |
| ---------------------- | --------------------------------------- |
| React Server Component | `generateServerClientUsingCookies()` 🍪 |
| Server Actions         | `generateServerClientUsingCookies()` 🍪 |
| Route Handler          | `generateServerClientUsingCookies()` 🍪 |
| Middleware             | `generateServerClientUsingReqRes()` 🌐  |

#### [Pages Router]

**Pages Router**

| Use case                   | Required Data client                |
| -------------------------- | -------------------------------------- |
| Server-side component code | `generateServerClientUsingReqRes()` 🌐 |
| API Route                  | `generateServerClientUsingReqRes()` 🌐 |
| Middleware                 | `generateServerClientUsingReqRes()` 🌐 |

### Step 2 - Generate the Data client for Next.js server runtimes

#### [generateServerClientUsingCookies() 🍪]

To generate a Data client for the Next.js server runtime using cookies, you need to provide both your Amplify configuration and the cookies function from Next.js.

```ts
import { type Schema } from '@/amplify/data/resource';
import { generateServerClientUsingCookies } from '@aws-amplify/adapter-nextjs/data';
import outputs from '@/amplify_outputs.json';
import { cookies } from 'next/headers';

export const cookieBasedClient = generateServerClientUsingCookies<Schema>({
  config: outputs,
  cookies,
});
```

<Callout>

We recommend you generate Amplify Data's server client in a utility file. Then, import the generated client in your Next.js React Server Components, Server Actions, or Route Handlers.

</Callout>

#### [generateServerClientUsingReqRes() 🌐]

To generate a data client for the Next.js server runtime using `NextRequest` and `NextResponse`, you only need to provide your Amplify configuration. When making the individual API requests, you will need to pass the config to the [`runWithAmplifyServerContext`](/[platform]/frontend/server-side-rendering) function to pass in the cookies from request and response variables.

```ts
import { type Schema } from '@/amplify/data/resource';
import { createServerRunner } from '@aws-amplify/adapter-nextjs';
import { generateServerClientUsingReqRes } from '@aws-amplify/adapter-nextjs/data';
import outputs from '@/amplify_outputs.json';

export const { runWithAmplifyServerContext } = createServerRunner({
  config: outputs,
});

export const reqResBasedClient = generateServerClientUsingReqRes<Schema>({
  config: outputs,
});
```

<Callout>

We recommend you generate the server Data client in a utility file. Then, import the generated client in your Next.js Middleware, component's server runtime code, and API Routes.

</Callout>

### Step 3 - Call API using generated server Data clients

You can make any available query or mutation request with the generated server data clients; however, note that subscriptions are not available within server runtimes.

#### [generateServerClientUsingCookies() 🍪]

Import the cookie-based server Data client in your Next.js React Server Component code and make your API requests.

```ts
import { type Schema } from '@/amplify/data/resource';
import { generateServerClientUsingCookies } from '@aws-amplify/adapter-nextjs/data';
import outputs from '@/amplify_outputs.json';
import { cookies } from 'next/headers';

export const cookieBasedClient = generateServerClientUsingCookies<Schema>({
  config: outputs,
  cookies,
});

const fetchTodos = async () => {
  const { data: todos, errors } = await cookieBasedClient.models.Todo.list();

  if (!errors) {
    return todos;
  }
};
```

#### [generateServerClientUsingReqRes() 🌐]

Import the NextRequest/NextResponse-based server Data client in your Next.js server runtime code and make your API requests within the `runWithAmplifyServerContext` function. Review [Server-side Rendering](/[platform]/frontend/server-side-rendering) to learn more about creating an Amplify server context.

For example, in a Next.js Pages Router API route, use the `req` and `res` parameters from the `handler` function with `runWithAmplifyServerContext`:

```ts
import { type Schema } from '@/amplify/data/resource';
import type { NextApiRequest, NextApiResponse } from 'next';
import {
  runWithAmplifyServerContext,
  reqResBasedClient,
} from '@/utils/amplifyServerUtils';

type ResponseData = {
  todos: Schema['Todo']['type'][];
};

export default async function handler(
  request: NextApiRequest,
  response: NextApiResponse<ResponseData>
) {
  const todos = await runWithAmplifyServerContext({
    nextServerContext: { request, response },
    operation: async (contextSpec) => {
      const { data: todos } = await reqResBasedClient.models.Todo.list(
        contextSpec
      );
      return todos;
    },
  });

  response.status(200).json({ todos });
}
```