10分で完成。AWS Amplify公式テンプレートを使ったNext.jsアプリの簡単デプロイ手順

git clone git@github.com:shinagawa-web/amplify-next-template.git
cd amplify-next-template && npm install

{
  "auth": {
    "user_pool_id": "ap-northeast-1_GWrP6bLZW",
    "aws_region": "ap-northeast-1",
    "user_pool_client_id": "4i56nhb28ftc251lp6fdn92r6e",
    "identity_pool_id": "ap-northeast-1:743f1a0f-b4dc-4f91-89e3-bd10b01f700e",
    "mfa_methods": [],
    "standard_required_attributes": [
      "email"
    ],
    "username_attributes": [
      "email"
    ],
    "user_verification_types": [
      "email"
    ],
    "mfa_configuration": "NONE",
    "password_policy": {
      "min_length": 8,
      "require_lowercase": true,
      "require_numbers": true,
      "require_symbols": true,
      "require_uppercase": true
    },
    "unauthenticated_identities_enabled": true
  },
  "data": {
    "url": "https://jx3glrsb7na3dfhorqyb3hl5ne.appsync-api.ap-northeast-1.amazonaws.com/graphql",
    "aws_region": "ap-northeast-1",
    "api_key": "xxx-xxxxxxxxxxxxxxxxxxxxxxxxxx",
    "default_authorization_type": "API_KEY",
    "authorization_types": [
      "AMAZON_COGNITO_USER_POOLS",
      "AWS_IAM"
    ],
    "model_introspection": {
      "version": 1,
      "models": {
        "Todo": {
          "name": "Todo",
          "fields": {
            "id": {
              "name": "id",
              "isArray": false,
              "type": "ID",
              "isRequired": true,
              "attributes": []
            },
            "content": {
              "name": "content",
              "isArray": false,
              "type": "String",
              "isRequired": false,
              "attributes": []
            },
            "createdAt": {
              "name": "createdAt",
              "isArray": false,
              "type": "AWSDateTime",
              "isRequired": false,
              "attributes": [],
              "isReadOnly": true
            },
            "updatedAt": {
              "name": "updatedAt",
              "isArray": false,
              "type": "AWSDateTime",
              "isRequired": false,
              "attributes": [],
              "isReadOnly": true
            }
          },
          "syncable": true,
          "pluralName": "Todos",
          "attributes": [
            {
              "type": "model",
              "properties": {}
            },
            {
              "type": "auth",
              "properties": {
                "rules": [
                  {
                    "allow": "public",
                    "provider": "apiKey",
                    "operations": [
                      "create",
                      "update",
                      "delete",
                      "read"
                    ]
                  }
                ]
              }
            }
          ],
          "primaryKeyInfo": {
            "isCustomPrimaryKey": false,
            "primaryKeyFieldName": "id",
            "sortKeyFieldNames": []
          }
        }
      },
      "enums": {},
      "nonModels": {}
    }
  },
  "version": "1.1"
}

import outputs from "@/amplify_outputs.json";

(※一部省略)

Amplify.configure(outputs);

# amplify
.amplify
amplify_outputs*
amplifyconfiguration*

(※一部省略)

  function createTodo() {
    client.models.Todo.create({
      content: window.prompt("Todo content"),
    });
  }

+   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 key={todo.id}>{todo.content}</li>
+           <li key={todo.id} style={{ display: 'flex', justifyContent: 'space-between' }}>
+             {todo.content}
+             <button onClick={() => deleteTodo(todo.id)}>delete</button>
+             </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 steps of this tutorial.
        </a>
      </div>
    </main>
  );
}

npm run dev

git add .
git commit -m "add delete button"
git push origin HEAD