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 dev6-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/Prodcurl -X "POST" -H "Content-Type: application/json" -d "{\"id\": \"789\", \"price\": 34567, \"name\": \"hisitem\"}" https://abcdefghij.execute-api.ap-northeast-1.amazonaws.com/Prod6-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. 参考
- Docs | Next.js (nextjs.org)
- Quick Start – React
- Getting Started with Redux | Redux
- Getting Started with React Redux | React Redux (react-redux.js.org)
- Material UI: React components based on Material Design (mui.com)
- 【AWS】AWS SAMを使いCLIでDynamoDBやLambda関数のCRUD APIをデプロイ（Typescript） – 株式会社isub
投稿者プロフィール
-
開発好きなシステムエンジニアです。
卓球にハマってます。
