【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座 from Udemy

What's inside

Learning objectives

フルスタック技術を使って簡単な機能を備えたsns開発ができる
Nextjsの基礎(動的ルーティングやssg等)が学べる
Nodejs(express)を使ったバックエンドapi構築ができる
Supabaseを使ったdb管理ができる
Prismaを使ってormを実現し、supabaseと連携する方法が学べる
フロントエンドとバックエンドを両方構築し、フルスタック開発手法が学べる
Prismaを使ってsns開発に必要なモデルを定義できる
Jwtの基礎知識が学べる
ユーザー認証/ログイン/新規登録api実装が学べる
Reactのhooksを使って状態管理手法が学べる
Thunderclientを使ってapiテストする方法が学べる
Nextjsにtailwindcssを導入する方法が学べる
Axiosライブラリを使ってapiを叩く手法が学べる

Corsエラー回避方法が学べる
Snsで必要な呟き投稿や呟き取得apiを構築できる
Expressにおけるミドルウェア設定の意味と実装方法がわかる
ログイン状態の監視してナビゲーションバーuiの変更ができる
Snsにおけるプロフィールページが実装できる
Identiconライブラリでユーザー新規登録時にアイコン自動生成ができる
閲覧中のユーザーが投稿した呟きで取得できるapiが作れる
Vercelを使ってnextjsをデプロイする方法が学べる
Renderを使ってnodejsをデプロイする方法が学べる
最終的にフロントとバックエンドをデプロイしてweb上で公開・利用できるようにする
Show more
Show less

フルスタック技術を使って簡単な機能を備えたsns開発ができる
Nextjsの基礎(動的ルーティングやssg等)が学べる
Nodejs(express)を使ったバックエンドapi構築ができる
Supabaseを使ったdb管理ができる
Prismaを使ってormを実現し、supabaseと連携する方法が学べる
フロントエンドとバックエンドを両方構築し、フルスタック開発手法が学べる
Prismaを使ってsns開発に必要なモデルを定義できる
Jwtの基礎知識が学べる
ユーザー認証/ログイン/新規登録api実装が学べる
Reactのhooksを使って状態管理手法が学べる
Thunderclientを使ってapiテストする方法が学べる
Nextjsにtailwindcssを導入する方法が学べる
Axiosライブラリを使ってapiを叩く手法が学べる
Corsエラー回避方法が学べる
Snsで必要な呟き投稿や呟き取得apiを構築できる
Expressにおけるミドルウェア設定の意味と実装方法がわかる
ログイン状態の監視してナビゲーションバーuiの変更ができる
Snsにおけるプロフィールページが実装できる
Identiconライブラリでユーザー新規登録時にアイコン自動生成ができる
閲覧中のユーザーが投稿した呟きで取得できるapiが作れる
Vercelを使ってnextjsをデプロイする方法が学べる
Renderを使ってnodejsをデプロイする方法が学べる
最終的にフロントとバックエンドをデプロイしてweb上で公開・利用できるようにする
Show more
Show less

Syllabus

本講座で学べる事とデモを閲覧することができます

本講座で学べること

本講座で作るSNSの完成品デモ

本講座で必要な環境を設定することができます

VSCodeをインストールしよう

Node.jsをインストールしよう

コーディングが早くなるVSCode設定をしてみよう

本レクチャーの全体ソースコード

Node.jsやExpressをバックエンドとして、DBはPrismaやSupabaseを用いてユーザー登録やログインAPIを構築できるようになります

【追加】次の動画におけるNext.jsの雛形を作る際の変更点

フルスタック開発する開発環境を構築してみよう

Expressフレームワークでローカルサーバーを構築してみよう

ユーザー用DBをSupabaseで管理してみよう

Prismaで初期化セットアップを開始しよう

UserモデルとPostモデルを構築してマイグレーション操作をしてみよう

ユーザー新規登録APIを作成してみよう

パスワードをbcryptライブラリを使ってハッシュ化してみよう

Thunder Clientを使ってAPIテストをやってみよう

