강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Full-stack

[Hoàn thành Full-stack] nhân bản 3 website với Supabase (Next.js 14)

Supabase sẽ giúp phát triển full-stack bay cao! Qua 3 dự án clone, bạn sẽ học nhanh chóng cách phát triển full-stack ở cấp độ thực tế với Next.js 14 và Supabase.

(4.9) 48 đánh giá

838 học viên

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

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Cách phát triển full-stack không cần server bằng Supabase (Xác thực người dùng, tải lên file, chat thời gian thực)

  • Next.js 14 (feat. App Router, Server Action)

  • Triển khai Kakao OAuth Login

  • Tailwind CSS, React Query, Recoil thư viện

  • Cách deploy dự án bằng Vercel và AWS

  • Triển khai cuộn vô hạn, kéo và thả

  • Mua và liên kết tên miền

Trong bài giảng này, bạn sẽ:


Phiên bản NextJS 14

Kết hợp với Supabase , một dịch vụ phụ trợ mạnh mẽ,


Chúng tôi đang thực hiện ba dự án nhân bản

Nhanh chóng trở thành một lập trình viên full-stack trình độ chuyên nghiệp!

Mở rộng khả năng phát triển toàn diện
Một đối thủ mạnh mẽ của Firebase ,

🚀 Siêu Đế 🚀

Dễ dàng triển khai các yêu cầu phức tạp dựa trên PostgreSQL

Phát triển trò chuyện thời gian thực không còn đáng sợ nữa nhờ các tính năng cơ sở dữ liệu thời gian thực

Chức năng đăng nhập bằng mạng xã hội cũng được triển khai dễ dàng (Kakao, Google, v.v.)

Dễ dàng kết nối theo cách thuận tiện cho bạn, chẳng hạn như SDK, GraphQL hoặc API.

Trang quản trịtính năng AI tự động tạo SQL đều miễn phí.

Mọi người tham gia khóa học này

Tôi đã tự mình phân phối tổng cộng 4 trang web .

Tất cả sẽ được hoàn thành 🚀

🔗 Nhấp vào liên kết ( văn bản màu xanh ) trong mỗi dự án .

[Dự án 1] Danh sách việc cần làm (Dự án thực hành)

  • Triển khai CRUD với Cơ sở dữ liệu Supabase

  • Thực hiện việc tạo, xóa, tìm kiếm và hoàn thành nhiệm vụ

  • Dự án NextJS full stack đầu tiên của tôi

[Dự án 2] Bản sao Dropbox (Tải tệp lên)

  • Xử lý các chức năng của tệp với Supabase Storage

  • Thực hiện tải lên và xóa tập tin , tìm kiếm

  • Triển khai chức năng kéo và thả

[Dự án 3] Bản sao của Netflix

  • Xử lý SQL phức tạp với Supabase SDK

  • Màn hình danh sách phim , chức năng tìm kiếm và triển khai trang chi tiết

  • Triển khai cuộn vô hạn (intersection-observer)

[Dự án 4] Bản sao Instagram (Đăng ký, Trò chuyện)

  • Dễ dàng xây dựng các tính năng thành viên với Supabase Auth

  • Xử lý các tính năng thời gian thực với Supabase Realtime

  • Triển khai hai loại đăng ký thành viên và đăng nhập

  • Trò chuyện thời gian thực, triển khai kết nối thời gian thực

  • + Đã thêm hướng dẫn về cách triển khai chức năng đăng nhập Kakao !

Tôi thực sự khuyên những người này nên làm điều này

Thông qua Supabase
Phát triển toàn bộ ngăn xếp mà không cần thiết lập máy chủ
Nhà phát triển mà tôi muốn trở thành

Thông qua nhiều dự án nhân bản khác nhau
Tăng cường kỹ năng phát triển của bạn
Các nhà phát triển muốn phát triển

Sử dụng công nghệ mới nhất
Phát triển full-stack hiện đại
Nhà phát triển mà tôi muốn trở thành

Sự kết hợp mạnh mẽ của Next.js 14 và Supabase 🚀

Chúng tôi sẽ giúp bạn trở thành một lập trình viên full-stack trong thời gian nhanh nhất có thể !

Chúng tôi sẽ giúp bạn cải thiện kỹ năng của mình một cách nhanh chóng thông qua 3 dự án nhân bản 👩🏻‍🎓

Chỉ những người đã học khóa học này

4 lợi ích bạn có thể nhận được !

Đầu tiên,

Tìm hiểu tất cả 4 tính năng cốt lõi của Supabase!

