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

1. 概要

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

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

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. 参考

関連記事

  1. 【NextJS】Dynamic Routes

  2. 【NextJS】Checkbox・Radio Group

  3. 【NextJS】Events

  4. 【NextJS】Server Actions with MySQL

  5. 【NextJS】Firestore

  6. 【NextJS】TextField

最近の記事

  1. PHP
  2. PHP
  3. TypeScript
  4. Docker
  5. AWS
  6. Docker

制作実績一覧

  1. Checkeys