Next.js + Prismaで記事投稿機能を実装してみた件

Next.js + Prismaで記事投稿機能を実装してみた件

公開: 2025年12月25日

学習振り返り
要約
  • microCMSから独自APIに移行し、記事とカテゴリーの多対多関係を管理するために中間テーブルを作成した。
  • カテゴリーを数値IDで管理し、APIを介して記事データを送信するための形に整える過程が難しかった。
  • 開発当中はコードの注釈が多くなり、次回の開発時にも迷いそうだが、Next.jsバックエンドに挑戦することを楽しんでいる。
音声で記事を再生
0:00

課題内容

microCMSで作った部分をハンズオン形式で0からコードを書いて作り、Webアプリのバックエンド開発の流れを学習する。
要するにmicroCMSじゃなくて独自APIで作っていくよーって感じ。

とくに難しかったところ

カテゴリーの取得・表示が難しすぎた、、、。
記事とカテゴリーを結びつけるには多対多なので中間テーブルが必要になる。


必要な理由
・ 1つの記事に1つのカテゴリーしか選べなくなる
・1つのカテゴリーに1つの記事しか所属できなくなる


その為、テーブルを3つ「記事・カテゴリー・中間テーブル」用意する。
これが後々、記事作成やカテゴリー新規作成する際にややこしくなってくる🥴

「今、自分が扱っているカテゴリーが『ただの数字』なのか、それとも『idという部屋を持ったオブジェクト』なのか」をなどを常に意識する必要がある。

場所

役割

実際のコード例

共用ファイル

IDを数値(number)で管理

setSelectedCategoryId(Number(e.target.value))

投稿(Page)

API専用の形に加工して送る

categories: [{ id: selectedCategoryId }]

route.ts (API)

型定義(interface)でルール指定

categories: { id: number }[]

route.ts (API)

1つずつ取り出してDB保存

categoryId: category.id

今こうしてまとめてても、次また開発するときに必ず迷うだろうと思う。
だから今回の課題ではコードの注釈量が半端じゃなかった🙄

さぁ、次はNext.jsバックエンド。
怖すぎる(楽しんでる)。

シェア!

XThreads
ShiftB Logo
Loading...
記事一覧に戻る
XThreads
0