( Học mọi thứ từ truy vấn DB, xác thực thành viên, tải tệp lên đến triển khai chức năng thời gian thực)

Các tính năng mạnh mẽ của Supabase

Tôi đã thử áp dụng nó vào nhiều dự án khác nhau, từng cái một.

Bạn có thể học đúng 4 chức năng cốt lõi 😉

Thứ hai,

Chúng ta hãy cùng nhau tạo tổng cộng 3 dự án nhân bản nhé!

( Bạn có thể nhanh chóng phát triển các kỹ năng thực hành của mình)

Thông qua tổng cộng ba dự án nhân bản

Triển khai tải tệp lên, xác thực thành viên, trò chuyện thời gian thực, chức năng tìm kiếm, cuộn vô hạn, v.v.

Được trang bị “bộ công nghệ có thể áp dụng trực tiếp vào thực tế”

Bạn sẽ được chuyển đổi thành một nhà phát triển full-stack!

(+ Đã thêm bài giảng về đăng nhập Kakao OAuth 😉 )

Thứ ba,

Bạn có thể tìm hiểu công nghệ mới nhất được sử dụng rộng rãi trong thực tế!

( Có bài giảng lý thuyết và thực hành cho từng công nghệ)

Thay vì chỉ tập trung vào “công nghệ mới nhất,”

Chúng tôi đã chọn những công nghệ có thể cho phép phát triển toàn diện hiệu quả 🙂


Không cần phải học riêng các công nghệ mới nhất

Cũng giống như nó được sử dụng trong thực tế

Bạn có thể học tất cả trong khóa học này!

Thứ tư,

Tìm hiểu hai phương pháp triển khai và thậm chí liên kết chúng với một miền !

( Bạn có thể tạo một danh mục đầu tư tuyệt vời với tên miền của riêng bạn)

Cách triển khai tới AWS EC2Vercel

Cách mua và liên kết tên miền của riêng bạn

Mọi người sẽ học


(+ Bạn có thể hoàn thiện một danh mục đầu tư chuyên nghiệp hơn!)

trong chốc lát! Bạn vẫn còn là học sinh ở trường phải không?

🔗 Giảm giá cho sinh viên (-50%) Liên kết biểu mẫu Google 🔗

Những điều cần lưu ý trước khi tham gia lớp học

Tài liệu học tập

Kiến thức và ghi chú của người chơi

  • Nếu bạn có kinh nghiệm sử dụng Next.js hoặc React.js , bạn có thể dễ dàng theo dõi khóa học!

  • Cần có kiến ​​thức cơ bản về CSS . (ví dụ flex là gì)

Các khóa học được cập nhật liên tục ngay cả sau khi mua

  • Nếu có phần nào khó hiểu , ngoài phần Hỏi & Đáp, chúng tôi sẽ bổ sung thêm bài giảng giải thích .

  • Khóa học sẽ được cập nhật khi Supabase có thêm tính năng mới .

#Next.js, #supabase, #tailwind-css, #react-querySupabase, #recoiljs, #firebase, #Supabase RLS, #Bảo mật cấp hàng

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Lập trình viên Front-end muốn hoàn thành Full-stack đến cùng

  • Cá nhân / Nhóm phát triển nhỏ muốn giảm đáng kể độ khó phát triển và vận hành

  • Người đang tìm dịch vụ backend tối ưu cho side project

Cần biết trước khi bắt đầu?

  • Hiểu biết cơ bản về Next.js hoặc React.js

  • Kiến thức CSS cơ bản

Xin chào
Đây là

3,479

Học viên

176

Đánh giá

64

Trả lời

4.9

Xếp hạng

6

Các khóa học

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

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

  • (현) 네카라쿠배 재직

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

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

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

Chương trình giảng dạy

Tất cả

