В этой статье я покажу, как интегрировать Next JS с дизайном Ant. Так как Ant Design просто обновляет свою библиотеку до версии Antd 5, есть некоторые большие изменения, которые вам нужно записать. Я также расскажу шаг за шагом и упомяну, в чем разница между интеграцией Antd 4 и Antd 5.

Без дальнейших церемоний, давайте прыгать!

Установить следующий Js-проект

Для создания Next Js Project вам достаточно запустить команду, которая уже упоминалась в документации.

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

Это даст вам последнюю версию Next JS (в настоящее время, когда эта статья была опубликована, версия 13).

Добавление дизайна муравья

После создания проекта вам необходимо добавить Ant Design Lib, выполнив эту команду:

npm install antd
# or
yard add antd
# or
pnpm add antd

Это добавит Ant Design 5.0 (в настоящее время, когда эта статья была опубликована). После установки библиотеки обычно вам нужно добавить некоторый код, прежде чем можно будет использовать компоненты.

В Ant Design 4 вам нужно импортировать файл CSS в самый верх корневого файла, в нашем случае это файл _app.jsx.

import "antd/dist/antd.css";

Но в Ant Design 5 файл CSS больше не существует, а в обновлениях Ant Design 5 указано следующее:
Файлы CSS больше не включены в пакет. Поскольку CSS-in-JS поддерживает импорт по требованию, от исходногоantd/dist/antd.cssтакже отказались. Если вам нужно сбросить некоторые основные стили, импортируйтеantd/dist/reset.css.

Таким образом, при использовании Ant Design 5 этап импорта CSS больше не требуется, и вы можете просто использовать компонент сразу после его добавления в свои проекты.

Другая информация об обновлении Ant Design 5:

  • Удаляйте меньше и используйте CSS-in-JS для лучшей поддержки динамических тем. Нижний слой использует @ant-design/cssinjs в качестве решения.
  • Все файлы less удаляются, а переменные less больше не экспортируются.
  • Файлы CSS больше не включены в пакет. Поскольку CSS-in-JS поддерживает импорт по требованию, от оригинального antd/dist/antd.css тоже отказались. Если вам нужно сбросить некоторые основные стили, импортируйте antd/dist/reset.css.
  • Удалите переменные CSS и динамическую тему, построенную поверх них.
  • Удалите antd/es/locale, вы можете найти пакеты в antd/locale.
  • Замените встроенный Moment.js на Dayjs. Подробнее: Используйте пользовательскую библиотеку дат.
  • babel-plugin-import больше не поддерживается. Сам CSS-in-JS имеет возможность импортировать по запросу, и поддержка плагинов больше не требуется. Пользователи Umi могут удалять связанные конфигурации.
  • НЕ ПОДДЕРЖИВАЙТЕ браузер IE больше.