[フルスタック完成] Supabaseでウェブサイト3つをクローンする (Next.js 14)

フルスタック開発に翼を授けるSupabase! 3つのクローンプロジェクトを通じて、Next.js 14とSupabaseで実務レベルのフルスタック開発を行う方法を最速で学びます。

難易度 初級

受講期間 無制限

Next.js
Next.js
supabase
supabase
TailwindCSS
TailwindCSS
react-query
react-query
Firebase
Firebase
Next.js
Next.js
supabase
supabase
TailwindCSS
TailwindCSS
react-query
react-query
Firebase
Firebase

学習した受講者のレビュー

学習した受講者のレビュー

4.9

5.0

official

63% 受講後に作成

この講義を聞かないで悩む方々のために、私が講義を聞きながら感じたメリットについて説明しようと思います。また、聞くと役に立つ人々をまとめました。 利点 1. 3つのクローンコーディングで、最新の技術とSupabaseの使用にすばやく慣れることができます。 2. Server ActionsのようなNextJSの最新技術を直接体験して実装することができる 3. 無限スクロールなど、実際のプロジェクトを進める際に必要な重要な機能を中心的に学習できる。 4. VercelとAWSの2つのバージョンのデプロイ方法を学習して、開発経験を向上させることができます メリットはこんな4つで説明できると思います この講義を聞くと役に立つような方をまとめてみました 1. グローバル状態管理とサーバーAPIに基づいた背景知識があり、繰り返し学習を通じて熟練させたい方 2. バックエンドとフロントエンドを統合して一つのプロジェクトを完成させてみたい方 3. プロジェクト作成から配布まで、すべてのコースを直接体験したい方 4. 繰り返し学習でコードと機能の実装に慣れたい方 序盤にReact Query、Recoil、NextJSなど、その講義で扱う技術スタックについて全体的な説明をする講義が構成されていますが、基礎的な知識がないと理解しにくい場合があります。技術やライブラリーの基礎説明ではなく、活用中心に講義を進めるので、背景知識がない場合は、まず基本的な内容を学習して、この講義を聞くことをお勧めします。 他の講義に比べて進行速度が速く完成するプロジェクト数が多いだけに、短期間に繰り返し機能を実装し、実力向上が体感されることを感じることができるようです。熟練のために講義をお悩みの方はおすすめです。

5.0

Jane

66% 受講後に作成

Supabaseを使ってみたかったのですが、Next.jsに使ってみると、資料が足りなくて苦労している間にこの講義を聞くようになりました。ツーリストのような簡単なプロジェクトでSupabaseの基本を身につけてから、StorageやAuthのような主な機能も直接実装できることが気に入りました。 ノッションに講義内容の整理も上手くなっていて講義に追いつくのが難しくなく、説明もじっくりしてくださって会社を通いながらも講義をすでにかなり聞いたことがありますね☺️良い講義作ってくれてありがとう。助けてくれました。

5.0

조현석

100% 受講後に作成

フロントエンド開発をしながら自分だけのWebアプリを作ってみたくて受講を始めました。 Next.jsとSupabaseの連携を一人で試した時はとても難しかったのですが、今回の講義を通じて多くのことを学ぶことができました。 良い講義を作ってくださってありがとうございます!おかげでポートフォリオを3つもおまけで持って帰ることになります😊😊 追加で、現在Next.jsは15バージョンで講義では14バージョンを使用しているため、文法の違いが思ったより多くありました。 講義にバージョンの違いに関する補足資料を追加していただくか、npx create-next-app@14 ... コマンドを使用するよう案内していただければ、学習がより便利になると思います。

受講後に得られること

  • Supabaseでサーバーレスフルスタック開発をする方法(ユーザー認証、ファイルアップロード、リアルタイムチャット)

  • Next.js 14バージョン (feat. App Router, Server Action)

  • カカオOAuthログインの実装

  • Tailwind CSS、React Query、Recoil ライブラリ

  • VercelとAWSを通じたプロジェクトのデプロイ方法

  • 無限スクロール、ドラッグ&ドロップ機能の実装

  • ドメインの購入および連携

この講義を通じて、皆さんは


NextJS 14バージョンと

強力なバックエンドサービスである Supabaseの組み合わせで


3つのクローンプロジェクトを進めながら

実務レベルのフルスタック開発者へと急速に成長します!

フルスタック開発に翼を授けてくれる
Firebase強力な対抗馬、

🚀 Supabase 🚀

PostgreSQL ベースで複雑な要件も簡単に実装できます

リアルタイムデータベース機能で、リアルタイムチャットの開発ももう怖くありません

ソーシャルログイン機能も簡単に実装できます (Kakao、Google、etc)

SDK、GraphQL、APIなど、自分に合った方法で簡単に連携できます

管理画面と自動でSQLを生成してくれるAI機能もすべて無料です