ユーザーログインAPIを作成してみよう

トークンを発行するためにjsonwebtokenを利用してみよう

ログインAPIをテストしてトークンを発行してみよう

API処理を見やすい形にリファクタリングしておこう

Next.jsにTailwindCSSを組み込む方法が学べます。またSNSのログインフォーム等を作成しAPIフェッチング手法を学びます。

Next.jsにTailwindCSSを導入してみよう

SNS用ナビゲーションバーを作成してみよう

投稿用タイムラインを作成してみよう

新規登録フォームとログインフォームを作成してみよう

フォームに入力された値を取得してみよう

axiosライブラリを使ってAPIを叩いてみよう

CORSエラーを解決してみよう

Next.js側からログイン用APIを叩いてみよう

認証情報をアプリ全体に共有できるようなプロバイダーを作成してみよう

valueとchildrenの型を定義しておこう

AuthProviderをアプリ全体に共有させてみよう

PrismaとSupabaseを用いてSNSで必須の呟き投稿と呟き取得APIを構築できるようになります。

呟き投稿用APIを構築してみよう

Next.jsで呟き投稿用APIを叩いてみよう

投稿した呟きを配列に格納する作業をはじめよう

実際に呟いて投稿が即時反映されるか確認してみよう

最新投稿を10件取得するAPIを作ってみよう

タイムライン読み込み時に最新投稿取得のAPIを叩いてみよう

呟いた人のユーザー名を取得できるようにAPIを修正してみよう

ローカルストレージにトークンがある場合に認証許可ヘッダーを付与してみよう

認証ヘッダにトークンがあるユーザーだけ投稿できるミドルウェアを作成してみよう

ミドルウェアが実際に機能するか投稿して確かめてみよう

他のユーザーでログインして投稿してみよう

【追加】ログインユーザーを切り替えてもトークンが変わらない問題について

ログインしているユーザーを取得して、表示するUIの内容を変更できるようになります。

ログインユーザー取得用APIを構築してみよう

Next.js側でリロードする度にログインユーザー取得APIを叩いてみよう

ログインユーザーがいた場合にナビゲーションバーの表示を変更させよう

ログアウトを実装して実際にログアウト/ログインをしてみよう

ログインしてもユーザーが切り替わらないバグを修正しよう

SNSで必須のプロフィール専用ページ（マイページ）を構築できるようになります。

プロフィール用のモデルをPrismaで構築してみよう

ユーザー作成と同時にプロフィール作成もやってみよう

identiconライブラリを使ってデフォルトでユーザーアイコンを実装してみよう

実際にユーザーアイコンを生成してみよう

アイコン画像が表示されないバグを修正してみよう

Next.jsでプロフィール専用ページを作成してみよう

プロフィール取得用APIを構築してみよう

APIを叩いてプロフィール情報を表示してみよう

アイコンをクリックしたらそのユーザーのプロフィールページに遷移させてみよう

閲覧しているユーザーのプロフィールの投稿内容だけを取得するAPIを構築してみよう

閲覧ユーザーが投稿している投稿内容をプロフィール画面で出力してみよう

今までのセクションのまとめ

Vercelとrenderサービスを使ってフロントとバックエンドをデプロイして運用する手法を学べます

デプロイするためにGithubのリポジトリを作成しよう

フロントエンドのNext.jsをVercelへデプロイしてみよう

バックエンドのNode.jsをrenderへデプロイしてみよう

Next.js側でAPIを叩くbaseURLを変更してみよう

今後どのようにプログラムを学べば良いのか、その方法が分かります

最後まで受講いただいた方へ

ボーナスレクチャー

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

適応して初めて学べる基礎となる知識が不足していると、理解するのが難しいかもしれない

React、Next.jsなどの基本技術を学んだだけでは物足りないと考える人向け

フルスタック技術を使ってSNS開発をしてみたい人向け

プリズマのORMを使ったデータベース操作に関心がある人向け

すぱべーすのBaasを使ってデータベース管理をしてみたい人向け

