강의

멘토링

커뮤니티

BEST
Programming

/

Full-stack

SupabaseとNextを使ったフルスタック開発入門 (Supabase OAuth、Next.js 14をフィーチャー)

FirebaseのSQL版!Supabaseを通じてNext.jsのフルスタックの基礎をマスターできます!

  • dodocoding
실습 중심
포트폴리오
Next.js
supabase
React
Clone Coding

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

こんなことが学べます

  • Supabase ( RLS, テーブル作成、API連携 )

  • Next.js App Router

  • Vercel CI/CD および最適化

  • MVCパターンでToDoListを共有する機能

  • Next.js サーバーに必要な最低限の知識

  • TypeScriptのタイピング基礎

  • OAuth、Googleログイン、GitHubログイン

最近、FE開発者が最も簡単にサーバーを扱うことができるSupabase!
Supabase + NextJS 14 FullStack基本

実務に必要な部分だけがぴったりですよ🍭

Firebaseの代わりにSupabaseを選択する理由! 😮🌲

FirebaseのSQLバージョン、 Supabase(シュヴァベース)を聞いてみましたか?

Supabaseには次の利点があります。

  • PostgreSQLベースのSQL DB機能

  • 強力なRLS (行レベルのセキュリティ)でApplication Levelの権限チェックを委任。

  • DB Schemaに基づいて自動的に作成するREST API

  • RealTime DataBase

  • OAuth 2.1サポート(Google、FitHub、カカオ、Facebookログインなど)

  • AIアシスタントと最高の開発者経験を持つAdminページと公式文書


講義を通じて作れるSupabaseプロジェクト!

この講義の特徴

📌 講義手書きノートガイド各章ごとにGoal、復習ポイント、さらに学ぶ(公式文書、概念など)

📌 講義チェックポイント提供:コードをたどらなくても大丈夫です!チャプタースターブランチがあります。

📌理論10%実習90% :Supabase RLSなど重要な理論も一緒に説明します。

📌 ポートフォリオ: クローンコーディングを通じて結果を得ることができます。

こんな方におすすめです


Supabaseは一日で適用されます。

Supabaseを使ってログインできるWebを1日で作成したい開発者/学生


Next.js 14 with supabase
最小限のNext.jsサーバー知識で

SSR、CSRにSupabaseを適用する方法


OAuthソーシャルログイン
難しいというソーシャルログイン

漢方で解決する方法

💡Supbase + Next.jsの組み合わせは、誰よりも速くフルスタックMVPプロ​​ジェクトを作成できる組み合わせです。

受講後は

  • 📌Supabaseを使ってサイドプロジェクトをたった一日で作ることができます。

  • 📌 PostgreSQL DBのTable作成、操作、RLS、Trigger、Functionsについて知ります。

  • 📌Next.jsのServerActions、Middleware、RSC、RouterHandler(API)を作成できます。

  • 📌 TailwindCSS で誰よりも早くUIの開発方法を学びます。

  • 📌Supabase Authenticationを使ってソーシャルログインを実装します。

  • 📌共有機能を備えたTodoAppプロジェクトを作成します。

このような内容を学びます。

Supabase SQL、RLS理論

  • PostgreSQLの強力なDB機能

  • 表の作成、照会、変更、削除、読み取りSQL構文

  • REST APIでテーブル情報を取得する

  • 簡単なRLS説明


Shared TodoApp ( with Next.js 14 )

  • App Routerを使用したクローンコーディングWeb

  • ブラウザのレンダリングレベルのTodo App

  • サーバーアクションを活用した Todo App

  • ソーシャルログイン機能と共有可能なTodo App

Supabase Editor with AI Assistant

  • Table Editor: テーブルの作成

  • SQL Editor: データの照会

  • Authentication : ユーザー管理

Next.js 14サーバーの最小知識

  • Router Handler

  • Middleware

  • RSC (React Server Component)

  • ServerActions

受講前の注意

練習環境

  • Node.js、VS Code、GitHub を使用します。

学習資料

  • GitHubとチャプター別のCheckPoint: Link

  • 手書きノートとワークブックを提供! : Link

  • LiveDemo: Link

