Введение
В этом руководстве показано, как установить Next.js в сочетании с TailwindCSS для создания начальной настройки для различных frontend-проектов.
Next.js — это фронтенд-фреймворк на ReactJS, предлагающий множество полезных функций. Он не только может выступать в роли генератора статических сайтов, но и поддерживает продвинутые стратегии извлечения данных из различных источников для отображения динамического контента.
TailwindCSS — это CSS-фреймворк, использующий функциональный подход к назначению имён CSS-классов. Это эффективный способ создания современных макетов и дизайнов, не беспокоясь о соглашениях об именовании.
Предпосылки
- Система с MacOS, Windows или Linux
- Установлены последние версии Node.js и npm.
Шаг 1 — Установка Next.js
Вы можете установить Next.js автоматически или вручную.
- Автоматически:
npx create-next-app my-project [--use-npm]
- Вручную:
mkdir ~/my-project && cd ~/my-project
npm install next react react-domПосле установки Next.js отредактируйте новый файл ~/my-project/package.json и добавьте раздел “script”, как показано здесь:
{
"dependencies": {
<your_dependencies>
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}Шаг 2 — Установка TailwindCSS
TailwindCSS использует PostCSS в качестве препроцессора и AutoPrefix в качестве дополнительных зависимостей. Это необязательно, но рекомендуется, поскольку Tailwind предлагает ряд полезных функций при использовании этих плагинов, например, использование нестандартных ключевых слов, таких как @apply, @theme или theme(), которые можно использовать в нашем CSS-файле.
cd ~/my-project
npm install -D tailwindcss postcss autoprefixerПосле этого мы можем создать файл конфигурации для TailwindCSS:
npx tailwindcss init -p
Это создаст tailwind.config.js и postcss.config.js.
Шаг 3 — Настройка Next.js
Чтобы определить маршруты для нашего приложения, мы можем просто добавить дополнительные файлы JavaScript в каталог приложения. В этом руководстве мы сосредоточимся на страницах, которые не генерируются динамически. Это связано с тем, что во многих случаях необходимо генерировать маршруты с использованием динамических данных, например, создавать маршруты на основе идентификатора. Вы можете найти отличное руководство о том, как это сделать, в документации Next.js (убедитесь, что в меню выбран пункт «Использовать маршрутизатор приложения»).
Добавить страницы
Для создания страниц вам понадобится подкаталог app. Внутри него вам понадобятся два файла:
| Файл | Описание |
|---|---|
| приложение/layout.tsx | Этот файл содержит информацию о макете, который автоматически применяется ко всем страницам, включая главную страницу и все подстраницы. |
| приложение/страница.tsx | Здесь находится содержимое главной страницы. |
Кроме того, вы можете добавить любое количество подкаталогов. Каждый подкаталог с файлом page.tsx представляет собой подстраницу вашего приложения.
В этом уроке мы будем использовать следующий пример:
app/
├── layout.tsx # layout of main page and all subpages
├── page.tsx # content main page
└── example-subpage/
├── layout.tsx # additional layout requirements for example-subpage
└── page.tsx # content example-subpageВ этом примере мы имеем две страницы:
http://<ip-address>:3000 # main page
http://<ip-address>:3000/example-subpage # subpageЕсли вы установили Next.js вручную, создайте каталог файлов приложения:
mkdir ~/my-project/app
Теперь вы можете добавлять контент на свои страницы:
- Домашняя страница
nano ~/my-project/app/page.tsx
Используйте этот контент для домашней страницы:
// ~/my-project/app/page.tsx
export default function Page() {
return <h1 className="text-white text-3xl font-bold pl-5">Welcome to Next.js and TailwindCSS</h1>
}- Подстраница
Добавьте новый подкаталог для подстраницы и создайте page.tsx:
mkdir ~/my-project/app/example-subpage
nano ~/my-project/app/example-subpage/page.tsxИспользуйте этот контент для подстраницы:
// ~/my-project/app/example-subpage/page.tsx
export default function Page () {
return (
<>
<div className="flex flex-col place-content-center items-center col-span-1 pr-3">
<div className="border-2 rounded-full p-0.5 border-gray-600 mb-2">
<img
className="rounded-full w-100 h-100"
src="https://picsum.photos/100/100"
alt="random image from unsplash"
/>
</div>
</div>
<div className="col-span-5 pr-3">
<h2 className="text-white text-3xl font-semibold pl-4 mb-3">Welcome to Next.js and TailwindCSS</h2>
<span className="text-gray-500 text-lg font-bold block pl-4 mb-3">Bringing both frameworks together</span>
<p className="text-white pl-4 leading-7">
Cats are believed to be the only mammals who don't taste sweetness. Cats are nearsighted, but their peripheral
vision and night vision are much better than that of humans. Cats are supposed to have 18 toes (five toes on
each front paw; four toes on each back paw). Cats can jump up to six times their length.
</p>
</div>
</>
)
}Добавить макет (TailwindCSS)
Теперь, когда у нас есть содержимое наших страниц, мы можем добавить макет, в котором страницы должны отображаться.
- Общий макет домашней страницы и всех подстраниц
Как упоминалось ранее, макет, определенный в app/layout.js, автоматически применяется к главной странице и всем подстраницам.
Выберите один из этих двух вариантов, чтобы включить TailwindCSS:
- Альтернатива 1: через JavaScript
Это удобный способ добавить TailwindCSS без необходимости написания дополнительных таблиц стилей.
nano ~/my-project/app/layout.tsx
Используйте этот контент:
// ~/my-project/app/layout.tsx
import 'tailwindcss/tailwind.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<html lang="en">
<head>
<title>Next.js and TailwindCSS</title>
<link rel="icon" href="/favicon.ico"/>
</head>
<body className="min-h-screen bg-gradient-to-tr from-midnight-100 via-midnight-200 to-midnight-300 flex flex-col justify-center">{children}</body>
</html>
</>
)
}- Альтернатива 2: через CSS
Другой вариант — добавить стили Tailwind с помощью CSS. Для этого мы импортируем глобальную таблицу стилей в файл app/layout.tsx.
Создайте app/layout.tsx:
nano ~/my-project/app/layout.tsx
Используйте этот контент:
// ~/my-project/app/layout.tsx
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<html lang="en">
<head>
<title>Next.js and TailwindCSS</title>
<link rel="icon" href="/favicon.ico"/>
</head>
<body className="min-h-screen bg-gradient-to-tr from-midnight-100 via-midnight-200 to-midnight-300 flex flex-col justify-center">{children}</body>
</html>
</>
)
}Создайте глобальный лист app/global.css:
/* ~/my-project/app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;К сожалению, Tailwind не предоставляет подробного объяснения того, что делает директива @tailwind, за исключением внедрения сгенерированных стилей (на основе конфигурации Tailwind) в таблицу стилей во время сборки.
- Пользовательский макет для подстраниц
Каждая подстраница имеет свой собственный файл макета. При необходимости создания дополнительных макетов вы можете сохранить их непосредственно в файле макета подстраницы или сохранить в отдельном каталоге и импортировать в файл макета подстраницы. Сохранение дополнительных спецификаций макета в отдельном каталоге упрощает повторное использование макета на нескольких подстраницах. Поэтому это имеет смысл, если вам нужен один и тот же макет для нескольких подстраниц.
Создайте каталог для дополнительных макетов:
mkdir ~/my-project/components
Создать дополнительный макет:
nano ~/my-project/components/FancyCard.jsДобавить этот контент:
// ~/my-project/components/FancyCard.js
'use client'
import React from 'react'
const FancyCard = ({ children }) => {
return (
<div className="max-w-xl mx-auto">
<div className="p-8 bg-midnight-200 shadow-xl rounded-3xl border-4 border-gray-600">
<div className="grid grid-cols-6 gap-0 divide-x divide-gray-600">
{children}
</div>
</div>
</div>
)
}
export default FancyCardТеперь создайте файл layout.tsx для вашей подстраницы и примените дополнительные спецификации макета:
nano ~/my-project/app/example-subpage/layout.tsx
// ~/my-project/app/example-subpage/layout.tsx
import FancyCard from '../../components/FancyCard'
export default function Layout({ children }) {
return <FancyCard>{children}</FancyCard>
}Как упоминалось ранее, вы можете добавлять дополнительные макеты к компонентам по мере необходимости и включать их в файл layout.tsx каждой подстраницы, которая должна использовать этот макет, как показано выше. Если вы планируете использовать макет только один раз, вы можете добавить его непосредственно в файл layout.tsx этой подстраницы.
Шаг 4 — Настройка TailwindCSS
Последний шаг — настройка файлов конфигурации для Tailwind и PostCSS.
Запустив npx tailwindcss init -p, мы уже создали два файла конфигурации:
- tailwind.config.js
- postcss.config.js
Если мы хотим использовать PostCSS в качестве препроцессора, мы можем использовать postcss.config.js для дополнительных функций, таких как добавление вендорных префиксов, добавление глобальных сбросов CSS или создание правил @font-face.
Ещё одна замечательная функция TailwindCSS — лёгкая настройка темы по умолчанию. Изменяя свойство темы в файле tailwind.config.js, можно настроить её, например, точки останова, цвета, шрифты или более детальные параметры, такие как интервалы, радиус скругления границ или тени. Изменяя цветовой ключ, можно добавить собственную цветовую палитру к существующей теме:
nano ~/my-project/tailwind.config.js
Добавьте следующий контент:
// ~/my-project/tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
colors: {
...defaultTheme.colors,
'white': '#ffffff',
'black': '#242424',
'midnight': {
'100': '#03060a',
'200': '#001a40',
'300': '#060b17',
// add more color variants if you want to
},
'gray': {
'500': '#6b7280',
'600': '#4b5563',
},
'purple': {
'500': '#6d28d9',
},
// add more colors if you want to
},
},
plugins: [],
}Кроме того, мы расширяем цветовую схему по умолчанию, чтобы по-прежнему использовать цветовую палитру Tailwind по умолчанию. Обратите внимание, что теперь мы можем применять собственные цвета к нескольким классам приложений, используя заданный цвет и его соответствующий вариант, bg-{color}-{variant}. Например:
<div className="bg-midnight-300">
...
</div>Шаг 5 — Запустите приложение
Теперь, когда все настроено, мы можем запустить программу и увидеть результат:
- Для доступа через частный IP (localhost):
npm run dev- Для доступа через публичный IP:
npm run dev -- -H 0.0.0.0
Откройте обе страницы в веб-браузере:
http://<ip-address>:3000http
://<ip-address>:3000/example-subpageЭто должно выглядеть так:
Результат
Мы успешно запустили приложение Next.js, использующее Tailwind в качестве CSS-фреймворка.
Первое использование CSS-фреймворков вызывает много споров, и, как обычно, универсального правила не существует. Некоторые утверждают, что это запутанно и трудночитаемо, что это ничем не отличается от встроенных стилей или что это нарушает разделение ответственности. Лично я считаю, что все эти пункты можно оспорить, и рекомендую следующие две статьи, чтобы ознакомиться с обеими точками зрения. Так вы поймёте, подходит ли этот фреймворк для вашего следующего проекта.
