Мощная CMS на Next.js 14, yaml, json-schema, mdx и git
Мой курс по FSD: https://paromovevg.ru/courses/fsd 🙂
Исходники: https://github.com/micro-course/core/...
Волшебный файлик: https://www.notion.so/3-c6f64936ce6d4...
Мой telegram канал: https://t.me/cleanfrontend
Это третье видео в серии, где я на ваших глазах разработаю продукт с нуля, до заработка первых денег. В этом видео мы:
Сделаем систему управления контентом на основе git github yaml и json-schema
Спроектируем модуль для загрузки парсинга и кэширования контента
Научимся динамически рендерить MDX в приложении Next.js
Полный стек проекта:
React, Next.js app router, FSD архитектура, postgresql, prisma, zod, @tanstack/react-query, react-hook-form, tailwindcss, shadcn/ui, next-auth, jest , @testing-library/react, playwright
00:00:00 - 1.1 Архитектура решения
00:04:27 - 1.2 Как меня поддержать
00:05:25 - 1.3 Структура репозиториев
00:07:55 - 1.4 json-shema курсов
00:12:36 - 1.5 структура контентного репозитория
00:16:57 - 1.6 json-shema уроков
00:26:19 - 1.7 Как тестировать схему
00:35:57 - 1.8 генератор типов
00:44:17 - 1.9 генератор id
00:49:03 - 1.10 Репозитории с контентом
00:55:37 - 2.1 Скачиваем схему в репозиторий
01:04:50 - 2.2 Рефакторинг courses-list
01:14:53 - 2.3 Загружаем yaml файлы
01:24:13 - 2.4 Парсим и валидируем yaml
01:36:20 - 2.5 Кешируем через react-query
01:47:48 - 2.6 Объединяем всё вместе
02:04:51 - 2.7 Включаем новые декораторы в next
02:11:09 - 2.8 Добавляем декоратор для логирования
02:30:59 - 2.9 Раздаём nginx локальный stagins-content
02:37:09 - 3 Настраиваем рендеринг mdx
