Міні курс по Supabase - платформі, яку я довго шукав. (Next.js App Router)
Вставка
- Опубліковано 11 лип 2024
- Сьогодні огляд та міні курс платформи, яку нещодавно знайшов - Supabase. Supabase is an open source Firebase alternative. В даному курсі розберемось з двома функціями цієї платформи - база даних PostgreSQL та Authentification.
Зручна робота з базою даних і стали основною причиною чому ця платформа мені сподобалась та стала корисною.
Код будемо писати на Next.js (App Router, React Server Components, Server actions).
В сьогоднішньому відео також хочу порекомендувати крутого спеціаліста з веб розробки, автора UA-cam каналу "programming mentor ua" @programmingmentorua та Telegram каналу t.me/programmingmentor - В’ячеслава Колдовського. В’ячеслав Колдовський - розробник, сертифікований Google Cloud Architect, інструктор і ментор починав кар’єру в IT ще в 1990-х і за 20+ років встиг попрацювати з купою технологій і мов програмування.
00:00 Supabase intro
02:20 План курсу
04:58 Колаборація з Programming Mentor UA
08:01 Ціна Supabase - Free
10:00 Клієнтські бібліотеки Supabase (JS)
11:27 Supabase CLI
12:28 Про автора
13:25 Реєстрація в Supabase
15:00 Огляд інтерфейсу
16:19 Створюємо першу таблицю
18:54 Створюємо Next.js проєкт
22:56 Отримання даних з Supabase
25:23 Додавання Policies для отримання даних
27:42 Опис Schema
29:13 Авторизація через GitHub
32:44 Auth кнопки авторизації
37:29 Auth callback endpoint
44:51 Next.js middleware
47:40 Додавання автора до коментарів
49:27 Додаємо user_id в таблицю коментарів
52:39 Візуалізація бази даних
53:37 Зміна Policy лише для авторизованих
57:33 Створюємо Profiles таблицю
59:20 Створюємо Postres Functions
01:02:15 Створюємо тригер
01:04:37 Змінюємо foreign key для таблиці коментарів
01:10:11 Робота з сесією
01:10:46 Динамічне показання Auth кнопки
01:13:22 Auth кнопка Server Component
01:17:27 Insert into. Додавання коментарів
01:18:11 Server actions
01:27:57 Сортування коментарів
01:28:56 TypeScript генерація типів
01:36:24 Оновлюємо TypeScript конфіг
01:36:58 Глобальні типи TypeScript
01:41:27 Table alias
01:43:25 Кнопка Видалення
01:48:48 Локальна база даних та міграція
Стати спонсором каналу:
/ @maksymrudnyi
Буду вдячний за підтримку каналу:
Patreon - / rudnyi
BuyMeACoffee - www.buymeacoffee.com/maksymru...
Mono Bank - send.monobank.ua/jar/6oqhydjLGp
або так - 5375 4114 0505 7287
Приват банк - 4627 0551 1331 6110
Давайте дружити:
Telegram ↣ t.me/maksymrudnyi
Telegram чат ↣ t.me/joinchat/H4AF4W4dfGeGepNQ
INSTAGRAM ↣ / maksym_rudnyi
TWITTER ↣ / maksymrudnyi
FACEBOOK ↣ / travelscode
WEB-SITE ↣ travelscode.com/
GITHUB ↣ github.com/MaksymRudnyi/
Другий UA-cam канал ↣ / travelscode
#Supabase #NextJS #React #JavaScript - Наука та технологія
В сьогоднішньому відео також хочу порекомендувати крутого спеціаліста з веб розробки, автора UA-cam каналу "programming mentor ua" @programmingmentorua та Telegram каналу t.me/programmingmentor - В’ячеслава Колдовського. В’ячеслав Колдовський - розробник, сертифікований Google Cloud Architect, інструктор і ментор починав кар’єру в IT ще в 1990-х і за 20+ років встиг попрацювати з купою технологій і мов програмування.
Дякую! Корисне відео!
Приємно чути.
Дякую, за якісні відео
Дякую, приємно чути.
дякую велика, дуже корисне відео якраз шукав з чого почати для бекенду на нексті
Радий чути. Сподіваюсь буде корисним.
Дякую за відео!
Цікаво було б порівняльне відео різних БД, Монго/Firebase/Supabase і т.д. Взагалі постійно шукаю відео з порівнянням різних технологій. Як це було в відео про CSS.
Це як ідея для майбутнього контенту.
буде повноцінний курс по цій темі ?
По Supabase чи Postgres? Взагалі я планую Supabase використовувати коли буду курс по Next.js робити.
Чи реально якось отримувати 401 від supabase.from("example").select("*") якшо юзер не залогінений, окрім звичайно перевірки сесії?
А чому у мене немає headers в @/node_modules/next/?
Cannot find module '@/node_modules/next/headers' or its corresponding type declarations.
в гуглі поки не знайшов...(
noda 20
next 14
хз, має працювати. Спробуйте змінити імпорти на нормальні 'next/headers'. Я дальше у відео змінюю конфіги TypeScript щоб там нормально підтягувались імпорти.
@@MaksymRudnyi Пробував, поки не получається...розбираюся... воно взагалі при виборі import {cookies} не викидає підказку, значить його нема...🤔
все норм, ще раз змінив шлях допомогло!