40 bài giảng ∙ (10giờ 55phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

48 đánh giá

4.9

48 đánh giá

  • official님의 프로필 이미지
    official

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    63% đã tham gia

    이 강의를 들을지 말지 고민하시는 분들을 위해 제가 강의를 들으면서 느낀 장점에 대해 설명드리려고 합니다. 또한 들으면 도움이 될 사람들을 정리해보았습니다 장점 1. 3개의 클론코딩으로 최신 기술 및 Supabase를 사용하는데 빠르게 익숙해질 수 있다 2. Server Actions와 같은 NextJS의 최신기술을 직접 경험하고 구현해볼 수 있다 3. 무한스크롤과 같이 실제 프로젝트를 진행할 때 필요한 핵심적인 기능들을 중심적으로 학습할 수 있다 4. Vercel과 AWS 두 가지의 버전의 배포 방법을 학습하여 개발 경험을 향상시킬 수 있다 장점은 이렇게 네 가지로 설명드릴 수 있을 것 같습니다 이 강의를 들으면 도움이 될 것 같은 분들을 정리해보았습니다 1. 전역 상태 관리와 서버API에 기초적인 배경지식이 있으며, 반복 학습을 통해 숙련시키고 싶으신 분 2. 백엔드와 프론트엔드를 통합하여 하나의 프로젝트를 완성시켜보고 싶으신 분 3. 프로젝트 생성부터 배포까지 모든 과정을 직접 경험해보고 싶으신 분 4. 반복적인 학습으로 코드 및 기능 구현에 익숙해지고 싶으신 분 초반에 React Query, Recoil, NextJS 등 해당 강의에서 다루는 기술 스택에 대해 전체적인 설명을 해주는 강의가 구성되어 있긴 하지만, 기초적인 지식이 없는 경우 이해하기 어려울 수 있습니다. 기술이나 라이브러리에 대한 기초 설명보다는 활용 위주로 강의를 진행하기 때문에 배경지식이 없다면 먼저 기본적인 내용을 학습하시고 이 강의를 듣는 것을 추천드립니다. 타 강의에 비해 진행속도가 빠르고 완성하는 프로젝트 갯수가 많은 만큼 단기간에 반복적으로 기능을 구현하여 실력 향상이 체감됨을 느끼실 수 있을 것 같습니다. 숙련을 위해 강의를 고민하시는 분이라면 추천드립니다.

    • 로펀
      Giảng viên

      헉 너무 상세하게 수강평 작성해주셔서 정말 감사합니다!! 프로젝트가 많은걸 수강생 분들께서 어떻게 받아들이실지 많이 걱정했는데 오히려 도움이 되었다고 해주셔서 너무 감동입니다 ㅎㅎ 그나저나 벌써 강의를 거의 끝내가시네요 🫢 남은 강의 화이팅이에요 초보님! 후반부 어려운 내용이 있으면 적극적으로 도움 드리겠습니다 :)

  • Jane님의 프로필 이미지
    Jane

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    66% đã tham gia

    Supabase를 사용해보고 싶었는데 Next.js에 사용하려니 자료가 부족해서 어려움을 겪던 중 이 강의를 듣게 되었습니다. 투두리스트 같은 간단한 프로젝트로 Supabase의 기본을 익히고 나서 Storage나 Auth 같은 주요 기능들도 직접 구현해볼 수 있는 점이 마음에 들었습니다. 노션에 강의 내용 정리도 잘 되어 있어서 강의를 따라가기에 어려움이 없고 설명도 차근차근 해주셔서 회사를 다니면서도 강의를 벌써 꽤 많이 들을 수 있었네요☺️ 좋은 강의 만들어주셔서 감사합니다. 도움이 많이 되었어요

    • 로펀
      Giảng viên

      안녕하세요 Jane님! 회사를 다니시면서 강의 수강까지 이렇게 빨리 해내시다니 너무 멋있으십니다 🫢 수강생 분들께서 잘 이해하실 수 있도록 천천히 설명드리고 있어요 ㅎㅎ 좀 느린 것 같으면 배속 기능을 활용하셔도 좋을 것 같아요. 소중한 수강평 남겨주셔서 너무 감사합니다!

  • Seung-Hyun님의 프로필 이미지
    Seung-Hyun

    Đánh giá 1

    Đánh giá trung bình 4.0

    4

    30% đã tham gia

    기술에 대한 이론적인 부분을 추가하면 더 좋을 것 같음

    • 박종환님의 프로필 이미지
      박종환

      Đánh giá 1

      Đánh giá trung bình 4.0

      4

      30% đã tham gia

      • 김정현님의 프로필 이미지
        김정현

        Đánh giá 2

        Đánh giá trung bình 5.0

        5

        70% đã tham gia

        다른 강의처럼 몇 십시간씩 되는 쓸데없이 긴 강의가 아니고, 간결하게 핵심들로만 구성되어서 좋아용

        • 로펀
          Giảng viên

          너무 소중한 수강평 감사드립니다! 저도 너무 긴 수업은 따라가기 힘들어해서 최대한 많은 내용들을 10시간 안에 압축해보았어요 ㅎㅎ 좋게 봐주셔서 너무 감사드립니다.

      2.092.594 ₫

      Khóa học khác của lopun

      Hãy khám phá các khóa học khác của giảng viên!

      Khóa học tương tự

      Khám phá các khóa học khác trong cùng lĩnh vực!