【NextJS】AWS SAMを使いCLIでデプロイしたLambda関数のAPIを呼び出す

【AWS】AWS SAMを使いCLIでDynamoDBやLambda関数のCRUD APIをデプロイ（Typescript）

【NextJS】OAuth authentication with AWS Cognito and Google account(Auth.js)

1. 概要

今回は前回にデプロイしたAWS Lambda関数APIをNextJSで呼び出して画面に表示する内容となります。

対象としては開発を１年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。

2. nodeのインストール

こちらを参考

3. プロジェクトを作成

3-1-1. こちらを参考

4. 必要なライブラリをインストール

4-1-1. こちらを参考

5. ソースコード

※前回より差分のみを記載

5-1-1. src/app/nextjs/nextjs09/model.ts

export type IdName = {
  id: number;
  name: string;
};

5-1-2. src/app/nextjs/nextjs09/loading.tsx

const Loading = () => {
  return <p>Loading...</p>;
};

export default Loading;

5-1-3. src/app/nextjs/nextjs09/display-data.tsx

import scss from "./page.module.scss";
import { IdName } from "./model";

type Props = {
  data: IdName[];
};

const DisplayData = (props: Props) => {
  return (
    <div className={scss.component}>
      <table>
        <thead>
          <tr>
            <th>Id</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {props.data.map((idName: IdName, idx: number) => (
            <tr key={idx}>
              <td className={scss.td_center}>{idName.id}</td>
              <td className={scss.td_center}>{idName.name}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default DisplayData;

5-1-4. src/app/nextjs/nextjs09/fetch-data.tsx

import { IdName } from "./model";
import DisplayData from "./display-data";

type Props = {
  url: string;
};

const FetchData = async (props: Props) => {
  const res: Response = await fetch(props.url, {
    cache: "no-store",
  });
  if (!res.ok) throw new Error("Fetch Error");
  const data = await res.json();
  const idNameData: IdName[] = [];
  for (const value of data) {
    const idName: IdName = { id: value.id, name: value.name };
    idNameData.push(idName);
  }

  return <DisplayData data={idNameData} />;
};

export default FetchData;

5-1-5. src/app/nextjs/nextjs09/page.module.scss

.component {
  color: blue;
  & ul {
    margin-left: 20px;
    & li {
      list-style: disc;
    }
  }
  & table {
    border: 1px solid;
    width: 80%;
    & tr,
    td {
      border: 1px solid;
      padding: 5px;
      cursor: pointer;
    }
    & th {
      border: 1px solid;
      padding: 5px;
      text-align: center;
      background-color: lavender;
    }
    & .td_right {
      text-align: right;
    }
    & .td_center {
      text-align: center;
    }
  }
}

5-1-6. src/app/nextjs/nextjs09/page.tsx

import { Suspense } from "react";
import FetchData from "./fetch-data";
import scss from "./page.module.scss";
import GoBack from "@/lib/components/go-back";
import Loading from "./loading";

const Nextjs09 = () => {
  const apiEndpoint: string =
    "https://abcdefghij.execute-api.ap-northeast-1.amazonaws.com/Prod";

  return (
    <div className={scss.component}>
      <GoBack />
      <br />
      <br />
      <ul>
        <li>AWS</li>
        <ul>
          <li>Api Gateway</li>
          <li>Lambda Function</li>
          <li>DynamoDB</li>
          <ul>
            <li>
              <Suspense fallback={<Loading />}>
                <FetchData url={apiEndpoint} />
              </Suspense>
            </li>
          </ul>
        </ul>
      </ul>
      <br />
    </div>
  );
};

export default Nextjs09;

5-1-7. src/app/nextjs/page.tsx

"use client";

import React from "react";
import { Link } from "@mui/material";
import scss from "./page.module.scss";

const Nextjs = () => {
  return (
    <div className={scss.components}>
      <ul>
        <li>
          <Link href="/nextjs/nextjs01" underline="hover">
            Nextjs01
          </Link>
        </li>
        <li>
          <Link href="/nextjs/nextjs02" underline="hover">
            Nextjs02
          </Link>
        </li>
        <li>
          <Link href="/nextjs/nextjs03" underline="hover">
            Nextjs03
          </Link>
        </li>
        <li>
          <Link href="/nextjs/nextjs04" underline="hover">
            Nextjs04
          </Link>
        </li>
        <li>
          <Link href="/nextjs/nextjs05" underline="hover">
            Nextjs05
          </Link>
        </li>
        <li>
          <Link href="/nextjs/nextjs06" underline="hover">
            Nextjs06
          </Link>
        </li>
        <li>
          <Link href="/nextjs/nextjs07" underline="hover">
            Nextjs07
          </Link>
        </li>
        <li>
          <Link href="/nextjs/nextjs08" underline="hover">
            Nextjs08
          </Link>
        </li>
        <li>
          <Link href="/nextjs/nextjs09" underline="hover">
            Nextjs09
          </Link>
        </li>
      </ul>
    </div>
  );
};

export default Nextjs;

6. サーバーを起動

npm run dev

6-1. 前回にデプロイしたAPIを使い、データを登録

curl -X "POST" -H "Content-Type: application/json" -d "{\"id\": \"456\", \"price\": 23456, \"name\": \"youritem\"}" https://abcdefghij.execute-api.ap-northeast-1.amazonaws.com/Prod
curl -X "POST" -H "Content-Type: application/json" -d "{\"id\": \"789\", \"price\": 34567, \"name\": \"hisitem\"}" https://abcdefghij.execute-api.ap-northeast-1.amazonaws.com/Prod

6-2. データを確認

curl https://abcdefghij.execute-api.ap-northeast-1.amazonaws.com/Prod

[{“id”:”456″,”name”:”youritem”},{“id”:”123″,”name”:”myitem”},{“id”:”789″,”name”:”hisitem”}]

7. ブラウザで確認

  • http://localhost:3000

8. ディレクトリの構造

省略

9. 備考

今回はNextJSでAWS Lambda関数APIを呼び出して画面に表示する内容についてでした。

10. 参考

【NextJS】Cognito with Amplify(Gen2)+CRUD(DynamoDB)

投稿者プロフィール

Sondon
開発好きなシステムエンジニアです。
卓球にハマってます。

関連記事

  1. 【NextJS】Hooks-useContext

  2. 【NextJS】Hooks-useReducer

  3. 【Next.js】ローカル環境をSSL化してみる

  4. 【NextJS】Dynamic Routes

  5. 【NextJS】Redux

  6. 【NextJS】Streaming with Suspense

最近の記事

  1. 2024.10.02

    【WSL】Linux環境構築④VSCodeでのLunix…

  2. 2024.10.01

    【Figma】NextJSのソースコードを自動生成(Lo…

  3. 2024.09.16

    【Figma】Layout Gridを作成（PC・Tab…

  4. 2024.09.16

    【Figma】Figmaを使ってみる
  5. Node.js

    2024.09.07

    【NodeJS】Crawleeを使ってみる(Scrapi…
  6. AWS

    2024.08.12

    【AWS】AWS Step Functions with…
  7. AWS

    2024.08.10

    【AWS】AWS Step Functionsを触ってみ…

  8. 2024.08.10

    【Next.js】ローカル環境をSSL化してみる

  9. 2024.07.21

    【NextJS】Cognito with Amplify…

制作実績一覧

  2. Checkeys