タスク一覧取得のAPI作成、取得、表示

[h-yabi2]

API 作成

src/app/api/tasks/route.ts

import { TaskDocument, TaskModel } from "@/models/task";
import { connectDB } from "@/utils/database";
import { NextResponse } from "next/server";

export const GET = async () => {
  try {
    await connectDB();
    const allTasks: TaskDocument[] = await TaskModel.find();
    console.log(allTasks);

    return NextResponse.json({
      message: "タスク一覧を取得しました",
      tasks: allTasks,
    });
  } catch (error) {
    console.log(error);
    return NextResponse.json({
      message: "タスク一覧の取得に失敗しました",
      status: 500,
    });
  }
};

export const dynamic = "force-dynamic";

[h-yabi2]

API確認

• 上記ファイル作成後、 http://localhost:3000/api/tasks にアクセスすると、以下のように取得できる

[h-yabi2]

API取得コード

.env

• API_URL を追加

  API_URL=http://localhost:3000/api

src/app/(main)/page.tsx

• cache: "no-store", を指定してキャッシュを無効にしておく
• 作業コミット： https://github.com/h-yabi2/Next.js-MongoDB-TodoAPP/commit/a3e3090a51f1cc7a61f9cb3d3370655148b03e2b#diff-90f2fd3077ab6e179d8d0c5770730744823d1c3054847cfeed8c6bbb0eef3e5dR8

  
  ~
  import { TaskDocument } from "@/models/task";
  ~

---

const getAllTasks = async (): Promise<TaskDocument[]> => { const response = await fetch(${process.env.API_URL}/tasks, { cache: "no-store", }); if (response.status !== 200) { throw new Error("Failed to fetch tasks"); } const data = await response.json(); return data.tasks as TaskDocument[]; };

---

export default async function MainPage() { const allTasks = await getAllTasks(); ~

[h-yabi2]

実際に表示するコード

• コミット： https://github.com/h-yabi2/Next.js-MongoDB-TodoAPP/commit/39692f1951811b191ef31819dc0ef8f06901b9ea