Next.js 13新機能のApp DirectoryとSupabaseでブログ構築

Web開発
supabase
初級
Next.js 13で追加されたApp DirectoryとSupabaseを使用してブログを構築していきます。 App Directoryで組織的にコードを管理することにより、可読性や開発効率、セキュリティが向上します。 Supabaseはバックエンド機能を提供するクラウドサービスで、データベースにPostgreSQLを使用しています。 フロントエンドとバックエンドの境界がなくなるので、より効率的な開発が可能になります。 ブログを構築しながら、データの作成(Create)、読み出し(Read)、更新(Update)、削除(Delete)の方法を学んでいきましょう。

学習内容

・Next.js 13 App Directory での構築方法 ・Supabase ユーザー認証(ログイン、サインアップ、ログアウト) ・Supabase データベース構築 ・Supabase ストレージ構築 ・Supabase SQL Editor での構築 ・ブログで作成、取得、編集、削除(CRUD)を学習

機能

・サインアップ ・ログイン ・ログアウト ・ブログ一覧 ・ブログ新規投稿 ・ブログ編集 ・ブログ削除 ・プロフィール ・画像保存

解説動画

YouTubeで解説をしています。
https://youtu.be/nQ7lKzI6RlE

解説記事

ステップ

ステップ1
Web開発
supabase
初級
Next.js 13新機能のApp DirectoryとSupabaseでブログ構築
ステップ2
Web開発
supabase
初級
Next.js13とSupabaseでAI画像生成アプリ構築(OpenAI DALL・E)
ステップ3
Web開発
supabase
初級
Next.js13とSupabaseでAIチャットアプリ構築(GPT-3)
ステップ4
Web開発
supabase
初級
Next.js13とSupabaseで構築したブログにコメント機能追加
ステップ5
Web開発
supabase
初級
Next.js13とSupabaseのブログ完全版
ステップ6
Web開発
supabase
中級
Next.js13とSupabaseで音声認識AIチャットアプリ構築(ChatGPT、Whisper)
ステップ7
Web開発
supabase
中級
Next.js13とSupabase、ChatGPT、Whisperで自動要約アプリ構築
ステップ8
Web開発
supabase
上級
Next.js13とSupabaseで知識データベースQ&Aアプリ構築(Embedding)
ステップ9
Web開発
supabase
初級
全てがここに!Next.jsとSupabaseで構築する認証システム
ステップ10
Web開発
supabase
中級
Next.jsとSupabase、Stripeで構築するサブスクメンバーシップ機能
ステップ11
Web開発
supabase
初級
【リメイク版】最新のNext.jsとSupabaseで認証ブログを作ろう