ヨウスケWebアプリ6期生
【11章】NextJSでのバックエンド開発演習(後半)の振り返り
2026年04月27日
ヨウスケWebアプリ6期生
2026年04月27日
完全未経験から転職挑戦中! オーストラリアワーホリの経験から、 今後海外在住やフリーランスにも興味あります!
見出しはありません
Baas(”Backend as a Service”)の一種であるSupabaseを使った認証機能と画像保存機能の実装
破xあっぁぁぁぁあx今回も難しかった。。。
10 章と比べるとカロリーはだいぶ少なかった気がします。それでもむずい!!でも楽しい!
11章では初見のコードを見ても理解できる処理や流れが多かったことで成長を実感できました。
その甲斐もあって、今まではコードの一行一行を説明してもらってましたが、
今回から、まずコード上で自分なりに処理を言語化してコメントで残して、
言語化した部分の認識が合っているのか、自分なりに調べた部分は合ってるのかをAIパートナー様に質問して進めました。

このやり方だと、自分の認識のズレが分かったり修正してもらえるので知識の定着率が良かったです。
改めて理解が深まった基本的部分がいくつかあったりもして(例えばuseStateとか分割代入とか)
なるほどぉぉと気持ちよくなってました🤩
あと、以前の章でRHF(React-hookForm)を触っていたので理解しやすかった!
Gitの使い方だけはまだまだ慣れません。AIなしだとどうなっていたのやら。。。。
初めはReact+JSで作り始めた小さなアプリが章を追うごとに機能が増えて、きちんとしたアプリになっていく過程を楽しむことができております。。。
Shift Bのカリキュラム恐るべしです🙇
記事の新規作成ページで作成ボタンを押すとエラーが出てうまく記事作成ができないというエラーがでていました。
結論エラーの原因は二つありました。
①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の競合だと判明しました。
Javascriptはオブジェクトの同じキーが重複したとき後から書いた方が優先されるルールがある
state(useState)かreact-hook-formどちらかで統一することArgument thumbnailImageKey is missing. これはサーバー側にthumbnailImageKey が届いていない
→Postmanでは成功しているのでフロント側に問題があると推測できると考える
エラー確認、サーバー側の問題かフロント側の問題か判断する(Postman使う)、console.logで値を確認する
次はいよいよ12章、結果ではなく成長を急いで頑張っていきます🔥
コメント
まだコメントはありません。