В предыдущей теме мы разобрали, как использовать автолейаут и ограничения для создания «резиновых» компонентов. Однако в реальной разработке на Next.js наступает момент, когда простого растягивания недостаточно. Например, когда карточка товара на десктопе должна быть горизонтальной, а на мобильном устройстве — вертикальной. Для таких случаев мы используем более продвинутый инструмент.
Когда автолейаута мало
Если интерфейс должен не просто растягиваться, а радикально менять структуру, вам нужен брейкпоинт (breakpoint). Это точка ширины экрана, при переходе через которую компонент перестраивается.
В связке с Next.js мы создаем адаптивный вариант компонента. Это не просто копия макета, а специальное состояние мастера, которое хранит логику отображения для конкретного диапазона экранов.
Как показано на Схеме 1, адаптивность — это баланс: гибкость (Fluid) внутри одного экрана и смена структуры (Structural change) между ними.
Алгоритм создания адаптивного варианта
Чтобы разработчик не гадал, как реализовать ваш дизайн, используйте именование в стиле Tailwind CSS — это стандарт для современных Next.js проектов.
- Объедините в варианты: выделите компоненты и нажмите «Combine as variants».
- Назовите свойство: используйте имя
Breakpoint. - Задайте значения:
Sm(Small) — смартфоны (390px).Md(Medium) — планшеты (834px).Lg(Large) — десктопы (1440px).
Золотое правило синхронизации 🧩 Чтобы при переключении между мобильной и десктопной версиями текст и иконки не сбрасывались, названия слоев внутри всех вариантов должны быть идентичными. Если на десктопе слой называется
Title, а на мобилкеHeader_text, Figma «забудет» контент при смене брейкпоинта.
Почему системный подход лучше
| Параметр | Адаптивные варианты | Дублирование элементов |
|---|---|---|
| Именование | Понятное: Breakpoint=Sm/Lg | Хаотичное: Card_Mobile, Card_v2 |
| Передача в код | Готовые медиа-запросы | Ручной подбор параметров |
| Поддержка | Правим один раз — меняется везде | Риск забыть обновить один из дублей |
| Чистота | Компактная библиотека | «Мусор» из сотен лишних фреймов |
Логика Next.js в дизайне
Мы проектируем компоненты так, чтобы разработчик мог буквально скопировать параметры в код. Если вы изменили направление автолейаута с горизонтального на вертикальное в адаптивном варианте, в Next.js это превратится в простую смену CSS-класса.
На Схеме 2 показано, как компонент трансформируется при смене свойства.
Как видно на Схеме 2, варианты позволяют менять направление (Direction) автолейаута — то, что невозможно сделать обычным растягиванием.
Совет наставника
Не плодите варианты без нужды. Если задачу можно решить настройкой «Fill container», используйте её. Создавайте новый адаптивный вариант только тогда, когда меняется иерархия или взаимное расположение элементов.
Теперь наши компоненты готовы к любым экранам. В следующей теме мы заглянем «под капот» и узнаем, как разработчики видят ваши макеты через Dev Mode. Вы увидите, как этот режим ускоряет сборку проекта на Next.js в несколько раз.