選手の知識と注意事項

  • 基本的なHTML、CSS、Reactの知識

  • TailwindCSSでスタイリングしています。 (+要約講義があります。😀

  • (*最初に私はTailwindCSSを嫌いました。しかし最初にランニングカーブ(1時間ほど)開発経験の向上と開発速度が圧倒的に速くなりました。!本当に後悔しないでしょう。)


こんな方に
おすすめです

学習対象は
誰でしょう?

  • Next.js でプロジェクトを始めようとしている方

  • Supabaseを導入しようとしているFE開発者の方

  • Next.jsでサーバーフルスタックの開発を考えている方

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

  • 基礎レベルのHTML、CSS、React

こんにちは
です。

3,855

受講生

155

受講レビュー

88

回答

4.8

講座評価

5

講座

  • 프론트 개발자로 네카라쿠배 중 하나의 IT서비스 기업에 재직하고 있습니다. 😀

  • 🚀 SW마에스트로 Expert 취업 멘토링

  • 🚀 Naver Boostcamp BE 멘토 경험

  • 🚀 FE 7Code 로드맵 강의 제작

カリキュラム

全体

68件 ∙ (7時間 12分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

28件

4.9

28件の受講レビュー

  • flyordig9340님의 프로필 이미지
    flyordig9340

    受講レビュー 4

    平均評価 4.0

    5

    100% 受講後に作成

    supabaseとnextjsを一緒に使用する韓国語講義を見つけるのは大変でした。良い講義ありがとうございます!

    • dodocoding
      知識共有者

      受講していただきありがとうございます! Next.jsとSupabaseを一緒に使用することは決して簡単ではありません。この2つをうまく活用するには、サーバーサイドレンダリングとフルスタック開発の深い理解が必要です。今回の講義が皆さんのプロジェクト進行において大いに役立ったことを願っています。この組み合わせをうまく活用すると、強力で効率的なWebアプリケーションを作成するための基盤になります。今後も皆さんの開発旅程に良いアシスタントになってほしいと思い、より良い成長を成し遂げたいと思います!

  • hanlee님의 프로필 이미지
    hanlee

    受講レビュー 2

    平均評価 5.0

    5

    46% 受講後に作成

    こんにちは、コーディングルパン、 YouTubeの購読者です:) まず、私に必要な講義をあげてくれてありがとう。 特に、次の2つの部分に感謝します。 (1) Next.js + Supabase - Udemyでは、Next.jsの講義はたくさんありますが、Next.jsと一緒にSupabaseについて扱う講義は見つかりませんでした。 - 韓国語になっている講義はさらにないので、もう一度ありがとうございます。 (2) 学習方法 - コーディングアバターになり、一時停止してコードを何の考えもなく追いついて学習しました。 - 教えてくれた学習法(抽象化 ->具体化)部分を適用して知識を習得し、体化します。 YouTubeのコミュニティにインフラストラクチャの講義がリリースされたことをお知らせいただきたいと思います。 [該当講義が審査中にあるというニュースだけがあり、もしかしたらわかりません] ありがとうございます。

    • dodocoding
      知識共有者

      こんにちは。 ㅎㅎㅎ購読者でした。いつも不足しているユーチューンチャンネルに購読していただきありがとうございます。講義発売のお知らせの配信が少し遅かったですねㅠㅠ、足りない講義の受講申請をしていただきありがとうございます。 HanLeeさん覚えているが講義だけでなく進路、就職など質問していただければもっと丁寧に回答させていただきます。 ~ 👍

  • sh9508026566님의 프로필 이미지
    sh9508026566

    受講レビュー 2

    平均評価 5.0

    5

    31% 受講後に作成

    nextでサーバーまで扱ってみたかったのですが、よろしくお願いします。 👩🏿‍🦰

    • dodocoding
      知識共有者

      レビューありがとうございます。

  • dodoco님의 프로필 이미지
    dodoco

    受講レビュー 4

    平均評価 5.0

    5

    31% 受講後に作成

    supabaseを学びたかったのにいいですね。非常に良い基盤になることができる講義のようです。これを元に頑張ってプロジェクトを作りましょう! next + supaフルスタックパワフルです。

    • dodocoding
      知識共有者

      ファイティングです!スーパーベースは本当に速くプロジェクトを作るのに最高だと思います。

  • yongseoknoh0209님의 프로필 이미지
    yongseoknoh0209

    受講レビュー 4

    平均評価 4.8

    5

    31% 受講後に作成

    ¥6,814

    dodocodingの他の講座

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

    似ている講座

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