강의

멘토링

로드맵

Inflearn brand logo image
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,707

受講生

146

受講レビュー

85

回答

4.8

講座評価

5

講座

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

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

  • 🚀 Naver Boostcamp BE 멘토 경험

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

カリキュラム

全体

68件 ∙ (7時間 12分)

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

受講レビュー

全体

26件

4.9

26件の受講レビュー

  • Malik KIM님의 프로필 이미지
    Malik KIM

    受講レビュー 3

    平均評価 3.7

    5

    100% 受講後に作成

    supabase와 nextjs를 함께 사용하는 한국어 강의를 찾기가 힘들었는데 덕분에 풀스택 웹앱을 빠르게 만들 수 있게 되어 너무 좋습니다. 좋은 강의 감사드립니다!

    • 도도(코딩루팡)
      知識共有者

      수강해주셔서 진심으로 감사드립니다! Next.js와 Supabase를 함께 사용한다는 것은 결코 쉬운 일이 아닙니다. 이 두 가지를 제대로 활용하려면 서버 사이드 렌더링과 풀스택 개발에 대한 깊은 이해가 필요하죠. 이번 강의가 여러분의 프로젝트 진행에 있어 큰 도움이 되었기를 바랍니다. 이 조합을 잘 활용하면, 강력하고 효율적인 웹 애플리케이션을 만들 수 있는 기반이 될 것입니다. 앞으로도 여러분의 개발 여정에 좋은 길잡이가 되었기를 바라며, 더 나은 성장을 이루시길 응원합니다!

  • Han Lee님의 프로필 이미지
    Han Lee

    受講レビュー 2

    平均評価 5.0

    5

    46% 受講後に作成

    안녕하세요, 코딩루팡님, 유튜브 구독자 입니다 :) 먼저 저에게 너무 필요한 강의를 올려주셔서 감사합니다. 특히 다음 2가지 부분에 대해 깊은 감사 드립니다. (1) Next.js + Supabase - Udemy 에서 Next.js 강의는 많지만 Next.js와 함께 Supabase 대해 다루는 강의는 찾아보지 못했습니다. - 한국어로 되어 있는 강의는 더욱 없기 때문에 다시 한번 감사 드립니다. (2) 학습방법 - 코딩 아바타가 되어, 일시정지하고 코드를 아무생각 없이 따라치면서 학습 했습니다. - 알려주신 학습법 ( 추상화 -> 구체화 ) 부분을 적용해 지식을 습득 및 체화 하겠습니다. 유튜브 커뮤니티에 인프런 해당 강의가 출시 되었음을 공지해 주셨으면 좋을 것 같습니다. [ 해당 강의가 심사 중에 있다는 소식만 있어서 혹시 몰라 전달 드립니다. ] 감사합니다.

    • 도도(코딩루팡)
      知識共有者

      안녕하세요. ㅎㅎㅎ 구독자셨군요.! 항상 부족한 유튭채널에 구독해주셔서 감사드리옵니다. 강의 출시 소식 전달이 좀 늦었네요 ㅠㅠ, 부족할 수 있는 강의 수강신청해주셔서 정말 감사드려요. HanLee님 기억하고 있다가 강의 뿐 아니라 진로, 취업 등 질문주시면 더 정성스럽게 답변드리도록 하겠습니다. ~ 👍

  • 권빵님의 프로필 이미지
    권빵

    受講レビュー 2

    平均評価 5.0

    5

    31% 受講後に作成

    next로 서버까지 다뤄보고 싶었는데, 마침 감사합니다.!! 👩🏿‍🦰

  • 코드DOS님의 프로필 이미지
    코드DOS

    受講レビュー 4

    平均評価 5.0

    5

    31% 受講後に作成

    supabase를 배워보고 싶었는데 좋네요. 아주 좋은 기반이 될 수 있는 강의 같아요. 이를 바탕으로 열심히 프로젝트 만들어볼께요.! next + supa 풀스택 파워풀 합니다.

    • 도도(코딩루팡)
      知識共有者

      화이팅 입니다.! 슈파베이스 정말 빠르게 프로젝트 만드는데 최고인것 같아요

  • 노용석님의 프로필 이미지
    노용석

    受講レビュー 4

    平均評価 4.8

    5

    31% 受講後に作成

    ¥6,526

    dodocodingの他の講座

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

    似ている講座

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