【11章】NextJSでのバックエンド開発演習（後半）の振り返り

学んだこと

Baas(”Backend as a Service”)の一種であるSupabaseを使った認証機能と画像保存機能の実装

破xあっぁぁぁぁあx今回も難しかった。。。
10 章と比べるとカロリーはだいぶ少なかった気がします。それでもむずい！！でも楽しい！

11章では初見のコードを見ても理解できる処理や流れが多かったことで成長を実感できました。
その甲斐もあって、今まではコードの一行一行を説明してもらってましたが、
今回から、まずコード上で自分なりに処理を言語化してコメントで残して、
言語化した部分の認識が合っているのか、自分なりに調べた部分は合ってるのかをAIパートナー様に質問して進めました。

このやり方だと、自分の認識のズレが分かったり修正してもらえるので知識の定着率が良かったです。
改めて理解が深まった基本的部分がいくつかあったりもして（例えばuseStateとか分割代入とか）
なるほどぉぉと気持ちよくなってました🤩
あと、以前の章でRHF(React-hookForm)を触っていたので理解しやすかった！
Gitの使い方だけはまだまだ慣れません。AIなしだとどうなっていたのやら。。。。

初めはReact＋JSで作り始めた小さなアプリが章を追うごとに機能が増えて、きちんとしたアプリになっていく過程を楽しむことができております。。。
Shift Bのカリキュラム恐るべしです🙇

registerとonChangeが競合してエラーが出た。。。

記事の新規作成ページで作成ボタンを押すとエラーが出てうまく記事作成ができないというエラーがでていました。

結論エラーの原因は二つありました。

①Postmanで送っているbodyの中身が古いままだった

{
  "title": "hugahuga",
  "content": "hoge",
  "thumbnailUrl": "xxx"  // ← 古い名前のまま！
}
{
  "title": "hugahuga",
  "content": "hoge",
  "thumbnailImageKey": "private/a1b2c3-xxxx"  // ← 新しい名前
}

②inputのregisterとonChangeが競合していた

<input
  {...register("thumbnailImageKey", {  // ← react-hook-formが管理
    required: "必須項目です",
  })}
  onChange={handleImageChange}  // ← 独自のonChangeも指定
/>

エラーが出てからした事

api/admin/postsのコード内で今回変更した箇所
“thumbnailUrl→thumbnailImageKey“の確認→OK

PostmanでのAPI送信→エラー箇所発見←修正するもまだうまくいかない

その後、admin/posts/newでconsole.logをしてみると

がでてきましたが分からず記事などで調べてみるも該当箇所が見つからないので

AIパートナーに聞いてみたところthumbnailImageKeyには本来

thumbnailImageKey: "private/a1b2c3-xxxx" // ← Supabaseのパス になるべきで
その原因はinputのregisterとonChangeの競合だと判明しました。

エラーから学んだこと

次はいよいよ12章、結果ではなく成長を急いで頑張っていきます🔥