Найти в Дзене
Создание лендинга на nextjs пошагово

Создание лендинга на nextjs пошагово

Разработка веб-сайта с нуля в формате лендинга с использованием nextjs 15.
подборка · 17 материалов
10 месяцев назад
Создать лендинг сайт с нуля: загружаем и публикуем проект на хостинге #17
В данной статье я подробно рассмотрю процесс размещения нашего лендинга на хостинге на примере хостинг-провайдера Jino. Это не реклама данного хостинга, у меня есть ряд претензий к его работе, но это обычный хостинг по доступной цене, который похож на сотни других. Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5...
10 месяцев назад
Создать лендинг сайт с нуля: подключить счетчик Яндекс Метрики #16
Привет! Сегодня подключим счетчик Яндекс Метрики, я покажу метод, который использую для своих сайтов на Nextjs, он позволяет считывать посещения с разных роутов, это может вам пригодиться, если в свой лендинг вы решите добавить пару дополнительных страниц, лишним это уж точно не будет. Если готовы, тогда погнали! Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4...
10 месяцев назад
Создать лендинг сайт с нуля: настройка favicon.ico #15
Привет. Сегодня настроим значки favicon для разных браузеров и устройств. Также проведем небольшой рефакторинг предыдущего кода. Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5. Верстка секции About Часть 6. Верстка секции Gallery Часть 7. Верстка секции WhyUs Часть 8. Верстка секции Catalogue Часть 9. Верстка секции Map Часть 10...
10 месяцев назад
Создаем крутой лендинг сайт с нуля: метаданные title description #14
Привет! Сегодня будет короткая статья про основные метаданные для нашего лендинга — это title, description и keywords, это минимальная SEO-настройка для сайта, которая обязательно должна быть. Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5. Верстка секции About Часть 6. Верстка секции Gallery Часть 7. Верстка секции WhyUs Часть 8...
10 месяцев назад
Создаем крутой лендинг сайт с нуля: framer-motion анимация скролла #13
Сегодня реализуем анимацию появления секций при скролле лендинга с помощью библиотеки анимаций framer-motion. Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5. Верстка секции About Часть 6. Верстка секции Gallery Часть 7. Верстка секции WhyUs Часть 8. Верстка секции Catalogue Часть 9. Верстка секции Map Часть 10...
10 месяцев назад
Создаем крутой лендинг сайт с нуля: анимированное burger меню #12
Привет! Сегодня сделаем мобильное анимированное меню для нашего лендинга, применим библиотеку framer-motion (motion) для красивого эффекта открытия. Будет интересно, погнали! Полезные ссылки: Часть 1. Подготовка и настройка проекта Часть 2. Настройка конфигурации и установка необходимых библиотек Часть 3. Создание CSS-переменных и верстка блока Header Часть 4. Верстка секции Hero, создание компонента Button Часть 5. Верстка секции About Часть 6. Верстка секции Gallery Часть 7. Верстка секции WhyUs Часть 8...