При внедрении headless-коммерции на Medusa 2.x админ-панель часто становится узким местом: стандартные виджеты не покрывают специфику бизнеса, а самостоятельная кастомизация приводит к N+1 запросам и проблемам с рендерингом. В проекте с 3000 товаров мы столкнулись с задержками загрузки страницы заказов из-за неоптимизированных запросов — до 12 секунд. После настройки кастомных агрегаций и batch-запросов время сократилось до 1.5 секунд — в 8 раз быстрее. Такой подход мы применяем во всех проектах: от подключения Admin до деплоя production-сборки. Кастомный виджет окупается в среднем за 6 месяцев, а экономия времени ручного управления заказами достигает 70%, что для среднего магазина составляет около $14k–20k в год.
Мы настраиваем Medusa Admin Dashboard под вашу архитектуру: выбираем вариант подключения (встроенный или standalone), разрабатываем кастомные виджеты на React 18 и TypeScript, подключаем @medusajs/ui. Оптимизируем производительность — обеспечиваем LCP < 2.5 секунды и INP < 200 мс.
С какими проблемами сталкиваются при настройке Admin
- N+1 запросы — при загрузке списка сущностей с дополнительными данными легко создать лавину запросов. Оптимизируем через React Query и batch-запросы: в проекте с 2000+ товаров виджет статистики лояльности сократил время загрузки до 3 секунд.
- Hydration mismatch — если использовать SSR-фреймворки внутри Admin, возникает несоответствие данных. Admin — чисто клиентское приложение, поэтому все расширения должны быть безсерверными.
- Разделение Admin и бэкенда — многие пытаются запустить Admin в монолитном режиме, что приводит к конфликтам зависимостей. Правильная архитектура — отдельный сервер или standalone деплой.
Как мы это делаем: стек и подход
Используем React 18, TypeScript, @medusajs/ui для компонентов. В примере ниже — кастомный виджет, показывающий статистику лояльности на странице товара:
// src/admin/widgets/product-loyalty-stats.tsx import { defineWidgetConfig } from '@medusajs/admin-sdk'; import { Container, Heading, Text } from '@medusajs/ui'; import { useQuery } from '@tanstack/react-query'; import { sdk } from '../lib/sdk'; const ProductLoyaltyWidget = ({ data }: { data: { id: string } }) => { const { data: stats } = useQuery({ queryKey: ['loyalty-stats', data.id], queryFn: () => sdk.client.fetch(`/admin/products/${data.id}/loyalty-stats`), }); return ( <Container> <Heading level="h2">Лояльность</Heading> <Text>Начислено баллов: {stats?.total_points_given ?? '—'}</Text> <Text>Заказов с баллами: {stats?.orders_with_loyalty ?? '—'}</Text> </Container> ); }; export const config = defineWidgetConfig({ zone: 'product.details.after', }); export default ProductLoyaltyWidget; Также создаём кастомные страницы — например, для программы лояльности с DataTable, поиском и пагинацией.
Почему стоит кастомизировать админку?
Базовая админка Medusa покрывает стандартные потребности, но для уникальных бизнес-процессов требуется расширение. Кастомизация позволяет добавить аналитику по возвратам и отменам заказов, интегрировать CRM-виджет для быстрого доступа к данным клиента, управлять скидками и промокодами в едином интерфейсе. Если у вас специфические требования — пишите, мы предложим решение.
Как подключить Medusa Admin к вашему бэкенду?
Есть два подхода. Встроенный (рекомендуется для старта) — установка пакета @medusajs/dashboard и автоматическое подключение в medusa-config.ts. Standalone — отдельный проект, собирается в dist/ и деплоится на Vercel или Nginx. Выбираем вариант под ваш сценарий.
# Вариант 1: Встроенный в бэкенд (рекомендуется для старта) npm install @medusajs/dashboard # Вариант 2: Standalone деплой npx create-medusa-app@latest --no-boilerplate cd my-admin && npm install VITE_MEDUSA_BACKEND_URL=https://api.example.com npm run build | Параметр | Встроенный | Standalone |
|---|---|---|
| Установка | Одна команда | Отдельный проект |
| Разделение | Связан с бэкендом | Независимый деплой |
| Производительность | Дешевле в разработке | Выше гибкость |
Какие виджеты можно добавить в админку?
Любые: аналитика по заказам, управление скидками, интеграция с CRM, отчёты по возвратам. У нас есть опыт разработки виджетов для разных зон — детали товара, списки заказов, профиль клиента. Все расширения пишутся на React и автоматически подхватываются Admin.
// src/admin/routes/loyalty/page.tsx import { defineRouteConfig } from '@medusajs/admin-sdk'; import { GiftSolid } from '@medusajs/icons'; import { Container, DataTable, useDataTable } from '@medusajs/ui'; const LoyaltyPage = () => { const { table } = useDataTable({ /* config */ }); return ( <Container> <DataTable instance={table}> <DataTable.Toolbar> <DataTable.Search placeholder="Поиск клиентов..." /> </DataTable.Toolbar> <DataTable.Table /> <DataTable.Pagination /> </DataTable> </Container> ); }; export const config = defineRouteConfig({ label: 'Программа лояльности', icon: GiftSolid, }); export default LoyaltyPage; Пример зон виджетов:
| Зона виджета | Назначение | Пример |
|---|---|---|
| product.details.after | Дополнительная информация о товаре | Статистика лояльности |
| order.list.before | Фильтры или сводка | Кастомные фильтры по статусу |
| customer.details.sidebar | Боковая панель клиента | История заказов с бонусами |
Процесс работы
- Аналитика — изучаем текущий бэкенд, версию Medusa, список эндпоинтов.
- Проектирование — определяем необходимые виджеты и страницы.
- Разработка — пишем расширения, подключаем к админке.
- Тестирование — проверяем работу виджетов, производительность, отсутствие ошибок.
- Деплой — размещаем Admin на вашем хостинге или Vercel.
- Поддержка — передаём доступы, документацию, обучаем команду.
Что входит в работу
- Аудит текущей конфигурации и версии Medusa
- Настройка подключения (встроенный или standalone)
- Разработка кастомных виджетов и страниц
- Оптимизация производительности (Core Web Vitals)
- Документация и инструкция по деплою
- Обучение команды основам расширения Admin
- Поддержка в течение месяца после деплоя
Типичная ошибка: не настроен CORS. Если бэкенд не разрешает запросы с домена Admin, панель не загрузится. Пропишите в medusa-config.ts: cors: { origin: 'https://admin.yourdomain.com' }. Также проверьте переменную окружения VITE_MEDUSA_BACKEND_URL — она должна быть доступна на клиенте.
Medusa рекомендует standalone-деплой для production-среды. Подробнее — в официальной документации.
Сроки ориентировочно
- Базовая настройка + подключение к бэкенду: от 2 до 4 часов.
- Кастомные виджеты и страницы под бизнес-задачи: от 2 до 5 дней.
- Комплексная интеграция с несколькими сервисами: от 1 до 2 недель.
Стоимость рассчитывается индивидуально — зависит от сложности расширений и сроков. Закажите настройку Medusa Admin у нас — получите готовую админку с кастомными расширениями. Свяжитесь для консультации — поможем настроить Admin под ваши задачи.