Next.js × Supabase で「マイレシピ帳アプリ」開発

アプリの概要

Next.js (App Router)とSupabaseで構築した、マイレシピ帳アプリです。ログインしたユーザーが自分専用のレシピを記録・閲覧できるアプリです。以下のような機能を実装しました。

• ユーザー認証（サインアップ/ログイン）
• 自分専用のレシピ一覧ページ
• レシピの詳細ページ
• レシピの作成・編集・削除機能
• タイトル + UUID で生成される slug による詳細ページ表示
• SupabaseのRLSで、他のユーザーのレシピにはアクセス不可
• モバイル対応（レスポンシブデザイン）
• 材料・作り方は1つずつ追加可能な入力方式

使用した技術

• フレームワーク： Next.js(App Router)
• 認証： Supabase Auth
• データベース： Supabase
• 言語： Typescript
• スタイル： Tailwind CSS

開発した理由

普段から料理をする中で、献立を決めるのが大変と思ったことがきっかけでこのアプリ開発を始めました。自分の好きなレシピをマイページに保存しておくことで、いざ献立に迷ったときに、マイレシピ帳から選ぶことができます。

また、エンジニア就職に向けて、Next.jsやSupabaseを使ったWebアプリの実践的な開発経験を積みたいという目的もありました。

工夫したこと・学んだこと

• SupabaseのRLSを使って、ユーザーごとのデータ管理を安全に実装できた。
• slugをタイトル名＋IDにすることで、URLの重複を防ぎつつSEOも意識した。
• Tailwind CSSを使って、レスポンシブデザインで実装した。
• 材料や作り方は配列で扱うことで、1つずつ追加できるようにした。
• レシピ一覧ページやレシピの詳細ページはSSRで実装できた。

公開サイト→ https://my-recipe-book-smoky.vercel.app/

GitHub→ whoisyuma/my-recipe-book