Next.js App Router

前提条件

このクイックスタートガイドでは、TypeScript、Next.js App Router with Client Components、および React を使用してタスクリストアプリケーションを構築する方法を説明します。始める前に、以下がインストールされていることを確認してください。

• Node.js v14.x 以上
• npm v6.14.4 以上
• git v2.14.1 以上
• これらのテクノロジーに初めて触れる場合は、公式の React、Next.js、TypeScript チュートリアルをご覧になることをお勧めします。

フルスタックアプリを AWS にデプロイ

より速く始められるように、スターター「To-do」アプリケーションを作成しました。まず、スターター Next テンプレートを使用して GitHub アカウントにリポジトリを作成します。

1. リポジトリを作成する

スターターテンプレートを使用して、GitHub アカウントにリポジトリを作成します。このテンプレートは create-next-app を Amplify バックエンド機能と共にスキャフォルドします。

GitHub のフォームを使用して、リポジトリの作成を完了します。

2. スターターアプリをデプロイする

リポジトリが作成されたので、Amplify を使用してデプロイします。

Start with an existing app > GitHub を選択します。ポップアップウィンドウを通じて Amplify に GitHub アカウントへのアクセスを許可した後、リポジトリと main ブランチを選択してデプロイします。その他の変更は行わずに、フローをクリックして Save and deploy を実行します。

3. デプロイされたアプリを表示する

├── amplify/ # Amplify バックエンド設定を含むフォルダー
│   ├── auth/ # 認証バックエンドの定義
│   │   └── resource.tsx
│   ├── data/ # データバックエンドの定義
│   │   └── resource.ts
|   ├── backend.ts
│   └── tsconfig.json
├── src/ # React UI コード
│   ├── App.tsx # タスクをリアルタイムで同期するための UI コード
│   ├── index.css # アプリのスタイル設定
│   └── main.tsx # Amplify クライアントライブラリのエントリーポイント
├── package.json
└── tsconfig.json

ビルドが完了したら、「View deployed URL」を選択して、新しくデプロイされたブランチにアクセスします。ビルドは API、データベース、および認証バックエンドをデプロイしたため、新しいタスク項目を作成できます。

Amplify コンソールで、デプロイメントブランチ(この場合は main)をクリック > 左側のメニューで Data を選択 > Data manager を選択して、データベースに入力されたデータを確認します。

フロントエンドを更新する

タスクリスト項目の削除フローを作成することで、アプリの機能を強化する方法を学びましょう。

4. ローカル環境をセットアップする

ここで、ローカル開発環境をセットアップして、フロントエンドに機能を追加します。デプロイされたブランチをクリックすると、ビルド履歴とデプロイされたバックエンドリソースのリストを表示する Deployments ページが表示されます。

ページの下部に Deployed backend resources タブが表示されます。タブをクリックしてから、Download amplify_outputs.json file ボタンをクリックします。

リポジトリをローカルにクローンします。

git clone https://github.com/<github-user>/amplify-next-template.git
cd amplify-next-template && npm install

上記でダウンロードした amplify_outputs.json ファイルをプロジェクトのルートに移動します。

├── amplify
├── src
├── amplify_outputs.json <== バックエンド出力ファイル
├── package.json
└── tsconfig.json

5. 削除機能を実装する

app/page.tsx ファイルを開き、新しい deleteTodo 機能を追加して、関数を <li> 要素の onClick ハンドラーに渡します。

function App() {
  // ...
Copy highlighted code example
  function deleteTodo(id: string) {
    client.models.Todo.delete({ id })
  }

  return (
    <main>
      <h1>My todos</h1>
      <button onClick={createTodo}>+ new</button>
      <ul>
        {todos.map(todo => <li
Copy highlighted code example
          onClick={() => deleteTodo(todo.id)}
          key={todo.id}>
          {todo.content}
        </li>)}
      </ul> 
      <div>
        🥳 App successfully hosted. Try creating a new todo.
        <br />
        <a href="https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components/">Review next step of this tutorial.</a>
      </div>
    </main>
  )
}

import { type ClientSchema, a, defineData } from '@aws-amplify/backend';

const schema = a.schema({
  Todo: a
    .model({
      content: a.string()
    })
    .authorization(allow => [allow.owner(), allow.publicApiKey().to(['read'])])
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: 'apiKey',
    // API Key is used for allow.publicApiKey() rules
    apiKeyAuthorizationMode: {
      expiresInDays: 30
    }
  }
});

ローカル開発サーバーを起動して、削除機能を試してみてください。

npm run dev

これにより、http://localhost:3000 でローカル開発サーバーが起動します。

6. ログイン UI を実装する

スターターアプリケーションは amplify/auth/resource.ts ファイルで事前設定された認証バックエンドを既に持っています。メールとパスワードのログインをサポートするように設定しましたが、Google、Amazon、Sign In With Apple、Facebook など、さまざまなログインメカニズムをサポートするように拡張できます。

ログイン体験をすぐに実行する最速の方法は、Authenticator UI コンポーネントを使用することです。Next.js App Router と適切に統合するために、クライアントコンポーネントラッパーを作成し、レイアウトで使用します。

まず、アプリディレクトリに AuthenticatorWrapper.tsx ファイルを作成します。

