Carsofix — это мультиязычный сайт премиального автодилера, предназначенный для демонстрации автопарка и привлечения квалифицированных лидов от международных покупателей. Платформа обслуживает автодилера высокого класса, ориентированного на клиентов из восьми европейских и североамериканских рынков, с полной локализацией на английском, испанском, немецком, французском, итальянском, португальском, нидерландском и русском языках. Построена на Next.js 15 с серверным рендерингом для оптимальной SEO-производительности. Платформа включает динамический каталог автомобилей с расширенной фильтрацией, детализированные страницы автомобилей с фотогалереями и оптимизированный контактный поток, рассчитанный на конверсию посетителей в квалифицированных лидов. Мультиязычная архитектура работает на next-intl с маршрутным определением локали, обеспечивая каждой языковой версии собственную чистую URL-структуру для максимальной видимости в поисковых системах.
!Задача
Автодилер работал на конкурентном рынке премиальных автомобилей, где онлайн-присутствие напрямую влияет на продажи. Существующее веб-присутствие представляло собой базовый одностраничный сайт на одном языке, который не мог захватить значительный трансграничный спрос от покупателей из соседних европейских стран. Покупатели премиальных автомобилей часто ищут на родном языке, и дилер без локализованного контента фактически невидим для этих ценных потенциальных клиентов. Основная задача состояла в создании платформы, способной обслуживать восемь различных рынков с правильно локализованным контентом — не просто переведёнными элементами интерфейса, а культурно подходящими описаниями автомобилей, правильно отформатированными ценами и актуальной для региона контактной информацией. Каждая языковая версия должна была быть полностью индексируемой поисковыми системами с корректными тегами hreflang, URL с префиксом локали и локализованными метаданными, чтобы сайт ранжировался органически на каждом целевом рынке. Производительность была критична. Покупатели премиальных автомобилей ожидают быстрого, отполированного опыта просмотра, отражающего качество продаваемых автомобилей. Сайт должен был загружаться менее чем за 2 секунды, отображать фотографии высокого разрешения без ущерба для скорости и обеспечивать плавные взаимодействия фильтрации, ощущающиеся мгновенными даже при больших каталогах. Дилеру также требовалась возможность управлять ассортиментом самостоятельно через административный интерфейс без привлечения разработчиков для рутинных обновлений.
Наш подход
Мы выбрали Next.js 15 с App Router за его превосходные возможности серверного рендеринга и встроенную оптимизацию изображений, обеспечивающие быструю загрузку каждой страницы и полный пре-рендеринг для поисковых роботов. Это даёт сайту значительное SEO-преимущество перед альтернативами с клиентским рендерингом.
Уровень интернационализации был построен на next-intl с маршрутным определением локали (например, /en/vehicles, /de/fahrzeuge), обеспечивая каждой языковой версии собственную URL-структуру. Мы реализовали корректные теги hreflang и локале-специфичные метаданные для каждого из 8 поддерживаемых языков.
Каталог автомобилей был спроектирован с фасетным поисковым интерфейсом, поддерживающим фильтры по марке, модели, диапазону годов, диапазону цен, пробегу, типу топлива и типу кузова. Вся фильтрация происходит на клиенте для мгновенной отзывчивости, при этом полный каталог предзагружается через серверный рендеринг при первой загрузке страницы.
Страницы деталей автомобиля включают адаптивные фотогалереи с ленивой загрузкой изображений высокого разрешения, оптимизированных через компонент Next.js Image с автоматической конвертацией в WebP и адаптивным размером. Каждая страница автомобиля содержит разметку структурированных данных (JSON-LD) для расширенных результатов поиска.
Была создана админ-панель для управления ассортиментом, позволяющая дилеру добавлять, редактировать и удалять автомобили с загрузкой фото, обновлением цен и управлением описаниями на нескольких языках — всё без помощи разработчиков.
Решение
Мультиязычная SEO-архитектура
Каждая страница сайта существует в восьми языковых версиях с чистыми URL с префиксом локали. Интеграция next-intl обрабатывает не только перевод интерфейса, но и динамический контент, такой как описания автомобилей, которые хранятся по локалям в базе данных. Каждая страница включает корректные теги hreflang, указывающие на все альтернативные языковые версии, динамически генерируемую карту сайта со всеми вариантами локалей и локале-специфичные метаданные Open Graph. Этот комплексный подход гарантирует, что Google правильно индексирует и показывает корректную языковую версию пользователям на каждом рынке.
Каталог автомобилей и поиск
Интерфейс каталога представляет автомобили в адаптивной сетке с крупными главными изображениями, ключевыми характеристиками и ценой на видном месте. Закреплённый боковой фильтр позволяет пользователям сужать результаты по марке, модели, году, диапазону цен, типу топлива и типу кузова с мгновенной клиентской фильтрацией. Весь набор данных об автомобилях предварительно рендерится на сервере при первой загрузке страницы, что делает фильтры мгновенными без спиннеров загрузки или API-запросов. Каждая комбинация фильтров формирует уникальный URL, который можно сохранить в закладки и поделиться, дополнительно усиливая SEO за счёт создания индексируемых отфильтрованных представлений для длиннохвостовых поисковых запросов.
Страницы деталей автомобиля
Индивидуальные страницы автомобилей демонстрируют автомобиль с полноширинной галереей-героем, вкладками с разделами характеристик и заметно размещённой контактной формой. Фотогалерея поддерживает жесты касания на мобильных устройствах и навигацию с клавиатуры на десктопе, с ленивой загрузкой изображений высокого разрешения в формате WebP через оптимизацию Next.js Image. Структурированные данные (схема Vehicle в JSON-LD) встроены в каждую страницу деталей, обеспечивая расширенные результаты поиска с ценой, наличием и характеристиками автомобиля непосредственно в поисковой выдаче Google.
Производительность и дизайн
Сайт стабильно достигает высоких показателей Core Web Vitals благодаря агрессивной оптимизации: серверный рендеринг устраняет сдвиг макета, Next.js Image обрабатывает адаптивный размер и конвертацию формата, Tailwind CSS генерирует минимальные CSS-бандлы, а статическая генерация используется для редко меняющихся страниц. Визуальный дизайн использует элегантную тёмную тему с тщательно подобранной типографикой и обильными отступами, транслирующими премиальное позиционирование автосалона. Каждое взаимодействие — от анимации фильтров до переходов галереи — плавное и отточенное, соответствуя ожиданиям покупателей премиальных автомобилей.
Результаты и влияние
Технологический стек
Next.js 15
React-фреймворк с App Router и SSR
PostgreSQL
База данных ассортимента автомобилей и контента
Tailwind CSS
Утилитарная стилизация с тёмной темой
next-intl
Интернационализация на 8 языков
Next.js Image
Автоматическая оптимизация изображений и конвертация в WebP
JSON-LD
Структурированные данные для расширенных результатов поиска
Vercel
Edge-деплой с глобальным CDN