강의

멘토링

커뮤니티

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,665

受講生

212

受講レビュー

64

回答

4.9

講座評価

7

講座

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

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

  • (현) 네카라쿠배 재직

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

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

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

カリキュラム

全体

40件 ∙ (10時間 55分)

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

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

受講レビュー

全体

53件

4.8

53件の受講レビュー

  • official님의 프로필 이미지
    official

    受講レビュー 1

    平均評価 5.0

    5

    63% 受講後に作成

    For those of you who are wondering whether or not to take this course, I would like to explain the advantages I felt while taking the course. I have also compiled a list of people who will benefit from listening. Advantages 1. You can quickly get used to using the latest technologies and Supabase with 3 clone codings. 2. You can directly experience and implement the latest technologies of NextJS, such as Server Actions. 3. You can focus on learning the core functions required for actual projects, such as infinite scroll. 4. You can improve your development experience by learning the deployment methods of both Vercel and AWS. I think I can explain the advantages in four ways. I have compiled a list of people who will benefit from listening to this lecture. 1. Those who have basic background knowledge of global state management and server API and want to become proficient through repeated learning. 2. Those who want to integrate the backend and frontend to complete a single project. 3. Those who want to experience the entire process from project creation to deployment. 4. Those who want to become familiar with code and function implementation through repeated learning. Although the lecture initially provides a comprehensive explanation of the technology stack covered in the lecture, such as React Query, Recoil, and NextJS, If you don't have basic knowledge, it may be difficult to understand. Since the lecture focuses on utilization rather than basic explanations of technology or libraries, if you don't have background knowledge, I recommend that you learn the basics first and then take this lecture. Compared to other lectures, the progress is fast and the number of projects to be completed is large, so you will be able to feel your skills improving by repeatedly implementing functions in a short period of time. I recommend this lecture to anyone who is considering taking it for proficiency.

    • lopun
      知識共有者

      Wow, thank you so much for writing such a detailed course review!! I was worried about how the students would perceive the many projects, but I'm so touched that they said it actually helped them. ㅎㅎ By the way, you're almost done with the course already 🫢 Good luck with the remaining courses, beginners! If there's any difficult content in the latter half, I'll actively help you out :)

  • hamjw01224657님의 프로필 이미지
    hamjw01224657

    受講レビュー 1

    平均評価 5.0

    5

    66% 受講後に作成

    I wanted to try Supabase, but I was having trouble because there was not enough material to use it in Next.js, and then I came across this course. I liked that I could learn the basics of Supabase with a simple project like a to-do list and then implement major functions like Storage and Auth myself. The lecture content is well organized in Notion, so it was easy to follow the lecture, and the explanations were step-by-step, so I was able to listen to the lecture quite a bit while working at the company☺️ Thank you for making such a great course. It was very helpful.

    • lopun
      知識共有者

      Hello Jane! It's so cool that you're able to take the course so quickly while working. 🫢 I'm explaining it slowly so that students can understand it well. If it seems a little slow, you can use the speed function. Thank you so much for leaving a valuable review!

  • joy40176271님의 프로필 이미지
    joy40176271

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    I started taking this course because I wanted to create my own web app while doing frontend development. When I tried integrating Next.js and Supabase on my own, it was quite difficult, but through this course, I was able to learn a lot. Thank you for creating such a great course! Thanks to it, I'm getting 3 portfolios as a bonus 😊😊 Additionally, Next.js is currently at version 15 while the course uses version 14, so there were more syntax differences than I expected. It would be more convenient for learning if you could add supplementary materials about version differences to the course, or guide students to use the npx create-next-app@14 ... command.

    • swerty142487님의 프로필 이미지
      swerty142487

      受講レビュー 1

      平均評価 4.0

      4

      30% 受講後に作成

      Adding theoretical parts about technology is recommended.

      • fined0006806님의 프로필 이미지
        fined0006806

        受講レビュー 33

        平均評価 4.7

        5

        100% 受講後に作成

        Thank you for creating such great examples with the latest version, I learned a lot.

        ¥12,354

        lopunの他の講座

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

        似ている講座

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