バックエンド（route.ts）の書き方を図式化してみた

初めてブログ投稿します。
昨日ぶべ先生と面談し、学んだことを備忘録として残します。
間違っていたら教えてください。

オリジナルアプリを作成中で、バックエンドのroute.tsのGETエンドポイントを一緒に書いてもらいました。

オリジナルアプリのコーディングは、今までやってきた課題の流れと異なり

① 型を設定
② バックエンドを書く
③ フロントを書く　　　

の順番で書いていきます。
わー💦苦手なものからでつらい。。。と思いながら、苦しみながら書いています🌱
まあフロントからでもtailwindCSSを使ったりで全く進まないのですが😢
昨日は、わからなさすぎる私の対応にぶべ先生がしんどそうでした（すみませんでした😢）が、その真摯な対応に、また頑張ろうと思いました。

図式化してみた！

これを図式というのか、、、すみません。
以下が一緒に書いた（書いてもらった笑）GETエンドポイントです。

実際のコード

以下が実際のコードです

import { NextResponse } from "next/server";
import { PrismaClient } from "@prisma/client";
import { CreatePostRequestBody } from "@/app/_type/Calendar";
import { supabase } from "@/utils/supabase";

const prisma = new PrismaClient();//初期化

export const GET = async (request: Request) => {
  const token = request.headers.get("Authorization") ?? ""; //ログインしているユーザーか判別（tokenを検証）
  const { error, data } = await supabase.auth.getUser(token);
  if (error)
    return NextResponse.json({ status: error.message }, { status: 400 }); //ログインして表示させたいページは書く


  const supabaseUserId = data.user.id; //supabaseからuseIdを取り出す
  //supabaseUserIdをもとにuserテーブルを見つける↓
  const user = await prisma.users.findUnique({
    where: { supabaseUserId }, //{supabaseUserId:supabaseUserId}同じ名前なら略せる（省略記法keyとvalueが一緒）
  });
  if (!user)
    return NextResponse.json(
      { message: "ユーザーが見つかりませんでした" },
      { status: 404 }
    );


  try {
    //カレンダーの一覧を見つけ出す！
    const calendars = await prisma.calendar.findMany({
      //findの内容（オブジェクト）何も書かなければすべて取ってくる
      //ユーザーIDをwhereで指定
      where: { userId: user.id }, //calendar`テーブルの`userId`列が現在のユーザーのIDと一致するレコードを取得する
    });


    //フロントエンドに返すコード
    return NextResponse.json({
      status: "OK",
      calendars,
    });
  } catch (error) {
    if (error instanceof Error)
      return NextResponse.json({ error: error.message }, { status: 400 });
  }
};

いろいろimportして（雑ですみません）supabaseの初期化した後に「GET」を書きます。
その後に、POST、PUT、DELITEと続くのかな。
書き方は、１０章で書くroute.tsを参考に書きました。
JSだけでWeb開発できるのが本当に魅力的だ✨
他に何ページも作る予定なのに、まだ、ログインしてからの１ページ目でさまよっています。
苦しみながら得た喜びをばねに、引き続き頑張ります！