はじめに
ReactやNext.jsを勉強したいと思っても、
Todoアプリは飽きた
実際のWebアプリっぽいものを作りたい
と思い、今回は犬の健康管理アプリを作りながらNext.jsを学びました。
この記事では
・App Router
・ページ遷移
・Link
・useState
・useEffect
・API(Route Handler)
・GET / POST
までを学習します。
完成イメージ
今回作る画面は3つです。
/
├── ホーム
│
├── 記録追加
│
└── 記録一覧
ホーム画面
🐶 mimimou Care
愛犬の健康を記録するアプリ
[記録を見る]
[記録を追加]
ホーム画面
ホーム画面には
・記録を見る
・記録を追加
の2つのボタンを配置しました。
ここからアプリ全体へ移動できるようにしています。
フォルダ構成
Next.js(App Router)では
app
├── page.tsx
├── add
│ └── page.tsx
├── records
│ └── page.tsx
└── api
└── records
└── route.ts
となります。
最初は
「なんでこんなにフォルダを分けるの？」
と思いました。
しかし、
add/は/add
というURL、
records/は/records
というURLになります。
つまりフォルダ＝URLという考え方になります。
ページ遷移
Next.jsでは
<a>
ではなく
import Link from "next/link";
を使用します。
記録を見る
</Link>
これだけで
localhost:3000/records
へ遷移できます。
同じように
<Link href="/add">
記録を追加
</Link>
も作成しました。
記録追加画面
犬の名前・カテゴリー・内容を入力できるフォームを作成しました。
Reactでは入力値をStateで管理します。
const [petName, setPetName] = useState("");
入力されるたびにStateが更新される仕組みです。
APIを作る
App Routerでは
app/api/records/route.ts
を作るだけでAPIになります。
export async function POST(request: Request) {
const body = await request.json();
return Response.json({
message: "保存成功！",
data: body,
});
}
最初は
「画面とAPIが同じappフォルダにあるの？」
と驚きました。
これもApp Routerの特徴です。
GETとPOST
Webアプリでは
GET
データを取得
POST
データを保存
という役割があります。
今回は
export async function GET()
と
export async function POST()
の両方を作成しました。
useState
入力した値を保持するために
const [petName, setPetName] = useState("");
を使用しました。
フォームでは
value={petName}
onChange={(e)=>setPetName(e.target.value)}
として入力値を管理しています。
Reactでは入力内容はStateで管理するという考え方になります。
fetchでAPIを呼ぶ
保存ボタンを押すと
await fetch("/api/records",{
method:"POST",
headers:{
"Content-Type":"application/json"
},
body:JSON.stringify({
petName,
category,
content
})
})
を実行しています。
流れとしては
画面
↓
fetch
↓
API
↓
保存
となります。
useEffect
一覧画面では
useEffect(()=>{
load();
},[]);
を使用しました。
画面を開いた瞬間にfetch("/api/records")を実行しています。
これにより
画面表示
↓
GET API
↓
一覧表示
となります。
仮保存
今回はデータベースをまだ使用していないため
const records: RecordItem[] = [];
に保存しています。
records.push(body);で追加し、
return Response.json(records);
で一覧表示しています。
当然ですがnpm run devを止めるとデータは消えます。
今回はAPIの流れを理解することが目的なので問題ありません。
学んだこと
今回学んだ内容は
・Next.js(App Router)
・ページ作成
・Link
・useState
・useEffect
・API(Route Handler)
・GET
・POST
・fetch
・TypeScriptの型定義
でした。
ReactやNext.jsを始めたばかりだと
「画面・API・状態管理」
が全部バラバラに感じます。
しかし実際に作ってみると
画面
↓
入力
↓
State
↓
fetch
↓
API
↓
保存
↓
一覧表示
という一連の流れでつながっていることが理解できました。
次回
次回は
・DynamoDBへ保存
・AWS SDK
・データベースから一覧取得
を実装し、
「本当に保存できる犬の健康管理アプリ」
へ進化させます。