강의

멘토링

로드맵

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

受講生

197

受講レビュー

64

回答

4.9

講座評価

6

講座

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

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

  • (현) 네카라쿠배 재직

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

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

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

カリキュラム

全体

40件 ∙ (10時間 55分)

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

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

受講レビュー

全体

52件

4.8

52件の受講レビュー

  • official님의 프로필 이미지
    official

    受講レビュー 1

    平均評価 5.0

    5

    63% 受講後に作成

    Đối với những ai đang thắc mắc có nên tham gia khóa học này hay không, tôi muốn giải thích những lợi ích mà tôi cảm nhận được khi tham gia khóa học này. Chúng tôi cũng đã biên soạn một danh sách những người có thể thấy hữu ích khi lắng nghe. công lao 1. Bạn có thể nhanh chóng làm quen với việc sử dụng công nghệ mới nhất và Supabase với ba phương pháp mã hóa nhân bản. 2. Bạn có thể trực tiếp trải nghiệm và triển khai các công nghệ mới nhất của NextJS, chẳng hạn như Server Actions. 3. Bạn có thể tập trung vào việc tìm hiểu các chức năng cốt lõi cần thiết khi thực hiện các dự án thực tế, chẳng hạn như cuộn vô hạn. 4. Bạn có thể cải thiện trải nghiệm phát triển của mình bằng cách học cách triển khai cả phiên bản Vercel và AWS. Tôi nghĩ những lợi thế có thể được giải thích theo bốn cách: Tôi đã biên soạn một danh sách những người có thể được hưởng lợi từ việc tham gia bài giảng này. 1. Những người có kiến ​​thức nền tảng cơ bản về quản lý trạng thái toàn cầu và API máy chủ và muốn trở nên thành thạo thông qua việc học tập nhiều lần 2. Những người muốn hoàn thành một dự án bằng cách tích hợp phần phụ trợ và giao diện người dùng 3. Những người muốn trực tiếp trải nghiệm toàn bộ quá trình từ tạo dự án đến phân phối 4. Những người muốn làm quen với việc triển khai mã và hàm thông qua việc học lặp đi lặp lại Mặc dù có một bài giảng ở phần đầu cung cấp lời giải thích chung về nhóm công nghệ được đề cập trong bài giảng, chẳng hạn như React Query, Recoil và NextJS, nhưng nó có thể khó hiểu nếu bạn không có kiến ​​thức cơ bản. Vì bài giảng tập trung vào cách sử dụng hơn là giải thích cơ bản về công nghệ hay thư viện nên nếu bạn chưa có kiến ​​thức nền tảng, chúng tôi khuyên bạn nên tìm hiểu những kiến ​​thức cơ bản trước rồi mới học bài giảng này. Vì tiến độ nhanh hơn các khóa học khác và số lượng dự án phải hoàn thành lớn, bạn sẽ có thể cảm nhận được kỹ năng của mình được cải thiện bằng cách thực hiện nhiều lần các chức năng trong một khoảng thời gian ngắn. Tôi giới thiệu nó cho bất cứ ai đang cân nhắc tham gia một khóa học để thành thạo.

    • lopun
      知識共有者

      Wow, cảm ơn bạn rất nhiều vì đã viết bài đánh giá khóa học chi tiết như vậy!! Tôi đã rất lo lắng về việc làm thế nào các sinh viên sẽ chấp nhận sự thật là có rất nhiều dự án, nhưng tôi rất cảm động khi họ nói rằng nó rất hữu ích haha. Nhân tiện, bạn gần như đã hoàn thành xong bài giảng rồi 🫢 Chúc may mắn với những bài giảng còn lại, người mới bắt đầu! Nếu ở hiệp 2 có nội dung nào khó chúng tôi sẽ tích cực hỗ trợ :)

  • hamjw01224657님의 프로필 이미지
    hamjw01224657

    受講レビュー 1

    平均評価 5.0

    5

    66% 受講後に作成

    Tôi muốn sử dụng Supabase nhưng gặp khó khăn khi sử dụng nó với Next.js do thiếu tài liệu nên tôi đã tham gia khóa học này. Tôi thích thực tế là sau khi tìm hiểu những điều cơ bản về Supabase thông qua một dự án đơn giản như ToDoList, tôi có thể trực tiếp triển khai các chức năng chính như Lưu trữ và Xác thực. Nội dung bài giảng được tổ chức tốt trên Notion nên không khó để theo dõi bài giảng, phần giải thích được giải thích từng bước nên mình đã được nghe khá nhiều bài giảng khi làm việc tại công ty.☺️ Cảm ơn bạn đã tạo ra những bài giảng hay như vậy. Nó rất hữu ích

    • lopun
      知識共有者

      Xin chào Jane! Thật tuyệt khi bạn có thể tham gia khóa học nhanh như vậy khi đang làm việc tại công ty. 🫢 Tôi ​​giải thích mọi thứ một cách chậm rãi để học viên có thể hiểu được. Nếu thấy hơi chậm, bạn có thể sử dụng chức năng tốc độ gấp đôi. Cảm ơn bạn rất nhiều vì đã để lại đánh giá có giá trị của bạn!

  • joy40176271님의 프로필 이미지
    joy40176271

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    Tôi bắt đầu học khóa này vì muốn tạo ra một ứng dụng web riêng của mình trong quá trình phát triển frontend. Khi tôi tự thử tích hợp Next.js và Supabase thì thấy rất khó khăn, nhưng thông qua khóa học này tôi đã có thể học được rất nhiều điều. Cảm ơn anh đã tạo ra một khóa học tuyệt vời! Nhờ đó tôi sẽ có thêm 3 portfolio nữa 😊😊 Thêm vào đó, hiện tại Next.js đã lên phiên bản 15 nhưng trong khóa học sử dụng phiên bản 14 nên sự khác biệt về cú pháp nhiều hơn tôi nghĩ. Nếu anh có thể thêm tài liệu bổ sung về sự khác biệt giữa các phiên bản vào khóa học, hoặc hướng dẫn sử dụng lệnh npx create-next-app@14 ... thì việc học sẽ thuận tiện hơn.

    • swerty142487님의 프로필 이미지
      swerty142487

      受講レビュー 1

      平均評価 4.0

      4

      30% 受講後に作成

      Thêm phần lý thuyết về công nghệ có lẽ sẽ tốt hơn.

      • fined0006806님의 프로필 이미지
        fined0006806

        受講レビュー 20

        平均評価 4.8

        5

        100% 受講後に作成

        Tôi đã học được rất nhiều điều nhờ việc bạn tạo ra những ví dụ hay với phiên bản mới nhất.

        ¥11,928

        lopunの他の講座

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

        似ている講座

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