Можно ли объединить Next.js + Ant Design + Tailwind CSS в одном проекте ?

В то время я хотел создать проект с Next.js и Ant Design, но я хотел настроить каждый компонент в дизайне ant, чтобы он соответствовал моему дизайну в Figma, потому что проект имеет 2 разных макета: Admin и Client. И я подумал, что Tailwind CSS может помочь мне создать собственный CSS, и тогда я начал спрашивать: «Можно ли объединить nextjs, ant.design и tailwindcss в одном проекте?»

Попробовав разные способы, я нашел способ совместить некоторые из вышеперечисленных технологий по-своему. И здесь я хочу поделиться, как использовать его для создания проектов, комбинируя некоторые из вышеперечисленных технологий. Для тех, кто не знаком с вышеперечисленными технологиями, Next.js — это фреймворк для React.js. Этот фреймворк может помочь вам создавать потрясающие проекты с помощью React. Вы можете увидеть этот фреймворк на официальном сайте Next.js. И затем Ant Design — это библиотека пользовательского интерфейса, которая содержит набор высококачественных компонентов и демонстраций для создания богатого и интерактивного пользовательского интерфейса, поэтому вы можете использовать ant.design, чтобы сделать пользовательский интерфейс более эффективным. И последний — Tailwind CSS, представляющий собой служебный CSS-фреймворк, с его помощью вы можете создать все, что захотите, и я рад использовать этот CSS-фреймворк, потому что вы можете писать служебный CSS, используя только служебные классы из Tailwind CSS.

Давайте сделаем этот проект!! 🚀

1. Создайте проект

Мы можем создать проект nextjs с помощью create-next-app, и мы будем использовать машинописный текст в этом проекте, поэтому добавьте — машинописный текст. Откройте терминал, скопируйте приведенный ниже код, вставьте его в свой терминал и введите.

npx create-next-app@latest nextjs-with-antd-tailwind --use-npm --typescript

2. Структура папок

После создания проекта откройте текстовый редактор, и это использование структуры папок в этом проекте.

и попробуйте запустить проект командой npm run dev. После того, как вы запустите npm run dev, вы можете открыть http://localhost:3000/ в своем браузере, и вы увидите там свое приложение.

3. Установите дизайн муравья

затем установите Ant Design в проект. Откройте терминал и напишите ниже код для установки Ant Design.

npm install antd

после успешной установки перезапишите код в pages/index.tsx компонентом из antd.

и не забудьте импортировать таблицу стилей из antd в pages/_app.tsx

import 'antd/dist/antd.css';

Хорошо, давайте проверим браузер на локальном хосте: 3000, вы должны успешно импортировать компонент кнопки.

Да !! мы успешно интегрировали nextjs с antd. Следующим шагом мы можем установить tailwindcss и сделать небольшую настройку для tailwindcss.

4. Установите TailwindCSS

На этом этапе мы можем следовать руководству по установке tailwindcss в nextjs с официального сайта tailwindcss. А вот и ссылка для установки, которую вы можете проверить. Сначала запустите команду в терминале, чтобы установить tailwindcss и необходимые одноранговые зависимости для tailwindcss.

npm install -D tailwindcss postcss autoprefixer

после успешной установки нам нужно запустить команду инициализации для создания tailwind.config.js и postcss.config.js.

npx tailwindcss init -p

из приведенной выше команды создайте 2 новых файла

а затем мы не будем менять postcss.config.js, но изменим код в tailwind.config.js, добавив собственную конфигурацию.

Хорошо, и нам нужно добавить директиву @tailwind для каждого слоя Tailwind в ваш файл styles/globals.css.

@tailwind base; 
@tailwind components; 
@tailwind utilities;

и не забудьте импортировать шрифт montserrat из Google Fonts, потому что мы добавили новое семейство шрифтов в tailwind.config.js, так что окончательный результат global .css примерно так.

после этого измените pages/index.tsx на приведенный ниже код, в этом коде мы пытаемся использовать служебный класс от tailwindcss к элементу стиля

запустите сервер разработки с npm run dev и увидите свой браузер по адресу localhost:3000, результат будет таким

на самом деле, мы успешно объединили antd и tailwindcss, но я переопределю стиль antd по умолчанию в некоторых компонентах, таких как Button, Input, Switch и т. д. Я собираюсь использовать sass для его сборки, поэтому нам нужно установить sass и настроить его в следующий.config.js. Давай сделаем это!!!

5. Установите Sass

Прежде чем вы сможете использовать встроенную поддержку Sass в Next.js, обязательно установите sass

