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

投稿者プロフィール

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. Node.js
  2. AWS
  3. AWS

制作実績一覧

  1. Checkeys