Создаем лендинг сайт с нуля: Next.js 15 + Framer Motion - пошаговая инструкция #1

Привет! Сегодня я начинаю серию статей про создание лендинга с нуля с использованием фреймворка Nextjs 15 и библиотеки анимации Framer Motion.

В этих статьях я подробно опишу каждый шаг от настройки проекта до полноценного деплоя на хостинг.

Также мы подробно коснемся SEO-оптимизации проекта, настроим и оптимизируем изображения.

Короче, будет интересно! Погнали!

Полезные ссылки:

• Шаблон лендинга, который мы будем делать, доступен в Figma по ссылке.
• Подписывайтесь на мой Дзен канал

Подготовка и настройка проекта

На данный момент весь проект я буду создавать на макбуке, чуть позже напишу статью про то, как сделать настройки на 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. На этом всё. Теперь вы сможете пользоваться автоподстановкой в коде.

На сегодня всё!

Шаблон лендинга, который мы делаем, доступен в Figma по ссылке.

В следующей статье мы разберем структуру файлов и установим необходимые для разработки пакеты.