npm install --save-dev sass

после этого мы настроим sass в next.config.js, добавив includePaths, чтобы указать конкретную папку, в которую мы поместили файл .scss.

это означает, что папка стилей — это место, куда мы помещаем все файлы .scss. Итак, нам нужно реструктурировать папку стилей и разделить код из global.css на несколько .scss файлов.

это структура папок, которую я сделал, вы можете проверить назначение каждой папки, такой как база, компоненты, поставщики, sass-utils по этой ссылке. И теперь вы можете удалить global.css, потому что его функцию можно заменить на style.scss.

в папке base нам нужно создать файл с именем _reset.scss и вставить стиль сброса (styles/base/_reset.scss)

затем в папке sass-utils создайте файл _fonts.scss и введите код для импорта шрифтов из Google fonts (styles/sass-utils/_fonts.scss)

_fonts.scss

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

В папке vendors создайте 2 файла с именами _antd.scss (styles/vendors/_antd.scss)и _tailwind.scss (styles/vendors/_tailwind.scss)

_antd.scss

@import '~antd/dist/antd.css';

_tailwind.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

Затем импортируйте все в style.scss.

после этого открываем pages/_app.tsx и можем удалить код

import '../styles/globals.css';
import 'antd/dist/antd.css';

и замените его на

import '../styles/style.scss';

и результат _app.tsx будет таким

и снова запустите сервер разработки с npm run dev и увидите свой браузер на локальном хосте: 3000, и проблем не должно быть.

Давайте настроим компоненты Antd с помощью Tailwindcss !!!

на этот раз я хочу сделать 4 компонента, а именно заголовок, кнопку, переключатель и модальный. Все компоненты, которые унаследованы от antd

Компонент заголовка

Создайте новую папку внутри папки с атомами с именем Title (эта папка является представлением компонента Title) и создайте 2 файла index.tsx и title.props.ts.

components/
|- atoms/
|   |- Title/
|   |   |- index.tsx
|   |   |- title.props.ts

title.props.ts

index.tsx

создайте новый файл с именем index.ts в атомах, все компоненты в этой папке будут экспортированы через этот файл

components/
|- atoms/
|   |- Title
|   |
|   |- index.ts

index.ts (components/atoms/index.ts)

import Title from './Title';
export { Title };

после этого снова создайте новый файл с именем index.tsx в соединении, используемом для экспорта всех файлов из атомов, молекул и организмов.

components/
|- atoms
|- moleculs
|- organisms
|- index.ts

index.ts

export * from './atoms'

Хорошо, затем перейдите в pages/index.tsx и импортируйте только что созданный компонент заголовка.

и результат

Далее мы попробуем создать компонент кнопки, и сделаем стилизацию в соответствии с нашими потребностями.

Компонент кнопки

Создайте новую папку внутри папки с атомами с именем Button (эта папка является представлением компонента Button) и создайте 2 файла index.tsx и button.props.ts.

components/
|- atoms/
|   |- Button/
|   |   |- index.tsx
|   |   |- button.props.ts
|   |
|   |- Title
|   |
|   |- index.ts

button.props.ts

index.tsx

затем откройте папку компонентов в стилях, затем создайте файл _button.tsx (styles/components/_button.tsx). Этот файл позже переопределит стиль кнопки из antd.

styles
|- ...
|- components/
|   |- _button.scss

_button.scss

после этого импортируйте _button.scss в styles/style.scss.

...
// components
@import './components/_button'

Вернувшись в папку с атомами, импортируйте Кнопку в файл index.tsx, который находится в папке с атомами.

import Title from './Title';
import Button from './Button';
export { Title, Button };

Затем давайте реорганизуем наш код, чтобы его можно было использовать повторно. Вы можете видеть в pages/index.tsx, что мы создали тег раздела и добавили в него заголовок, и похоже, что он используется снова и снова в качестве обертка, чтобы мы могли создать новый компонент в папке moleculs с именем SectionWrapper, чтобы его можно было многократно использовать, становится намного проще
Создайте новую папку внутри папки Moleculs с именем SectionWrapper и создайте файл index.tsx

components/
|- molecules/
|   |- SectionWrapper
|   |   - index.tsx

index.tsx

а затем создайте файл index.ts в папке молекулы(moleculs/index.ts) и импортируйте компоненты для экспорта.

components/
|- molecules/
|   |- SectionWrapper
|   |
|   |- index.ts

index.ts (components/moleculs/index.ts)

