강의

멘토링

커뮤니티

BEST
Programming

/

Full-stack

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

フルスタック開発にブーストをかけるSupabase! 3つのクローンプロジェクトを通して、Next.js 14とSupabaseを使って実務レベルのフルスタック開発を行う方法を短期集中で学べます。

  • lopun
실습 중심
클론코딩
Next.js
supabase
TailwindCSS
react-query
Firebase

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

受講後に得られること

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

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

  • カカオ OAuth ログイン実装

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

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

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

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

この講義を通して、


NextJS 14バージョンと

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


3つのクローンプロジェクトを進める

実務レベルのフルスタック開発者に急成長!

フルスタック開発に翼をつける
ファイアベースの強力な対抗魔、

🚀スーパーベース 🚀

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

リアルタイムデータベース機能でリアルタイムチャットの開発もこれ以上怖くない

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

SDK、GraphQL、APIなど、私にとって楽な方法で簡単に連動します。

Adminページと自動的にSQLを作成するAI機能も無料です。

この講義を受講するすべての人は

合計4つのウェブサイト一人で配布まで

みんな完成します🚀

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

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

  • Supabase DatabaseによるCRUDの実装

  • タスクを作成、削除、検索、完了する実装

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

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

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

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

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

[プロジェクト3] ネットフリックスクローン

  • Supabase SDKで複雑なSQLを扱う

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

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

[プロジェクト4]インスタグラムクローン(会員登録、チャット)

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

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

  • 2種類の会員登録、ログイン実装

  • リアルタイムチャット、リアルタイム接続の有無を実現

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

こんな方に強くお勧めします

Supabase経由
サーバー構築なしでフルスタック開発
したい開発者

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

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

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

最速のフルスタック開発者になります!

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

この講義を受講した方のみ

得ることができるメリット4つ!

まず、

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

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

Supabaseの強力な機能

様々なプロジェクトに一つ一つ適用してみて

4つの重要な機能を正しく学ぶことができます😉

第二に、

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

実務能力を早く育てることができます)

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

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

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

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

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

第三に、

実務でよく使われる最新の技術スタックを学べます!

各技術別に理論と実務講義が提供されます)

単に「最新技術」だけにフォーカスを置かず、

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


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

実務で使う方法そのまま

今回の講座でみんなで学べます!

第四に、

2つの配布方法を学び、ドメインまで連動します!

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

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

独自のドメインを購入して連動する方法まで

みんな学びます


(+よりプロフェッショナルなポートフォリオを完成できます!)

待って!まだ学校に在学中の学生ですか?

🔗 学生割引(-50%)Googleフォームリンク🔗

受講前の注意

学習資料

選手の知識と注意事項

  • Next.js または React.jsを使ってみた方であれば、講義に十分従うことができます!

  • 基本的なCSS知識は必要です。 (ex. flex とは何か)

購入後も継続的に更新されるコース

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

  • Supabaseに新機能が追加された場合は、レッスンが更新される予定です。

#Next.js, #supabase, #tailwind-css, #react-queryスーパーベース, #recoiljs, #firebase, #Supabase RLS, #Row level Security

こんな方に
おすすめです

学習対象は
誰でしょう?

  • フルスタック開発をやり遂げたいフロント開発者

  • 開発と運用難易度をグッと下げたい1人 / 小規模開発チーム

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

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

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

  • 基本的な CSS 知識

こんにちは
です。

3,652

受講生

209

受講レビュー

64

回答

4.9

講座評価

7

講座

🚀 “핫한 스택으로 실전 서비스를 만드는 과정을 숨김없이 보여드립니다.”

이론보다는 프로젝트 위주의 실무 강의로 현업에 바로 도움이 될 수 있는 내용을 제공합니다.

  • (현) 네카라쿠배 재직

  • (현) 7년차 풀스택 개발

  • (강의) 스파르타 코딩클럽 강사

  • (교육) 한국과학기술원(KAIST) 전산학과 졸업

カリキュラム

全体

40件 ∙ (10時間 55分)

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

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

受講レビュー

全体

52件

4.8

52件の受講レビュー

  • 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
      知識共有者

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

  • hamjw01224657님의 프로필 이미지
    hamjw01224657

    受講レビュー 1

    平均評価 5.0

    5

    66% 受講後に作成

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

    • lopun
      知識共有者

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

  • 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% 受講後に作成

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

      • fined0006806님의 프로필 이미지
        fined0006806

        受講レビュー 33

        平均評価 4.7

        5

        100% 受講後に作成

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

        ¥12,351

        lopunの他の講座

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

        似ている講座

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