Next.js14 Full-stack app ServerActions/Prisma/Typescript
Створюємо сучасний додаток за допомогою Next.js14 з ServerActions/Prisma/Typescript
Ratings 4.37 / 5.00
What You Will Learn!
- Створити проект на NextJS та налаштувати його з БД Prisma та UI бібліотекою ShadCn.
- Освоїти роботу з локальною базою даних у Prisma: від створення до редагування моделей.
- Вивчити Server Actions у NextJS та створити динамічні форми.
- Навчитися взаємодіяти з базою даних, додаючи, видаляючи та витягуючи дані.
- Інтегрувати дані між двома моделями, створюючи, відображаючи та видаляючи записи.
Description
Що ви дізнаєтеся від цього курсу?
На протязі 10 захоплюючих уроків ви отримаєте глибокі знання та практичні навички з розробки Full-stack веб-додатків з використанням найновіших технологій, таких як NextJS 14, Prisma та TypeScript. Ви зможете створити потужний веб-додаток, який працює з базою даних Prisma, використовуючи елегантний UI від ShadCn.
Чому саме цей курс?
Практичний досвід: Ви не тільки ознайомитесь із теоретичними аспектами, але й отримаєте реальний досвід розробки від розробника з багаторічним досвідом.
Сучасні технології: Курс покриває найновіші технології, що дозволить вам бути у курсі останніх тенденцій у світі веб-розробки.
Професійний розвиток: Отримайте глибокі знання щодо створення динамічних форм, роботи з базою даних, використання Server Actions у NextJS, та багато іншого.
План курсу:
Старт проекту та налаштування оточення:
Створення проекту NextJS
Завантаження бібліотеки ShadCn UI
Підготовка проекту до роботи
Створення локальної БД Prisma:
Створення БД у Prisma
Формування схеми та моделі БД
Редагування моделі БД
Робота з Server Actions у NextJS та UI:
Server Actions у NextJS (React)
Створення форм
Верстка з використанням ShadCn UI
Взаємодія з базою даних:
Створення нових записів
Видобуття даних
Тестування
Рефакторинг коду:
Уніфікація файлів
Вилучення даних із БД на сторінку:
Створення нової сторінки
Вилучення даних із БД
Автоматичне оновлення сторінки
Видалення даних із БД:
Функціонал по видаленню даних із БД
Динамічні Routes у NextJS:
Динамічні Routes
Використання <Link/> у NextJS
Інтеграція між двома моделями:
Створення записів з інтеграцією даних
Відображення даних із БД
Видалення записів
Відкрийте для себе світ Full-stack FE Development з нашим курсом. Приєднуйтеся вже сьогодні та рушайте шляхом до високоякісної веб-розробки!
Who Should Attend!
- Junior/Middle Front-end Full-stack розробник.