Next.js 13 で追加された App Directory と Supabase を使用してブログを構築していきます。
Next.js 13 App Directry のメリット
- コードをサーバーコンポーネントとクライアントコンポーネントで組織的に管理することができる
- コードの可読性の向上
- 開発効率の向上
- セキュリティ向上
App Directory はサーバーコンポーネントがデフォルトとなっています。
クライアントコンポーネントと指定しない限りサーバーサイドでレンダリングされるので、セキュリティが向上し表示スピードも上がります。
Supabase のメリット
- API を提供するため、既存のアプリケーションから移行する際のコストが低い
- Firebase のようなバックエンドサービスで、PostgreSQL を利用できる
- PostgreSQL のデータベースを使用するため、複雑なクエリを実行することができる
- 完全にオープンソースであり、自由にカスタマイズすることができる
- セキュリティやスケーラビリティに優れており、大規模なアプリケーションにも対応している
Supabase はバックエンド機能を提供するクラウドサービスで、データベースに PostgreSQL を使用しています。
フロントエンドとバックエンドの境界がなくなるので、より効率的な開発が可能になります。
フルスクラッチで Next.js13 の新機能 App Directory と Supabase の使い方を学習していきます。
デザインは TailwindCSS を使用していきます。
※2023/01
Next.js 13のApp Directoryはベータ版のため、今後ディレクトリ構成が変わる可能性があります。
目標
下記を学習していきます。
- Next.js 13 App Directory での構築方法
- Supabase ユーザー認証(ログイン、サインアップ、ログアウト)
- Supabase データベース構築
- Supabase ストレージ構築
- Supabase SQL Editor での構築
- ブログで作成、取得、編集、削除(CRUD)を学習
動画チュートリアル
動画でも解説しています。
ぜひ参考にして下さい。
機能
- サインアップ
- ログイン
- ログアウト
- ブログ一覧
- ブログ新規投稿
- ブログ編集
- ブログ削除
- プロフィール
- 画像保存
エラーが発生した場合
詳しいコードの解説は、Next.js、Supabase の公式ページを参考にして下さい。
ソースコード
LINE 登録すると全ての講座のソースコードがダウンロードできます。
ぜひ登録をお願いします。
LINE お友達登録
もしエラーが発生したり、分かりにくい箇所は下記のソースコードを参考にして下さい。
前提知識
このチュートリアルを始める前に、下記は学習しておいて下さい。
- React
- Next.js
- HTML
- CSS
- JavaScript
では、始めて行きましょう！！