デプロイしてSNSアプリを運用してみたい人向け

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in 【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座 with these activities:

開発者コミュニティに参加する

Show steps

他の開発者とつながり、情報を交換することで、新しい視点やヒントを得られます。

Show steps

オンラインフォーラムに参加する
ミートアップやカンファレンスに出席する
ソーシャルメディアで開発者とつながる

メンターを見つける

Show steps

経験豊富なメンターから指導を受けると、より早く進歩し、より多くの知識を得ることができます。

Show steps

メンター候補を探す
連絡を取る
定期的に会う

TailwindCSSの基本

Show steps

本講座ではフロントエンド用のCSSフレームワークとしてTailwindCSSを採用しております。TailwindCSSは非常に使いやすく洗練されたCSSフレームワークです。基礎を身に着けることで、後々のCSS作業を効率化してみましょう。

Browse courses on TailwindCSS

Show steps

公式ドキュメントやチュートリアルを読んで、TailwindCSSに慣れよう
TailwindCSSが実際にどのように動作するかを実験してみよう
サンプルプロジェクトでTailwindCSSを使ってみよう

Eight other activities

Expand to see all activities and additional details

Show all 11 activities

デプロイメントに関するチュートリアルを完了する

Show steps

専門家のガイダンスに従ってデプロイメントを実行し、その手順をより深く理解しましょう。

Show steps

Vercelの公式ドキュメントを確認する
renderの公式ドキュメントを確認する
UdemyやCourseraなどのオンラインコースを利用する

SNS開発に関するワークショップに参加する

Show steps

実践的なワークショップに参加することで、新しいスキルを身に付け、専門家から直接指導を受けられます。

Show steps

ワークショップを探す
参加登録する
ワークショップに参加する
学んだことを適用する

APIでCRUD操作を練習する

Show steps

CRUD操作を繰り返し行うことで、API操作をより深く理解できます。

Show steps

ユーザー新規登録APIを作成する
ログインAPIを作成する
投稿APIを作成する
最新投稿を取得するAPIを作成する
プロフィールページにユーザー情報を表示するAPIを作成する

ハッカソンに参加する

Show steps

ハッカソンで競うことで、プレッシャーの中でスキルをテストし、イノベーションを促進できます。

Show steps

ハッカソンを探す
チームに参加するまたはチームを結成する
アイデアをブレインストーミングする
プロジェクトを開発する
プロジェクトを提示する

追加機能を備えたSNSアプリを作成する

Show steps

より複雑なSNSアプリケーションを作成することで、スキルを応用し、新たな課題に挑戦できます。

Show steps

新しい機能を定義する
アーキテクチャを設計する
必要な技術を調査する
実装する
テストする

簡単なフルスタックアプリを構築してみよう

Show steps

本講座で学んだことを実践し、簡単なフルスタックアプリを作成してみましょう。これにより、フルスタック開発の流れを身に着け、理解を深めることができます。

Show steps

アプリのアイデアを考えよう
アプリのアーキテクチャを設計しよう
データベースを作成しよう
バックエンドを作成しよう
フロントエンドを作成しよう
アプリをデプロイしよう

SNSアプリのチュートリアルを作成する

Show steps

チュートリアルを作成することで、理解を深め、他の人にも知識を共有できます。

Show steps

チュートリアルのアウトラインを作成する
具体的な手順を書き出す
スクリーンショットを撮る
記事または動画を作成する
共有する

SNSアプリを実際にデプロイしてみよう

Show steps

実際のデプロイを通じて、知識を定着させ、スキルを応用しましょう。

Browse courses on NextJS

Show steps

Vercelとrenderサービスをセットアップする
フロントエンドをVercelにデプロイする
バックエンドをrenderにデプロイする
両者をデプロイして公開する

Career center

Learners who complete 【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座 will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

【Next.js/Node.js/Prisma/Supabase】本格的なSNSアプリをフルスタック構築するマスター講座

Here's a deal for you

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses