💻
Next.js13とSupabaseのブログ完全版
Next.js 13 で追加された App Directory と Supabase を使用したブログの完全版を構築しました。
ブログに必要な機能がすべて揃っています。
他のアプリにも応用できるので、自分なりに変更してオリジナルアプリを作ってみてください。
完成イメージ
動画
こちらの動画は、ブログ構築シリーズ第 3 段となっています。
変更点
- ブログテーブルからプロフィールテーブルを参照
- ブログ一覧とコメント一覧にページネーション追加
- コメント編集、削除追加
- コメントといいねをコンポーネント化
まだブログを構築していない方は、下記の動画を参考にしてください。
認証、ブログ構築
コメント、いいね機能追加
ソースコード
ソースコードは LINE 登録するとダウンロードできますので、ぜひ登録をお願いします。
最新の動画情報が届きます。
LINE お友達登録
機能
ブログ完全版の機能です。
- 認証系
- サインアップ
- ログイン
- ログアウト
- ブログ
- 一覧
- 投稿
- 編集
- 削除
- 画像保存
- ページネーション
- プロフィール
- 名前変更
- アバター画像変更
- コメント
- 一覧
- 投稿
- 編集
- 削除
- ページネーション
- コメントいいね
Next.js 13 App Directry のメリット
- コードをサーバーコンポーネントとクライアントコンポーネントで組織的に管理することができる
- コードの可読性の向上
- 開発効率の向上
- セキュリティ向上
App Directory はサーバーコンポーネントがデフォルトとなっています。
クライアントコンポーネントと指定しない限りサーバーサイドでレンダリングされるので、セキュリティが向上し表示スピードも上がります。
Supabase のメリット
- API を提供するため、既存のアプリケーションから移行する際のコストが低い
- Firebase のようなバックエンドサービスで、PostgreSQL を利用できる
- PostgreSQL のデータベースを使用するため、複雑なクエリを実行することができる
- 完全にオープンソースであり、自由にカスタマイズすることができる
- セキュリティやスケーラビリティに優れており、大規模なアプリケーションにも対応している
Supabase はバックエンド機能を提供するクラウドサービスで、データベースに PostgreSQL を使用しています。
フロントエンドとバックエンドの境界がなくなるので、より効率的な開発が可能になります。
デザインは TailwindCSS を使用していきます。
フルスタックチャンネル Q&A サイト
講座の不明点や個人開発の疑問点など、何でもご質問ください。
エラーが発生した場合
詳しいコードの解説は、Next.js、Supabase の公式ページを参考にして下さい。
今後ともよろしくお願いします。
Discussion