KDDIアジャイル開発センター株式会社

【AWS Amplify Gen2】Next.js のログインUIを追加しよう

Posted at 2026-01-16

はじめに

前回AWS AmplifyのGen2のスターターテンプレートを使用して、Next.js (App Router) のアプリをデプロイしました。今回は、簡易なログインUIを追加したときの備忘録となります。

まとめ

Amplify が提供している Authenticator UI コンポーネントを使うと10分程度で認証画面を用意できる
既存の Next.js（App Router）構成でもlayout.tsx を少し編集するだけで導入可能
とりあえず認証画面を用意したいときに便利

公式ドキュメント

公式のドキュメントは下記の通りです。

ログインUIを追加する

前回使ったAWS AmplifyのGen2のスターターテンプレートを編集していきます。
Amplifyが用意しているAuthenticator UI コンポーネントを使用してログインUIを実装します。

app/layout.tsxへ下記を追加するのみです。

下記をインポートし、

import { Authenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";

{children}をで囲うだけです。

<Authenticator>
          {children}
 </Authenticator>

変更後の layout.tsx

"use client";

import outputs from "@/amplify_outputs.json";
import { Authenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";
import { Amplify } from "aws-amplify";

import { Inter } from "next/font/google";
import "./app.css";

const inter = Inter({ subsets: ["latin"] });

Amplify.configure(outputs);

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Authenticator>{children}</Authenticator>
      </body>
    </html>
  );
}

ここまでできたら実装は完了です。実行してみましょう。

npm run dev

ブラウザでアクセスすると、ログイン画面が表示されます。
Authenticator UI コンポーネントを使うことで、10分程度で認証画面を用意できました。

Create Account からメールアドレスとパスワードを設定すると、アカウントを作成できます。
作成したアカウントは Cognitoで確認できます。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【AWS Amplify Gen2】Next.js の ログインUIを追加しよう

はじめに

まとめ

公式ドキュメント

ログインUIを追加する

【AWS Amplify Gen2】Next.js のログインUIを追加しよう