Next.jsからAmplifyカテゴリAPIを使用する

このガイドでは、Next.jsサーバーサイドランタイムからAmplify Auth、GraphQL API、REST API、およびStorageカテゴリAPIを使用する方法について説明します。

注意: Amplify JS v6はNext.jsバージョン範囲 >=13.5.0 <16.0.0 をサポートしています。 Amplifyと統合するには正しいバージョンを持つことを確認してください。

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

Next.jsでAmplifyを設定

Next.jsアプリのサーバーサイドでAmplify APIを使用するには、runWithAmplifyServerContext関数を作成する必要があります。

コードベースのutilsフォルダの下にamplifyServerUtils.tsファイルを作成できます。このファイルで、Amplify CLIによって生成されるamplifyconfiguration.jsonファイルからAmplify設定オブジェクトをインポートし、createServerRunner関数を使用してrunWithAmplifyServerContext関数を作成します。

例えば、utils/amplifyServerUtils.tsファイルに以下のコンテンツが含まれる場合があります:

src/utils/amplifyServerUtils.ts
import { createServerRunner } from '@aws-amplify/adapter-nextjs';
import config from '@/amplifyconfiguration.json';
export const { runWithAmplifyServerContext } = createServerRunner({

エクスポートされたrunWithAmplifyServerContext関数を使用して、分離されたリクエストコンテキストでAmplify APIを呼び出すことができます。使用例はここを参照してください。

ヒント: createServerRunner関数を1回だけ呼び出して、runWithAmplifyServerContext関数を全体を通して再利用する必要があります。

ヒント: このステップは、Next.jsアプリのクライアント側でAmplify APIを使用する場合にのみ必要です。例えば、Amplify Auth signIn APIを呼び出してユーザーにサインインするか、クライアント側でGraphQL購読を使用する場合です。

Next.jsアプリのクライアント側でAmplifyライブラリを使用する場合、シングルページアプリケーションでAmplifyを使用する場合と同じようにAmplify.configureを呼び出すことでAmplifyを設定する必要があります。

注意: Next.jsアプリでクライアント側でAmplifyライブラリを使用するには、Amplify.configureを呼び出すときにssrをtrueに設定する必要があります。これによりAmplifyライブラリにブラウザのクッキーストアにトークンを保存するように指示します。クッキーはNext.jsサーバーへのリクエストとともに認証のために送信されます。

'use client';
import config from '@/amplifyconfiguration.json';
import { Amplify } from 'aws-amplify';
Amplify.configure(config, {
  ssr: true // Next.jsでAmplifyを使用する場合は必須
export default function RootLayoutThatConfiguresAmplifyOnTheClient({
  children: React.ReactNode;
  return children;

アプリケーションのライフサイクルの早い段階でAmplify.configureを呼び出すことを確認してください。他のAmplify JavaScript APIが呼び出される前にAmplify.configureが呼び出されていない場合、構成がないかNoCredentialsエラーがスローされます。この問題の考えられる原因については、ライブラリが設定されていないトラブルシューティングガイドを参照してください。

Amplify.configureへの繰り返しの呼び出しを避けるために、トップレベルのクライアント側レンダリングレイアウトコンポーネントで1回呼び出すことができます。

詳細を確認

Next.js App RouterアプリケーションでのAmplifyの設定

Next.js App Routerを使用している場合、Amplifyを設定するクライアントコンポーネントを作成し、ルートレイアウトにインポートできます。

ConfigureAmplifyClientSide.tsx:

src/components/client/ConfigureAmplifyClientSide.tsx
'use client';
import { Amplify } from 'aws-amplify';
import config from '../amplifyconfiguration.json';
Amplify.configure(config, { ssr: true });
export default function ConfigureAmplifyClientSide() {
  return null;

layout.tsx:

src/app/layout.tsx
import ConfigureAmplifyClientSide from '@/components/ConfigureAmplifyClientSide';
import './globals.css';
import type { Metadata } from 'next';
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
export default function RootLayout({
  children,
  children: React.ReactNode;
    <html lang="en">
      <body className="container pb-6">
          <ConfigureAmplifyClientSide />
          {children}
        </>
      </body>
    </html>

Next.jsサーバーサイドランタイムでの認証

(実験的) サーバーサイドで認証を実行しHttpOnlyクッキーを有効にする

警告: この機能は実験的であり、将来のリリースで変更される可能性があります。

サーバーサイドサインイン機能を有効にすると、認証トークンはHttpOnlyクッキーに保存され、HttpOnly属性を変更することはできません。これらのクッキーはクライアント側スクリプトからアクセスできないため、クライアント側でAmplify JS APIを使用できなくなります。したがって、クライアント側でAmplifyを設定する必要はありません。サーバーサイドでこれらのAmplify JSサーバーサイドAPIを使用し続けることができます。

Next.jsアプリでサーバーサイド認証フローを有効にするには、追加の設定が必要です。

ステップ1 - 環境変数でアプリのオリジンを指定

Next.jsアプリに以下の環境変数を追加します。例えば、.envファイル内:

.env

AMPLIFY_APP_ORIGIN=https://myapp.com

この環境変数がNext.jsアプリのサーバーランタイムでアクセスできることを確認してください。

注意: トークンクッキーはサーバーサイド認証フローを通じて送信されます。本番環境では、セキュリティ強化のためにHTTPSをオリジンとして使用することをお勧めします。

ステップ2 - `createAuthRouteHandlers`関数をエクスポート

createAuthRouteHandlers関数は、サーバーサイド使用のためにAmplifyを設定するときにcreateServerRunner関数呼び出しによって作成されます。この関数をamplifyServerUtils.tsファイルからエクスポートできます。また、runtimeOptionsパラメータでクッキー属性を設定することもできます。

src/utils/amplifyServerUtils.ts
import { createServerRunner } from '@aws-amplify/adapter-nextjs';
import config from '@/amplifyconfiguration.json';
export const {
  runWithAmplifyServerContext,
  createAuthRouteHandlers,
} = createServerRunner({
  runtimeOptions: {
    cookies: {
      domain: '.myapp.com', // すべてのサブドメインでクッキーを利用可能にする
      sameSite: 'strict',
      maxAge: 60 * 60 * 24 * 7 // 7日

ステップ3 - Auth APIルートを設定

createAuthRouteHandlers関数を使用してAPIルートを作成します。例えば:

src/app/api/auth/[slug]/route.ts
import { createAuthRouteHandlers } from "@/utils/amplifyServerUtils";
export const GET = createAuthRouteHandlers({
  redirectOnSignInComplete: "/home",
  redirectOnSignOutComplete: "/sign-in",

src/pages/api/auth/[slug].ts
import { createAuthRouteHandlers } from "@/utils/amplifyServerUtils";
export default createAuthRouteHandlers({
  redirectOnSignInComplete: "/home",
  redirectOnSignOutComplete: "/sign-in",

上記の例では、Amplifyは以下のAPIルートを生成します:

APIルート	機能
`/api/auth/sign-up`	エンドユーザーがこのルートに移動すると、Amazon Cognito Managed Loginサインアップフォームにリダイレクトされます。サインアップとサインイン後、ルート`/api/auth/sign-in-callback`にリダイレクトされます。
`/api/auth/sign-in`	エンドユーザーがこのルートに移動すると、Amazon Cognito Managed Loginサインインフォームにリダイレクトされます。サインイン後、ルート`/api/auth/sign-in-callback`にリダイレクトされます。
`/api/auth/sign-in?provider=<social-provider-name>`	エンドユーザーがこのルートに移動すると、最初にAmazon Cognito Managed Loginにリダイレクトされ、次に指定されたソーシャルプロバイダーのサインインページにリダイレクトされます。サインイン後、ルート`/api/auth/sign-in-callback`にリダイレクトされます。
`/api/auth/sign-out`	エンドユーザーがこのルートに移動すると、エンドユーザーはサインアウトし、ルート`/api/auth/sign-out-callback`にリダイレクトされます。
`/api/auth/sign-in-callback`	Amazon Cognito Managed Loginはサインイン後、エンドユーザーをこのルートにリダイレクトします。Amplifyは認証トークンを交換してHttpOnlyクッキーとしてブラウザクッキーストアに保存し、エンドユーザーを`redirectOnSignInComplete`パラメータで指定されたルートにリダイレクトします。
`/api/auth/sign-out-callback`	Amazon Cognito Managed Loginはサインアウト後、エンドユーザーをこのルートにリダイレクトします。Amplifyはアクセストークンとリフレッシュトークンを取り消し、ブラウザクッキーストアからトークンクッキーを削除し、エンドユーザーを`redirectOnSignOutComplete`パラメータで指定されたルートにリダイレクトします。

Amazon Cognito Managed Loginページの言語をカスタマイズするには、/api/auth/sign-inおよび/api/auth/sign-upルートにlangクエリパラメータを追加できます。例えば、/api/auth/sign-in?lang=fr。サポートされている言語の詳細については、Managed loginローカライゼーションドキュメントを参照してください。

注意: サインアウト呼び出しには、Amazon Cognito Managed Loginからのサインアウト、トークンの取り消し、クッキーの削除など、複数のステップが含まれます。ユーザーがプロセス中にブラウザを閉じた場合、以下が発生する可能性があります:

認証トークンが取り消されていない - ユーザーはサインインしたままになります
認証トークンは取り消されているがクッキーが削除されていない - ユーザーがアプリにアクセスしたときにクッキーが削除されます

ステップ4 - リダイレクトURLをAmplifyのAuth Resourceに提供

amplify add authまたはamplify update authを実行してコールバックAPIルートをリダイレクトURLとして提供できます。詳細については、Auth カテゴリの設定を参照してください。上記の例を使用して、以下のリダイレクトURLを提供できます:

// サインインリダイレクトURI:
https://myapp.com/api/auth/sign-in-callback

// サインアウトリダイレクトURI:
https://myapp.com/api/auth/sign-out-callback

これにより、Amazon Cognito Hosted UIがサーバーサイド認証フローをサポートできるようになります。最新のAmazon Cognito Managed Loginブランディングにアップグレードして、サインインおよびサインアップページをカスタマイズできます。詳細については、Amazon Cognitoユーザープールマネージドログインを参照してください。

ステップ5 - サーバーサイド認証フローを開始するためのアンカーリンクを使用

HTMLアンカーリンクを使用して、ユーザーをサインインおよびサインアップルートに移動させます。例えば:

src/components/SignInButton.tsx
export default function SignInButton() {
    <a href="/api/auth/sign-in">
      Sign In

src/components/SignInWithGoogleButton.tsx
export default function SignInWithGoogleButton() {
    <a href="/api/auth/sign-in?provider=Google">
      Sign In with Google

src/components/SignUpButton.tsx
export default function SignUpButton() {
    <a href="/api/auth/sign-up">
      Sign Up

src/components/SignOutButton.tsx
export default function SignOutButton() {
    <a href="/api/auth/sign-out">
      Sign Out

エンドユーザーが上記のボタンをクリックすると、対応するサーバーサイド認証フローが開始されます。

Next.js Middlewareを使用してユーザーセッションを検証

Next.jsアプリのミドルウェアでfetchAuthSession APIを使用して、ルートを保護するために入力リクエストに添付された認証セッションを確認できます。例えば:

src/middleware.ts
import { fetchAuthSession } from 'aws-amplify/auth/server';
import { NextRequest, NextResponse } from 'next/server';
import { runWithAmplifyServerContext } from '@/utils/amplifyServerUtils';
export async function middleware(request: NextRequest) {
  const response = NextResponse.next();
  const authenticated = await runWithAmplifyServerContext({
    nextServerContext: { request, response },
    operation: async (contextSpec) => {
      try {
        const session = await fetchAuthSession(contextSpec);
        return (
          session.tokens?.accessToken !== undefined &&
          session.tokens?.idToken !== undefined
      } catch (error) {
        console.log(error);
        return false;
  if (authenticated) {
    return response;
  return NextResponse.redirect(new URL('/sign-in', request.url));
export const config = {
  matcher: [
     * 以下で始まるリクエストパスを除くすべてのリクエストパスに一致:
     * - api (APIルート)
     * - _next/static (静的ファイル)
     * - _next/image (画像最適化ファイル)
     * - favicon.ico (faviconファイル)
    '/((?!api|_next/static|_next/image|favicon.ico|sign-in).*)'

この例では、入力リクエストが有効なユーザーセッションに関連付けられていない場合、リクエストは/sign-inルートにリダイレクトされます。

注意: responseコンテキストでfetchAuthSessionを呼び出すと、リフレッシュされたトークン(ある場合)がレスポンスのSet-Cookieヘッダーを介してクライアントに送り返されます。

サーバーサイド使用のためのサポートされているAmplify API

サーバーで使用をサポートするすべてのAPIは、aws-amplify/<category>/serverサブパスからエクスポートされます。サーバーサイドユースケースには、これらのAPIを使用する必要があります。

カテゴリ	API	サーバー (Node.js) Amplify ホスティング/Vercel	Vercel Edge Runtime (ミドルウェア)
Auth	`fetchAuthSession`	✅	✅
Auth	`fetchUserAttributes`	✅	✅
Auth	`getCurrentUser`	✅	✅
API (GraphQL)	`generateServerClientUsingCookies`	✅
API (GraphQL)	`generateServerClientUsingReqRes`	✅
API (REST)	`GET`	✅
API (REST)	`POST`	✅
API (REST)	`PUT`	✅
API (REST)	`DEL`	✅
API (REST)	`HEAD`	✅
API (REST)	`PATCH`	✅
Storage	`getUrl`	✅
Storage	`getProperties`	✅
Storage	`list`	✅
Storage	`remove`	✅
Storage	`copy`	✅

Amplify JavaScript v5からの移行

Amplify JS v5のwithSSRContextユーティリティはAmplify JS v6では利用できなくなりました。@aws-amplify/adapter-nextjsからエクスポートされたcreateServerRunner関数を使用してrunWithAmplifyServerContext関数を作成し、この関数を使用してNext.jsアプリのサーバーサイドでAmplify API呼び出しを行う必要があります。使用例については、ここを参照してください。