【Next.js×Node.js×Prisma×Supabase】本格的なSNSアプリをフルスタック構築するマスター講座
モダンな技術スタックを駆使して１からSNSアプリケーション開発する講座。ユーザー認証からSupabaseでの投稿DB管理、PrismaのORMを使ってJavascriptのみの知識でフロントからバックエンドまで完結させる技術を身に着けます。
Course curriculum
-
-
本講座で学べること
-
本講座で作るSNSの完成品デモ
-
-
-
フルスタック開発する開発環境を構築してみよう
-
Expressフレームワークでローカルサーバーを構築してみよう
-
ユーザー用DBをSupabaseで管理してみよう
-
Prismaで初期化セットアップを開始しよう
-
UserモデルとPostモデルを構築してマイグレーション操作をしてみよう
-
ユーザー新規登録APIを作成してみよう
-
パスワードをbcryptライブラリを使ってハッシュ化してみよう
-
Thunder Clientを使ってAPIテストをやってみよう
-
ユーザーログインAPIを作成してみよう
-
トークンを発行するためにjsonwebtokenを利用してみよう
-
ログインAPIをテストしてトークンを発行してみよう
-
API処理を見やすい形にリファクタリングしておこう
-
【追加】次の動画におけるNext.jsの雛形を作る際の変更点
-
-
-
Next.jsにTailwindCSSを導入してみよう
-
SNS用ナビゲーションバーを作成してみよう
-
投稿用タイムラインを作成してみよう
-
新規登録フォームとログインフォームを作成してみよう
-
フォームに入力された値を取得してみよう
-
axiosライブラリを使ってAPIを叩いてみよう
-
CORSエラーを解決してみよう
-
Next.js側からログイン用APIを叩いてみよう
-
認証情報をアプリ全体に共有できるようなプロバイダーを作成してみよう
-
valueとchildrenの型を定義しておこう
-
AuthProviderをアプリ全体に共有させてみよう
-
-
-
呟き投稿用APIを構築してみよう
-
Next.jsで呟き投稿用APIを叩いてみよう
-
投稿した呟きを配列に格納する作業をはじめよう
-
実際に呟いて投稿が即時反映されるか確認してみよう
-
最新投稿を10件取得するAPIを作ってみよう
-
タイムライン読み込み時に最新投稿取得のAPIを叩いてみよう
-
呟いた人のユーザー名を取得できるようにAPIを修正してみよう
-
ローカルストレージにトークンがある場合に認証許可ヘッダーを付与してみよう
-
認証ヘッダにトークンがあるユーザーだけ投稿できるミドルウェアを作成してみよう
-
ミドルウェアが実際に機能するか投稿して確かめてみよう
-
他のユーザーでログインして投稿してみよう
-
【追加】ログインユーザーを切り替えてもトークンが変わらない問題について
-
-
-
ログインユーザー取得用APIを構築してみよう
-
Next.js側でリロードする度にログインユーザー取得APIを叩いてみよう
-
ログインユーザーがいた場合にナビゲーションバーの表示を変更させよう
-
ログアウトを実装して実際にログアウト/ログインをしてみよう
-
ログインしてもユーザーが切り替わらないバグを修正しよう
-
-
-
プロフィール用のモデルをPrismaで構築してみよう
-
ユーザー作成と同時にプロフィール作成もやってみよう
-
identiconライブラリを使ってデフォルトでユーザーアイコンを実装してみよう
-
実際にユーザーアイコンを生成してみよう
-
アイコン画像が表示されないバグを修正してみよう
-
Next.jsでプロフィール専用ページを作成してみよう
-
プロフィール取得用APIを構築してみよう
-
APIを叩いてプロフィール情報を表示してみよう
-
アイコンをクリックしたらそのユーザーのプロフィールページに遷移させてみよう
-
閲覧しているユーザーのプロフィールの投稿内容だけを取得するAPIを構築してみよう
-
閲覧ユーザーが投稿している投稿内容をプロフィール画面で出力してみよう
-
今までのセクションのまとめ
-
About this course
- 24,000円
- 59回のレッスン
- 4.5時間の動画コンテンツ