この講義を受講されるすべての方々は

合計4つのウェブサイト一人でデプロイまで

すべて完了することになります 🚀

🔗 各プロジェクトにあるリンク(青いテキスト)をクリックしてみてください

[プロジェクト 1] ToDoリスト (練習プロジェクト)

  • Supabase DatabaseでCRUDを実装

  • ToDoの作成、削除、検索、完了機能の実装

  • 初のNextJSフルスタックプロジェクト

[プロジェクト 2] Dropboxクローン (ファイルアップロード)

  • Supabase Storageでファイル機能を扱う

  • ファイルアップロードおよび削除、検索の実装

  • ドラッグ&ドロップ機能の実装

[プロジェクト 3] Netflixクローン

  • Supabase SDKで複雑なSQLを扱う

  • 映画リスト画面、検索機能、詳細ページの実装

  • 無限スクロールの実装 (intersection-observer)

[プロジェクト 4] Instagramクローン (会員登録、チャット)

  • Supabase Authで会員機能を簡単に構築

  • Supabase Realtimeでリアルタイム機能を扱う

  • 2通りの方式の会員登録、ログイン実装

  • リアルタイムチャット、リアルタイム接続状態の実装

  • + カカオログイン機能の実装講座が追加されました!

このような方に強くおすすめします

Supabaseを通じて
サーバー構築なしでフルスタック開発
したい開発者

多様なクローンプロジェクトを通じて
開発の実力をしっかりと
固めたい開発者

最新技術を活用して
モダンなフルスタック開発
したい開発者

Next.js 14とSupabaseの強力な組み合わせ 🚀

最短でフルスタックエンジニアへと導きます!

3つのクローンプロジェクトを通じて、素早く実力を向上させます 👩🏻‍🎓

この講義を受講された方だけ

得られる4つの特典!

一つ目、

Supabaseの4つの主要機能をすべて学びます!

(✅ DB照会、会員認証、ファイルアップロード、リアルタイム機能の実装まで、すべて学びます)

Supabaseの強力な機能

様々なプロジェクトに一つ一つ適用しながら

4つの核となる機能をしっかりと学ぶことができます 😉

第二に、

合計3つのクローンプロジェクトを一緒に作っていきましょう!

(✅ 実務能力を早く身につけることができます)

計3つのクローンプロジェクトを通じて

ファイルアップロード、会員認証、リアルタイムチャット、検索機能、無限スクロールなどを実装してみて、

"実務にすぐ適用可能な技術スタック"を備えた

フルスタック開発者へと生まれ変わります!

(+ カカオ OAuth ログイン 講義が追加されました 😉)

第三に、

実務でよく使われる最新の技術スタックを学ぶことができます!

(✅ 各技術ごとに理論と実務の講義が提供されます)

単に「最新技術」だけにフォーカスするのではなく、

効率的なフルスタック開発ができる技術を選定しました 🙂


最新技術を別途学ぶ必要なく

実務で使われている方式そのままに

今回の講座ですべて学ぶことができます!

第四に、

2つのデプロイ方式を学び、ドメインまで連動させます!

(✅ 素晴らしいポートフォリオを自分だけのドメインで作ることができます)

AWS EC2Vercelでデプロイする方法から

自分だけのドメインを購入して連携する方法まで

すべて学ぶことになります ☺


(+ より専門性の高いポートフォリオを完成させることができます!)

受講前のご注意事項

学習資料

事前知識および注意事項

  • Next.jsまたはReact.jsを使用したことがある方なら、講義を十分に理解していただけます! ☺

  • 基本的なCSSの知識は必要です。(例:flexとは何かなど)

購入後も継続的にアップデートされる講座

  • 理解しにくい部分がある場合は、Q&Aの他にも補足説明の講義が追加される予定です。

  • Supabaseに新しい機能が追加された場合、講義がアップデートされる予定です。

#Next.js, #supabase, #tailwind-css, #react-query, #슈파베이스, #recoiljs, #firebase, #Supabase RLS, #Row level Security

こんな方に
おすすめです

学習対象は
誰でしょう?

  • フルスタック開発を最後までやり遂げたいフロントエンドエンジニア

  • 開発と運用の難易度を大幅に下げたい個人・小規模開発チーム

  • サイドプロジェクトに最適化されたバックエンドサービスをお探しの方

前提知識、
必要でしょうか?

  • Next.jsまたはReact.jsに関する基本的な理解

  • 基本的なCSSの知識

こんにちは
lopunです。

3,774

受講生

229

受講レビュー

64

回答

4.9

講座評価

8

講座

🚀 「トレンドの技術スタックで実践的なサービスを作る過程を包み隠さずお見せします」

理論よりもプロジェクト中心の実務講義を通じて、現場ですぐに役立つ内容を提供します。

  • (現) ネカラクベ在職

  • (現) 7年目フルスタックエンジニア

  • (講義) スパルタコーディングクラブ講師

  • (教育) 韓国科学技術院 (KAIST) 電算学科 卒業

