Кейс · 16 / 16 ЖНИВ-АГРО

Інтернет-каталог сільгосптехніки ЖНИВ-АГРО на Next.js

Повна міграція каталогу жниварок, адаптерів і запчастин зі старого OpenCart на сучасний Next.js 16 з PostgreSQL, двомовністю UK/EN та кастомною адмін-панеллю.

Сайт ЖНИВ-АГРО — головна сторінка десктоп
01

Про продукт

ЖНИВ-АГРО з Кременчука понад 15 років виробляє та постачає сільгосптехніку. У каталозі кукурудзяні (ЖКУ/ЖСУ) і соняшникові жниварки, адаптери, ріпакові столи, транспортувальні візки та запчастини, сумісні з жатками John Greaves серій ЖК-80, ЖК-82 і ЖНС. Окремо компанія надає послуги металообробки: токарні, фрезерні, зварювальні роботи та різку.

Старий сайт працював на OpenCart і вже не відповідав ні обсягу каталогу, ні швидкісним вимогам. Artbrain розробив новий сайт-вітрину на Next.js 16 з PostgreSQL: ~219 товарів і ~471 фото перенесено зі старого сайту, додано двомовність UK/EN, інтерактивну карту клієнтів по Україні та кастомну CMS для самостійного керування контентом.

02

Завдання

Каталог із сотень позицій техніки та запчастин жив на застарілому OpenCart. Сайт повільно вантажився, ним було незручно керувати, а будь-яка зміна загрожувала просіданням у пошуку. Потрібен був сучасний сайт-вітрина: швидкий, з простим наповненням і без втрати трафіку, який компанія напрацювала за роки.

Ключові вимоги: перенести весь каталог і фото без втрат, зберегти старі URL через 301-редіректи, додати двомовність UK/EN і зробити кастомну адмінку приблизно на 30 розділів. Дизайн та інтерактив (слайдери, карта клієнтів, галереї) мали лишитися такими ж, як узгодили з клієнтом. Кошик не потрібен: конверсія йде через заявку на дзвінок і форму зворотного зв'язку.

03

Перегляд на десктопі

Каталог, категорія запчастин і сторінка «Про нас» з картою клієнтів. Натисніть на плитку, щоб збільшити.

Каталог — категорії
Категорія запчастин
Про компанію — карта клієнтів
04

Перегляд на смартфоні

Ті самі сторінки на екрані 390 px: повністю адаптивна верстка, гамбургер-меню, оптимізовані зображення.

Головна
Каталог
Запчастини
Про компанію
05

Архітектурне рішення

Узгоджений дизайн зібрано на готовому шаблоні з великою кількістю jQuery-коду: слайдери, карта клієнтів і галереї там вмикаються вже після завантаження сторінки. Стандартний для Next.js підхід, коли сторінку після завантаження додатково обробляє React, конфліктував із цим кодом і ламав верстку. Переписувати весь шаблон було довго й дорого, тому ми пішли іншим шляхом і розділили сайт на два контури.

Публічна частина сайту складається зі швидких сторінок-вітрин. Вони формуються одразу на сервері: дані беруться з бази й віддаються браузеру вже готовим HTML, без додаткової обробки в React. Завдяки цьому дизайн і всі плагіни працюють так, як замислено, а сторінки відкриваються миттєво. Адмінку зробили навпаки, повноцінним React-застосунком, бо там жива інтерактивність дійсно потрібна. Так кожна частина сайту працює тим способом, який їй підходить.

06

Технологічний стек

CMS

Кастомна Next.js-адмінка (React)

Backend

Next.js 16 (App Router), PostgreSQL 17, Prisma ORM

Frontend

React 19, TypeScript, Swiper, Leaflet

Інтеграції

Форма лідів, Viber/WhatsApp/Telegram, карта клієнтів, 301-редіректи

07

Що зроблено

Вітрина-каталог, який швидко працює, легко наповнюється через адмінку і зберігає весь накопичений SEO-трафік.

