Привет! Сегодня продолжаю серию статей про создание лендинга с нуля с использованием фреймворка Nextjs 15 и библиотеки анимации Framer Motion.
В этой статье установим все необходимые пакеты для нашего лэндинга, настроим файлы конфигурации и закрепим всё это первым коммитом в Git. Погнали!
Часть 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. Публикуем проект на хостинге
Терминал в VS Code
Чтобы устанавливать необходимые пакеты нам необходимо получить доступ к терминалу, к счастью в VS Code есть встроенный терминал, вызываем его в верхнем меню Terminal -> New Terminal либо сочетанием клавиш ⌃Ctrl + ~ (для macOS)
Устанавливаем Motion
Данная библиотека необходима для анимаций секций нашего Лэндинга. Почитать про библиотеку можно по этой ссылке.
Устанавливаем, вызывая в терминале команду:
npm install motion
Пакет для оптимизации изображений
Данная библиотека необходима для автоматического преобразования наших фотографий в сжатый формат .webp, скорость работы сайта для нас в приоритете. Ссылка на пакет npm.
Ставим командой:
npm install next-image-export-optimizer
Не отходя от кассы, отредактируйте файл package.json.
Замените строку
"build": "next build",
На следующую:
"build": "next build && next-image-export-optimizer",
Это необходимо для того, чтобы во время сборки проекта была запущена оптимизация изображений.
Пакеты для работы Tailwind
Для полноценной работы Tailwind поставим несколько пакетов и настроим их.
npm i postcss postcss-import postcss-nesting autoprefixer -D
Установим стабильную и проверенную версию Tailwind 3.
npm install -D tailwindcss@3
Создайте в корне проекта файл postcss.config.js.
содержимое файла:
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': 'postcss-nesting',
tailwindcss: {},
autoprefixer: {},
},
};
Создайте в корне проекта файл tailwind.config.js.
содержимое файла:
const config = {
content: ['./src/app/**/*.{js,ts,jsx,tsx,mdx}', './src/**/*.{js,ts,jsx,tsx,mdx}', '!./node_modules'],
theme: {
extend: {
fontFamily: {
default: ['var(--font-inter)', 'sans-serif !important'],
accent: ['var(--font-inter)', 'sans-serif !important'],
},
},
},
plugins: [],
};
export default config;
Настройка конфигурации Nextjs 15
Отредактируйте содержание файла next.config.mjs.
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
output: 'export',
trailingSlash: true,
compiler: {
styledComponents: true,
},
images: {
loader: 'custom',
imageSizes: [320, 1280],
deviceSizes: [320, 1280],
},
transpilePackages: ['next-image-export-optimizer'],
env: {
nextImageExportOptimizer_imageFolderPath: '/public',
nextImageExportOptimizer_exportFolderPath: 'out',
nextImageExportOptimizer_quality: '75',
nextImageExportOptimizer_storePicturesInWEBP: 'true',
nextImageExportOptimizer_generateAndUseBlurImages: 'true',
},
pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
turbopack: {
resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.mjs', '.json'],
},
};
export default nextConfig;
В данных настройках мы переключили режим сборки проекта в режим экспорта статичных файлов, ниже настроили работу оптимизатора изображений, в дальнейшем мы вернемся к этому файлу, а пока скопируйте как есть.
Редактируем общую структуру
Откройте файл layout.js и замените содержимое на:
import { Inter } from 'next/font/google';
import './globals.css';
const inter = Inter({
subsets: ['cyrillic'],
weight: ['300', '400', '500', '600', '700'],
display: 'swap',
variable: '--font-inter',
});
export const metadata = {
title: 'Landing page',
description: 'Our description',
};
export default function RootLayout({ children }) {
return (
<html lang='ru' suppressHydrationWarning>
<body className={`${inter.variable} antialiased`}>{children}</body>
</html>
);
}
В файле layout.js мы задаем общую структуру (обертку) над всеми нашими файлами, в нем удобно подключать шрифты (в нашем случае мы будем использовать шрифт Inter), также здесь формируются метатеги типа заголовка и описания страницы.
Работаем со стилями
Отредактируйте файл globals.css
@import 'tailwindcss/base';
@import './styles/custom-base-styles.css';
@import 'tailwindcss/components';
@import './styles/custom-components.css';
@import 'tailwindcss/utilities';
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
html,
body {
position: relative;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
a {
text-decoration: none;
color: inherit;
}
* {
box-sizing: border-box;
}
Мы подключаем файлы настроек Tailwind, а чуть ниже сбрасываем дефолтные стили нашего сайта.
Создайте в директории app папку styles и поместите в нее файлы со следующим содержимым:
base-fonts.css
* {
* {
--font-default: var(--font-inter);
--font-accent: var(--font-inter);
}
* {
font-family: var(--font-inter);
}
}
custom-base-styles.css
@import './base-fonts.css';
@layer base {
}
custom-components.css
@layer components {
}
custom-utilities.css
пустой
В итоге ваша структура файлов должна выглядеть вот так:
Создаем "контрольную точку" в Git
Вызываем консоль и по очереди пишем команды.
git add .
Указываем, что хотим добавить все файлы.
git commit -m "First commit"
Создаём «контрольную копию» с названием «First commit».
Командой (git log) можно посмотреть историю коммитов.
Если у вас что-то из этого не получается, проверьте, установлен ли у вас Git на компьютер.
Проверяем наш проект
Делаем так же, как было написано в предыдущей статье, нажимаем dev, next, dev --turbopack, и если всё будет в порядке, вы увидите:
Можно открыть проект и убедиться в этом:
На сегодня всё!
Код данного урока доступен в репозитории GitHub по ссылке.
В следующей статье мы начнем работать с шаблоном и верстать наш проект.
Не забудь подписаться на канал, а также заходи на мой блог blog.in9var.ru, а также можешь посетить мой основной сайт — in9var.ru.