Привет! Сегодня я начинаю серию статей про создание лендинга с нуля с использованием фреймворка Nextjs 15 и библиотеки анимации Framer Motion.
В этих статьях я подробно опишу каждый шаг от настройки проекта до полноценного деплоя на хостинг.
Также мы подробно коснемся SEO-оптимизации проекта, настроим и оптимизируем изображения.
Часть 1. Подготовка и настройка проекта
Часть 2. Настройка конфигурации и установка необходимых библиотек
Часть 3. Создание CSS-переменных и верстка блока Header
Часть 4. Верстка секции Hero, создание компонента Button
Часть 5. Верстка секции About
Часть 6. Верстка секции Gallery
Часть 7. Верстка секции WhyUs
Часть 8. Верстка секции Catalogue
Часть 9. Верстка секции Map
Часть 10. Верстка секции Footer
Часть 11. Создание якорных ссылок, рефакторинг
Часть 12. Создание мобильного меню
Часть 13. Анимация секций при скролле
Часть 14. Установка метаданных
Часть 15. Настройка Favicon.ico
Часть 16. Настройка счетчика Яндекс Метрики
Часть 17. Публикуем проект на хостинге
Короче, будет интересно! Погнали!
Подготовка и настройка проекта
На данный момент весь проект я буду создавать на макбуке, чуть позже напишу статью про то, как сделать настройки на Windows.
Моя конфигурация железа и софта:
MacBook Pro: Apple M1 Pro
macOS: Sequoia
IDE: Visual Studio Code
Установка необходимых инструментов
VS Code — самая популярная IDE в мире, а еще она полностью бесплатна, в ней мы и будем писать код. Установить можно по этой ссылке.
Nodejs, npm - это для работы Nextjs и установки дополнительных библиотек.
Проверяем установленны ли они вообще с помощью терминала:
node -v
npm -v
Если терминал выдает версию, то всё ок и едем дальше, если нет, то устанавливаем по этой ссылке.
Если возникнут трудности, пишите в комменты, постараюсь написать гайд по их установке.
Создание нового проекта Next.js
Приступаем!
Начнем с создания нового проекта. Откройте терминал и введите команду.
ls
Вы получите список всех папок в корневой директории, если среди них нет папки vscode, то создайте ее командой.
mkdir vscode
Далее заходим в папку командой.
cd vscode
Можем приступать к установке проекта Nextjs, вводим команду.
npx create-next-app@latest
Инициализируем тем самым установку и настройку, далее отвечаем на все вопросы установщика, первый вопрос — это имя проекта.
What is your project named? › next-app
Создастся папка с именем, которое вы введете, в моем случае — next-app.
Следующий вопрос касается, будете ли вы использовать TypeScript, если никогда с ним не работали, ответьте — No.
? Would you like to use TypeScript? › No / Yes
Остальные ответы можете оставить по умолчанию — все Yes, кроме последнего — No.
После всех этих манипуляций вы увидите надпись Success!, что означает, что установка прошла успешно.
Первый запуск
Можно прям в терминале ввести команду «code next-app», которая подразумевает открытие указанной папки в VS Code, либо вручную перетащите папку с проектом на иконку редактора.
Macbook@In9var vscode % code next-app
Откроется окно с нашим проектом, в котором мы и будем работать.
Мы завершили первоначальную настройку проекта, уже сейчас вы можете открыть слева внизу вкладку NPM SCRIPTS и нажать кнопку run напротив пункта dev next dev --turbopack, тем самым запустите проект в режиме разработки и сможете открыть его в браузере по адресу http://localhost:3000
Откройте файл src -> app -> page.js и удалите весь код, вставьте следующий:
export default function Home() {
return (
<>
<h1>My first site</h1>
<p>This is the text for my initial website.</p>
</>
);
}
Сохраните изменения в файле (Command + S).
Вы моментально увидите изменения в браузере, благодаря уже настроенному хот-релоаду.
Расширения VS Code
На данный момент нам может пригодиться только расширение «Tailwind CSS IntelliSense» для удобной автоподстановки стилей Tailwind.
Tailwind CSS — это CSS-фреймворк. Он предоставляет набор готовых классов для стилизации отдельных свойств, он очень простой, и, поняв, как он работает, будете писать стили так же, как джедай машет мечом.
Найдите значок с кубиками — Extensions в интерфейсе редактора и напишите в поисковой строке — tailwind.
Нажмите кнопку install. На этом всё. Теперь вы сможете пользоваться автоподстановкой в коде.
На сегодня всё!
В следующей статье мы разберем структуру файлов и установим необходимые для разработки пакеты.
Не забудь подписаться на канал, а также заходи на мой блог blog.in9var.ru, а также можешь посетить мой основной сайт (кстати, полностью сделанный на NextJS) — in9var.ru.