もっと見る

カリキュラム

全体

40件 ∙ (10時間 55分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

56件

4.9

56件の受講レビュー

  • joy40176271님의 프로필 이미지
    joy40176271

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    フロントエンド開発をしながら自分だけのWebアプリを作ってみたくて受講を始めました。 Next.jsとSupabaseの連携を一人で試した時はとても難しかったのですが、今回の講義を通じて多くのことを学ぶことができました。 良い講義を作ってくださってありがとうございます!おかげでポートフォリオを3つもおまけで持って帰ることになります😊😊 追加で、現在Next.jsは15バージョンで講義では14バージョンを使用しているため、文法の違いが思ったより多くありました。 講義にバージョンの違いに関する補足資料を追加していただくか、npx create-next-app@14 ... コマンドを使用するよう案内していただければ、学習がより便利になると思います。

    • swerty142487님의 프로필 이미지
      swerty142487

      受講レビュー 1

      平均評価 4.0

      4

      30% 受講後に作成

      技術の理論的な部分を追加すると、より良くなるかと思います。

      • hamjw01224657님의 프로필 이미지
        hamjw01224657

        受講レビュー 1

        平均評価 5.0

        5

        66% 受講後に作成

        Supabaseを使ってみたかったのですが、Next.jsに使ってみると、資料が足りなくて苦労している間にこの講義を聞くようになりました。ツーリストのような簡単なプロジェクトでSupabaseの基本を身につけてから、StorageやAuthのような主な機能も直接実装できることが気に入りました。 ノッションに講義内容の整理も上手くなっていて講義に追いつくのが難しくなく、説明もじっくりしてくださって会社を通いながらも講義をすでにかなり聞いたことがありますね☺️良い講義作ってくれてありがとう。助けてくれました。

        • lopun
          知識共有者

          こんにちはJane!会社を通いながら講義の受講までこんなに早くやりましょうなんてすごくカッコイイです 🫢 受講生の方々がよくご理解いただけるよう、ゆっくり説明していますよㅎㅎ 少し遅いようなら配速機能を活用してもいいと思います。大切な受講評を残してくれてありがとう!

      • official님의 프로필 이미지
        official

        受講レビュー 1

        平均評価 5.0

        5

        63% 受講後に作成

        この講義を聞かないで悩む方々のために、私が講義を聞きながら感じたメリットについて説明しようと思います。また、聞くと役に立つ人々をまとめました。 利点 1. 3つのクローンコーディングで、最新の技術とSupabaseの使用にすばやく慣れることができます。 2. Server ActionsのようなNextJSの最新技術を直接体験して実装することができる 3. 無限スクロールなど、実際のプロジェクトを進める際に必要な重要な機能を中心的に学習できる。 4. VercelとAWSの2つのバージョンのデプロイ方法を学習して、開発経験を向上させることができます メリットはこんな4つで説明できると思います この講義を聞くと役に立つような方をまとめてみました 1. グローバル状態管理とサーバーAPIに基づいた背景知識があり、繰り返し学習を通じて熟練させたい方 2. バックエンドとフロントエンドを統合して一つのプロジェクトを完成させてみたい方 3. プロジェクト作成から配布まで、すべてのコースを直接体験したい方 4. 繰り返し学習でコードと機能の実装に慣れたい方 序盤にReact Query、Recoil、NextJSなど、その講義で扱う技術スタックについて全体的な説明をする講義が構成されていますが、基礎的な知識がないと理解しにくい場合があります。技術やライブラリーの基礎説明ではなく、活用中心に講義を進めるので、背景知識がない場合は、まず基本的な内容を学習して、この講義を聞くことをお勧めします。 他の講義に比べて進行速度が速く完成するプロジェクト数が多いだけに、短期間に繰り返し機能を実装し、実力向上が体感されることを感じることができるようです。熟練のために講義をお悩みの方はおすすめです。

        • lopun
          知識共有者

          ハックあまりにも詳細に受講坪を書いてくれてありがとう!プロジェクトが多いことを受講生の方々がどのように受け入れるのか多く心配していましたが、むしろ役に立ったと言ってくれてとても感動ですㅎㅎ とにかくすでに講義をほぼ終わらせていますね🫢残りの講義ファイティングです初心者!後半に難しい内容があれば積極的にお手伝いします:)

      • fined0006806님의 프로필 이미지
        fined0006806

        受講レビュー 46

        平均評価 4.7

        5

        100% 受講後に作成

        最新バージョンで例を分かりやすく作成していただき、大変勉強になりました。

        lopunの他の講座

        知識共有者の他の講座を見てみましょう!

        似ている講座

        同じ分野の他の講座を見てみましょう!

        ¥12,614