Создаем лендинг сайт с нуля: настройка проекта и next.config #2
Привет! Сегодня продолжаю серию статей про создание лендинга с нуля с использованием фреймворка Nextjs 15 и библиотеки анимации Framer Motion.
В этой статье установим все необходимые пакеты для нашего лэндинга, настроим файлы конфигурации и закрепим всё это первым коммитом в Git. Погнали!
Полезные ссылки:
- Шаблон лендинга, который мы будем делать, доступен в Figma по ссылке.
- Код данного урока доступен в репозитории GitHub по ссылке.
- Подписывайтесь на мой Дзен канал
Терминал в 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 по ссылке.
В следующей статье мы начнем работать с шаблоном и верстать наш проект.
На этом всё, добавляйте сайт в избранное, чтобы не пропустить новых статей, а также подписывайтесь на мой Дзен-канал – dzen.ru/in9var