in9var

Привет! Сегодня покажу, как за несколько минут с помощью готовой библиотеки реализовать переключение между темной и светлой темой на сайте. Выбранная тема сохраняется в localStorage браузера и отлично работает на всех устройствах. Код данной статьи доступен в репозитории GitHub по ссылке. Вводим команду в консоль: npm i next-themes Данный пакет сильно упрощает реализацию переключения тем: он берет на себя все заботы о хранении выбранной темы и решает такие проблемы, как «вспышки» при обновлении страницы с выбранной темной темой...

В данной статье я подробно рассмотрю процесс размещения нашего лендинга на хостинге на примере хостинг-провайдера Jino. Это не реклама данного хостинга, у меня есть ряд претензий к его работе, но это обычный хостинг по доступной цене, который похож на сотни других. Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5...

Привет! Сегодня подключим счетчик Яндекс Метрики, я покажу метод, который использую для своих сайтов на Nextjs, он позволяет считывать посещения с разных роутов, это может вам пригодиться, если в свой лендинг вы решите добавить пару дополнительных страниц, лишним это уж точно не будет. Если готовы, тогда погнали! Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4...

Привет. Сегодня настроим значки favicon для разных браузеров и устройств. Также проведем небольшой рефакторинг предыдущего кода. Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5. Верстка секции About Часть 6. Верстка секции Gallery Часть 7. Верстка секции WhyUs Часть 8. Верстка секции Catalogue Часть 9. Верстка секции Map Часть 10...

Привет! Сегодня будет короткая статья про основные метаданные для нашего лендинга — это title, description и keywords, это минимальная SEO-настройка для сайта, которая обязательно должна быть. Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5. Верстка секции About Часть 6. Верстка секции Gallery Часть 7. Верстка секции WhyUs Часть 8...