Need to configure your backend?See Build a Backend →

Next.js サーバーランタイム

このガイドでは、Next.js サーバーサイドランタイム (SSR) から Amplify Data に接続する方法を説明します。Next.js アプリケーションの場合、Amplify は App Router (React Server Components、Route Handlers、Server Actions)、Pages Router (Components、API Routes)、および Middleware に対して第一級のサポートを提供します。

開始する前に、以下が必要です:

Next.js サーバーランタイムから Amplify Data に接続する

Amplify Data への接続には、Next.js サーバーランタイムに対して正しいデータクライアントを選択し、データクライアントを生成してから API を呼び出すことが含まれます。

ステップ 1 - Next.js サーバーランタイム用の正しい Data クライアントを選択する

Amplify は、cookies または NextRequest と NextResponse を使用してユーザートークンを取得するかによって使い分ける、Next.js サーバーランタイム用の 2 つの専用データクライアント (@aws-amplify/adapter-nextjs/data から) を提供します:

generateServerClientUsingCookies() 🍪 は、next/headers から Next.js の cookies 関数でデータクライアントを生成します。各 API リクエストは実行時に動的に cookie を再取得します。
generateServerClientUsingReqRes() 🌐 は、トークン汚染を防ぐために runWithAmplifyServerContext 関数に提供される NextRequest と NextResponse を必要とするデータクライアントを生成します。

Next.js Router (App または Pages) に基づいて正しいデータクライアントを選択してから、ユースケースを選択してください:

ユースケース	必要なデータクライアント
React Server Component	`generateServerClientUsingCookies()` 🍪
Server Actions	`generateServerClientUsingCookies()` 🍪
Route Handler	`generateServerClientUsingCookies()` 🍪
Middleware	`generateServerClientUsingReqRes()` 🌐

Pages Router

ユースケース	必要なデータクライアント
サーバーサイドコンポーネントコード	`generateServerClientUsingReqRes()` 🌐
API Route	`generateServerClientUsingReqRes()` 🌐
Middleware	`generateServerClientUsingReqRes()` 🌐

ステップ 2 - Next.js サーバーランタイム用の Data クライアントを生成する

Cookie を使用して Next.js サーバーランタイム用のデータクライアントを生成するには、Amplify 設定と Next.js からの cookies 関数の両方を提供する必要があります。

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,

Amplify Data のサーバークライアントをユーティリティファイルで生成することをお勧めします。次に、生成されたクライアントを Next.js React Server Components、Server Actions、または Route Handlers にインポートします。

NextRequest と NextResponse を使用して Next.js サーバーランタイム用のデータクライアントを生成するには、Amplify 設定を提供するだけで済みます。個別の API リクエストを行う際には、設定を runWithAmplifyServerContext 関数に渡して、リクエストとレスポンス変数から cookie を渡す必要があります。

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,

サーバーデータクライアントをユーティリティファイルで生成することをお勧めします。次に、生成されたクライアントを Next.js Middleware、コンポーネントのサーバーランタイムコード、および API Routes にインポートします。

ステップ 3 - 生成されたサーバーデータクライアントを使用して API を呼び出す

生成されたサーバーデータクライアントで利用可能なクエリまたはミューテーションリクエストを実行できます。ただし、サーバーランタイム内ではサブスクリプションは利用できないことに注意してください。

Cookie ベースのサーバーデータクライアントを Next.js React Server Component コードにインポートして、API リクエストを実行します。

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,
const fetchTodos = async () => {
  const { data: todos, errors } = await cookieBasedClient.models.Todo.list();
  if (!errors) {
    return todos;

NextRequest/NextResponse ベースのサーバーデータクライアントを Next.js サーバーランタイムコードにインポートして、runWithAmplifyServerContext 関数内で API リクエストを実行します。Amplify サーバーコンテキストの作成の詳細については、サーバーサイドレンダリングを参照してください。

たとえば、Next.js Pages Router API ルートでは、handler 関数から req および res パラメータを runWithAmplifyServerContext と一緒に使用します:

import { type Schema } from '@/amplify/data/resource';
import type { NextApiRequest, NextApiResponse } from 'next';
  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 });