Введение и подготовка проекта 0:00 Обсуждение получения и обработки данных на стороне Next.js. Рекомендация сайта для кода и материалов. Удаление ненужных файлов и папок.
Создание компонента шапки сайта 0:30 Создание новой папки "компонент" и компонента "хидер.js". Использование стандартного компонента React. Импорт и экспорт компонента.
Настройка шапки сайта 1:35 Импорт компонента "хидер" в основной шаблон. Добавление шапки сайта в HTML-шаблон. Добавление названия сайта и ссылок навигации.
Стилизация шапки сайта 3:07 Добавление стилей для шапки сайта. Настройка размера и положения ссылок навигации. Создание страницы "эбаут" и добавление текста.
Получение данных с внешнего сайта 5:33 Использование стороннего сайта для получения данных. Получение данных по URL-адресу. Создание функции для получения данных.
Обработка и вывод данных 7:12 Обработка данных с помощью функции "феч". Преобразование данных в формат JSON. Вывод данных в консоль и на экран.
Вывод всех записей 10:34 Переименование константы для удобства. Вывод всех записей на экран. Настройка отображения данных на странице.
Перебор элементов и вывод данных 10:52 Использование функции map для перебора элементов. Создание новой переменной element и вывод каждого элемента в теге div. Добавление ключа element.id к каждому div и класса name к каждому div. Вывод заголовка статьи element.title и описания статьи element.body.
Создание ссылки на детальную информацию 11:59 Проверка правильности названия элемента body. Создание ссылки на детальную информацию с использованием компонента link. Импорт компонента link и указание ссылки с добавлением id поста.
Вывод всех статей и стили 12:51 Вывод всех статей с заголовком, описанием и ссылкой на детальную информацию. Добавление стилей к классу post. Демонстрация вывода всех статей с сайта.
Заключение и оптимизация 13:41 Корректная обработка ссылок и вывод информации по URL. Оптимизация кода и наполнение сайта HTML-кодом. Завершение урока и призыв подписаться на канал и вступить в соцсети.
