Next.js с Нуля - полный курс для начинающих (2025)

Описание

🔥 Подписывайтесь на канал «Фреймворк на вырост». В канале рассказываем, как фреймворки помогают поднять ЗП на 40%
👉https://t.me/+z20rZgj_D8ZkYWMy

❤️🔥Программа «VUE-разработчик» от senior fronted-разработчика из Дании. Станьте одним из первых, кто получит доступ к новому обучению от Result.
👉https://resuni.ru/5LG79

🕊 Большое спасибо Руслану за этот урок
Его канал в ТГ:
👉https://t.me/salimov_it
Его Youtube канал:
👉 / @salimov-dev

В этом видео мы будем изучать фреймворк Next.js 15 на примере создания проекта "Рецепты татарской кухни" с применением современного стека технологий: HeroUI, Zustand, PostgreSQL, Prisma, Auth.js и Zod.
Пошагово разберем процесс разработки веб-приложения, включая инициализацию проекта, настройку структуры, файловый роутинг, серверные действия, middleware, создание страниц и многое другое
Работать с базой данных будем через Prisma, реализуем авторизацию и регистрацию с Auth.js, а интерфейс под это сделаем на HeroUI
Научимся тестировать проект через Postman и использовать pgAdmin
Будем хранить состояние авторизации и другую логику в Zustand
Решим огромную кучу проблем, пофиксим баги и получим разнообразный опыт
В финале перенесем БД в облачную Prisma Data platform и успешно задиплоим на Vercel!

Полный Frontend Roadmap: https://t.me/vladm/1043

🕊 Полезные Каналы:
Телеграм канал Владилена:
👉 https://t.me/vladm
Телеграм канал для начинающих в IT:
👉 https://t.me/result_jfd

00:00 Вступление
03:12 Инициализируем проект
08:03 Структура проекта Nextjs
15:11 Устанавливаем HeroUI
21:53 Работаем над Header
26:25 Разрабатываем меню
34:09 Страница not-found
35:12 Главный layout
40:35 Формы логина и реги
45:44 Модальные окна логина и реги
50:47 Ставим Prisma ORM
53:10 Подключаем БД
56:12 Prisma client
59:59 Регистрация
01:06:12 Подключаем Auth JS
01:20:21 Авторизация
01:21:07 Logout
01:23:10 Проверки при регистрации
01:27:01 useSession
01:30:45 useAuthStore на Zustand
01:36:59 Создание appLoader
01:38:38 Загрузка для кнопок
01:43:14 siteConfig.ts
01:46:32 route.js
01:48:54 Тестим через Postman
01:51:13 Страница About
01:56:22 Экранирование
02:01:37 Layout для страниц
02:02:17 Всё для Ingredients
02:36:59 Middleware
02:42:01 Делаем роутинг в папках
02:44:12 Всё для Recipes
03:16:17 Диплой на Vercel
03:32:13 Конец