Обмежений доступ для гостей
Вам доступно 3 уроки з цього курсу безкоштовно.
- • Коментарі доступні тільки авторизованим користувачам
- • Прогрес зберігається тільки 0:00
Next.js Docs: Galactic Pizza 🍕🚀
Модуль 1. Відкриваємо піцерію — налаштування Next.js проекту 🚀
Двері для клієнтів: налаштування роутингу та сторінка /docs
App Router, динамічні маршрути, catch-all segments
Космічний дизайн: підключення Tailwind CSS та базові стилі
Конфігурація Tailwind, кольорова палітра, типографіка
Модуль 2. Пишемо перші гайди — MDX для контенту 📝
Інструкція для новачків: налаштування MDX та перша сторінка документації
next-mdx-remote, компіляція MDX, frontmatter
Форматування тексту: стилізація заголовків, списків та цитат
Prose стилі, typography plugin, кастомні стилі
Рецепти з кодом: блоки коду з підсвіткою синтаксису
rehype-highlight, номери рядків, виділення коду
Картки монстрів-доставщиків: створення кастомних MDX компонентів
Callout, Card, Alert — переіспользувані компоненти
Модуль 3. Навігація по станції — Sidebar та структура 🧭
Карта станції: створення Sidebar навігації з деревом документів
Рекурсивний компонент, активний стан, іконки
Розділи документації: групування сторінок (Гайди, API, Планети)
Структура контенту, конфігурація навігації, ordering
Хлібні крихти: Breadcrumbs для орієнтації в документації
Генерація шляху, мікродані Schema.org, стилізація
Вперед-назад: кнопки навігації між сусідніми сторінками
Previous/Next links, логіка визначення сусідів
Модуль 4. Зоряний стиль — темна тема та адаптивність ✨
День і ніч: реалізація перемикача темної та світлої теми
next-themes, CSS змінні, збереження вибору
Мобільні клієнти: адаптивний дизайн для всіх пристроїв
Responsive breakpoints, mobile-first підхід
Бургер-меню: мобільна навігація з плавною анімацією
Slide-out menu, backdrop, body scroll lock
Зміст сторінки: автоматична генерація Table of Contents
Парсинг заголовків, scroll spy, плавна прокрутка
Модуль 5. Корисні фічі — інтерактивність документації 🛠️
Космічний пошук: реалізація повнотекстового пошуку
Індексація контенту, fuzzy search, FlexSearch
Cmd+K магія: модальне вікно пошуку з гарячими клавішами
Command palette, keyboard navigation, accessibility
Копіювання коду: кнопка Copy з анімацією підтвердження
Clipboard API, toast notification, UX feedback
Табуляція: компонент Tabs для прикладів на різних мовах
Controlled tabs, збереження вибору, синхронізація
Модуль 6. API Документація — технічний reference 🔌
Ендпоінти піцерії: створення сторінки API Reference
Структура API docs, HTTP методи, параметри
Приклади запитів: інтерактивні code snippets для API
cURL, JavaScript, Python приклади, копіювання
Типи відповідей: документування Response schemas
TypeScript інтерфейси, JSON приклади, статус коди
Інтерактивний API: блок 'Try it out' для тестування
API playground, live запити, відображення response
Модуль 7. Версії меню — версіонування документації 📚
Нове меню: організація версій документації (v1.0, v2.0)
Структура папок, роутинг версій, latest redirect
Перемикач версій: dropdown для вибору версії документації
Version selector, banner застарілої версії, SEO
Модуль 8. Запуск на орбіту — production та деплой 🌍
Космічний SEO: meta теги, OpenGraph та структуровані дані
Dynamic metadata, og:image, JSON-LD schema
Карта сайту: автоматична генерація sitemap.xml
next-sitemap, robots.txt, індексація пошуковиками
404 — Чорна діра: кастомна сторінка помилки у космічному стилі
not-found.tsx, пошук схожих сторінок, анімація
Запуск ракети: деплой Galactic Pizza Docs на Vercel!
Production build, environment variables, domain
Модуль 9. Виправлення багів та покращення 🔧
Виправлення перезавантаження сторінки при навігації
CustomLink компонент, MDX components, клієнтська навігація
Фінальні штрихи: виправлення світлої теми
Семантичні кольори, адаптивний дизайн, foreground/background