Каталог з категоріями

Кукурудзяні та соняшникові жниварки, адаптери, ріпакові столи, транспортувальні візки й запчастини, згруповані у вкладені категорії, із пошуком по всьому каталогу.

Детальна картка товару

Фото-галерея з лайтбоксом, технічні характеристики, сумісність із жатками John Greaves (серії ЖК-80, ЖК-82, ЖНС), ціна та відео товару.

Кастомна CMS (~30 розділів)

Повноцінна адмінка: товари, категорії, зображення, блог і сторінки (редактор TipTap), блоки головної, меню, футер, маркери карти, ліди зі статусами та користувачі з ролями.

«Замовити дзвінок» + ліди

Вітрина-каталог без кошика: відвідувач залишає заявку на дзвінок або заповнює форму зворотного зв'язку. Кожне звернення стає лідом в адмінці зі своїм статусом.

Двомовність UK/EN

Окрема таблиця перекладів (locale, model, field) із fallback на українську, hreflang-теги та повноцінне SEO-meta обома мовами.

SEO-міграція з OpenCart

Близько 219 товарів і 471 фото перенесено парсингом зі старого сайту на OpenCart. Усі старі URL збережено через 301-редіректи, тому індексація й трафік не втрачені.

08

Підсумок

Новий сайт zhnivagro.com.ua працює на Next.js 16 і PostgreSQL замість старого OpenCart. Каталог із ~219 товарів і ~471 фото перенесено повністю, усі старі адреси закрито 301-редіректами, тож пошукова індексація й позиції збереглися. Сайт двомовний (UK/EN), має пошук по каталогу, картки товарів із характеристиками й сумісністю, блог, FAQ та інтерактивну карту клієнтів по Україні.

Команда ЖНИВ-АГРО самостійно керує каталогом, блогом, головною сторінкою та заявками через кастомну адмінку приблизно з 30 розділів. Заявки з форм «Замовити дзвінок» збираються як ліди зі статусами. Окремо попрацювали над швидкістю: стилі шаблону зменшили з 585 КБ до 64 КБ, а важку карту винесли в ліниве завантаження, тому сторінки відкриваються швидко навіть на телефоні.

09

Часті запитання

Сайт працює на Next.js 16 (App Router) з React 19 та TypeScript, базою даних PostgreSQL 17 і ORM Prisma. Публічні сторінки віддаються як серверний HTML для максимальної швидкості, а адмінку зроблено як повноцінний React-застосунок.

Близько 219 товарів і 471 фото перенесено парсингом зі старого zhnivagro.com.ua на OpenCart. Усі попередні URL залишаються робочими через 301-редіректи, тож індексація, посилання й органічний трафік збережені.

Так. Це кастомна CMS приблизно з 30 розділів: товари, категорії, зображення, блог і статичні сторінки (редактор TipTap), блоки головної, навігація, футер, маркери карти клієнтів, ліди зі статусами та користувачі з ролями. Команда керує всім без розробника.

Дві: українська та англійська. Локалізація реалізована через окрему таблицю перекладів із fallback на українську та hreflang-теги для коректної індексації пошуковими системами.

Так, Artbrain розробляє сайти-каталоги та інтернет-магазини для виробників і постачальників на Next.js та Django, з кастомною адмінкою та SEO-міграцією зі старого сайту. Розкажіть про проект через форму або зв'яжіться напряму.

Почніть свій шлях до успіху

Маєте проект? Давайте реалізуємо його разом.

Потрібен схожий сайт-каталог на Next.js або Django, з кастомною адмінкою, локалізацією UK/EN та чистою SEO-міграцією зі старого сайту? Розкажіть про задачу, і ми повернемось протягом 4 робочих годин.

Всі кейси
— Також

Інші послуги

Калькулятор вартості →
— Журнал · інсайти

З нашого блогу

Усі статті →
Подзвонити Telegram Viber WhatsApp