import SectionWrapper from './SectionWrapper';
export { SectionWrapper };

Затем мы создадим отдельный компонент для каждого раздела, например (SectionButton, SectionInput и т. д.). создайте папку внутри organisms с именем SectionButton и создайте файл index.tsx

components/
|- organisms/
|   |- SectionButton
|   |   - index.tsx

index.tsx

не забудьте создать файл index.ts в папке organisms(organisms/index.ts) и импортировать компоненты для экспорта

components/
|- organisms/
|   |- SectionButton
|   |
|   |- index.ts

index.ts (components/organisms/index.ts)

import SectionButton from './SectionButton';
export { SectionButton };

затем вызовите молекулы и организм в файл index.ts, который находится в папке components (components/index.ts)

export * from './atoms';
export * from './moleculs';
export * from './organisms';

вернитесь в папку pages, затем реорганизуйте pages/index.tsx, чтобы он стал таким

мы успешно создали компонент Button, и результат будет таким

Входной компонент

В этом разделе мы не создаем новые компоненты в атоме, такие как заголовок и кнопка, для ввода я попытаюсь напрямую заменить стиль на Sass.

Создайте новый файл в styles/component с именем _input.scss и _form.scss.

styles
|- ...
|- components/
|   |- _button.scss
|   |- _input.scss

_input.scss

_form.scss

после этого импортируйте _input.scss и _form.scss в styles/style.scss.

...
// components
@import './components/_button'
@import './components/_form';
@import './components/_input';

создайте компонент SectionInput в папке организмов и создайте файл index.tsx (organisms/SectionInput/index.tsx)

index.tsx

и не забудьте импортировать этот компонент в файл index.ts из папки organisms (components/organisms/index.tsx)

import SectionButton from './SectionButton';
import SectionInput from './SectionInput';
export { SectionButton, SectionInput };

вызовите компонент SectionInput в pages/index.tsx и поместите его в SectionButton

...
import { SectionButton, Title, SectionInput } from '../components';
const Home: NextPage = () => {
     return (
          <>
            ...
            <SectionButton />
            <SectionInput />
            ...        
          </>
     )
};

мы успешно переопределили стиль компонента ввода, и результат будет таким

Компонент переключения
Этот раздел такой же, как и предыдущий компонент (Ввод), мы не создаем новые компоненты в атоме, такие как заголовок и кнопка, я попытаюсь напрямую заменить стиль на sass

Создайте новый файл в styles/component с именем _switch.scss.

styles
|- ...
|- components/
|   |- _button.scss
|   |- _input.scss
|   |- _switch.scss

_switch.scss

после этого импортируйте _switch.scss в styles/style.scss

...
// components
@import './components/_button'
@import './components/_form';
@import './components/_input';
@import './components/_switch';

создайте компонент SectionSwitch в папке организмов и создайте файл index.tsx (organisms/SectionSwitch/index.tsx)

index.tsx

и не забудьте импортировать этот компонент в файл index.ts из папки с организмами

import SectionButton from './SectionButton';
import SectionInput from './SectionInput';
import SectionSwitch from './SectionSwitch';
export { SectionButton, SectionInput, SectionSwitch };

вызовите компонент SectionSwitch в pages/index.tsx и поместите его в SectionInput

...
import { SectionButton, Title, SectionInput, SectionSwitch } from '../components';
const Home: NextPage = () => {
     return (
          <>
            ...
            <SectionButton />
            <SectionInput />
            <SectionSwitch />
            ...        
          </>
     )
};

мы успешно переопределили стиль компонента переключателя, и результат будет таким

Заключение

Мы можем собрать проект, комбинируя antd и tailwindcss, но нам нужен Sass, чтобы заменить стили из antd на tailwindcss. Для модальных компонентов вы можете проверить мой репозиторий на github, вы можете перейти по ссылке ниже.

GitHub — CandraJengger/nextjs-antd-tailwind: этот проект создан путем объединения nextjs, antd и…
этот проект создан путем объединения nextjs, antd и tailwindcss, целью которого является упростите создание проекта, который вы…github.com

Спасибо, что прочитали… ^_^

Можно ли объединить Next.js + Ant Design + Tailwind CSS в одном проекте ?

Давайте сделаем этот проект!! 🚀

1. Создайте проект

2. Структура папок

3. Установите дизайн муравья

5. Установите Sass

Давайте настроим компоненты Antd с помощью Tailwindcss !!!

Компонент заголовка

Компонент кнопки

Входной компонент

Заключение

Вопросы по теме