"use client"

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

export default function AuthenticatorWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  return <Authenticator>{children}</Authenticator>;
}

次に、app/layout.tsx ファイルを更新して、AuthenticatorWrapper コンポーネントをインポートして使用します。

import React from "react";
import { Amplify } from "aws-amplify";
import "./app.css";
Copy highlighted code example
import AuthenticatorWrapper from "./AuthenticatorWrapper";
import "@aws-amplify/ui-react/styles.css";
import outputs from "@/amplify_outputs.json";

Amplify.configure(outputs);

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

Authenticator コンポーネントはバックエンド設定を自動検出し、バックエンドの認証フローに基づいて正しい UI 状態をレンダリングします。

app/page.tsx ファイルで、ユーザーがアプリケーションからサインアウトできるボタンを追加します。Amplify UI ライブラリから useAuthenticator フックをインポートして、Authenticator の状態にフックインします。

import type { Schema } from "@/amplify/data/resource";
Copy highlighted code example
import { useAuthenticator } from "@aws-amplify/ui-react";
import { useState, useEffect } from "react";
import { generateClient } from "aws-amplify/data";

const client = generateClient<Schema>();

export default function HomePage() {

Copy highlighted code example
  const { signOut } = useAuthenticator();

  // ...

  return (
    <main>
      {/* ... */}
Copy highlighted code example
      <button onClick={signOut}>Sign out</button>
    </main>
  );
}

localhost 環境でアプリケーションを再度試してみてください。ログイン体験が表示されるはずです。

これらの変更をクラウドに取得するには、git にコミットして変更をアップストリームにプッシュします。

git commit -am "added authenticator"
git push

Amplify は git コミットに基づいてアプリの最新バージョンを自動的にデプロイします。アプリケーションが再構築されると、ホストされたアプリは数分で削除機能をサポートするように更新されます。

バックエンドを更新する

バックエンドを更新して、ユーザーごとの認可ルールを実装し、各ユーザーが自分のタスクのみにアクセスできるようにしましょう。

7. ローカル AWS 認証情報をセットアップする

バックエンドを更新するには、ローカルマシンからバックエンド更新をデプロイするための AWS 認証情報が必要です。

ローカルマシンに AmplifyBackendDeployFullAccess 権限ポリシーを持つ AWS プロファイルが既にある場合は、ステップ 8 に進んでください。

それ以外の場合は、ローカル AWS 認証情報をセットアップ して、ローカルマシンからバックエンド更新をデプロイするための Amplify 権限を付与します。

8. クラウドサンドボックスをデプロイする

本番ブランチに影響を与えずにバックエンドを更新するには、Amplify のクラウドサンドボックスを使用します。この機能は、各開発者が分離されたバックエンド環境を提供し、ローカル開発とテストに理想的です。

クラウドサンドボックスを開始するには、新しいターミナルウィンドウ で以下のコマンドを実行します。

npx ampx sandbox

クラウドサンドボックスが完全にデプロイされたら(約5分)、amplify_outputs.json ファイルが新しい分離された認証とデータバックエンドへの接続情報で更新されます。

9. ユーザーごとの認可を実装する

スターター内のタスク項目は現在すべてのユーザー間で共有されていますが、ほとんどの場合、データはユーザーごとに分離されるべきです。

データをユーザーごとに分離するには、「所有者ベースの認可ルール」を使用できます。タスク項目に所有者ベースの認可ルールを適用しましょう。

import { type ClientSchema, a, defineData } from '@aws-amplify/backend';

const schema = a.schema({
  Todo: a.model({
    content: a.string(),
Copy highlighted code example
  }).authorization(allow => [allow.owner()]),
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    // これはアプリケーション内のデータクライアント(generateClient())に指示します
    // ユーザー認証トークンで API リクエストに署名するため。
Copy highlighted code example
    defaultAuthorizationMode: 'userPool',
  },
});

アプリケーションクライアントコードでは、useAuthenticator フックから user プロパティをレンダリングして、ログイン後に異なるユーザーを区別します。app/page.tsx ファイルに移動して、user プロパティをレンダリングします。

// ... インポート

function HomePage() {
Copy highlighted code example
  const { user, signOut } = useAuthenticator();
  
  // ...
  
  return (
    <main>
Copy highlighted code example
      <h1>{user?.signInDetails?.loginId}'s todos</h1>
      {/* ... */}
    </main>
  )
}

ここで、ローカルアプリケーションに戻ってタスク項目のユーザー分離をテストします。

本番バックエンドではなくクラウドサンドボックスを使用しているため、新しいユーザーを再度サインアップする必要があります。

これらの変更をクラウドに取得するには、git にコミットして変更をアップストリームにプッシュします。

git commit -am "added per-user data isolation"
git push

Amplify コンソールでのビルドが完了すると、main バックエンドはクラウドサンドボックス内で行われた変更をサポートするように更新されます。クラウドサンドボックス内のデータは完全に分離されており、本番データベースを汚染しません。

🥳 成功

完了です！AWS Amplify にフルスタックアプリを正常に構築しました。Amplify の使用方法について詳しく知りたい場合は、Amplify がどのように機能するかについての概念的なガイドを参照してください。