DevUnit Lab: многоязычный сайт студии на Nuxt 4

Задача

Прежний сайт студии был одной длинной страницей: у направлений и кейсов не было собственных адресов, а значит и собственных запросов в поиске. Нужен был сайт, где у каждого направления своя страница, у каждого кейса свой адрес, есть английская версия и справочник терминов для заказчиков, далёких от IT.

Дополнительные условия:

• контент правится текстовыми файлами в git, без админки и без базы данных;
• заказчики под NDA обезличены, собственные продукты названы своими именами;
• прайсы включаются одним флагом, когда будут составлены;
• сайт быстро открывается с телефона по ссылке из рекламы.

Решение

Многостраничный сайт на Nuxt 4 и Nuxt Content 3 с серверным рендером. Nuxt Content — модуль, который превращает markdown- и YAML-файлы в страницы сайта и проверяет их структуру по схеме, поэтому опечатка в поле не доедет до посетителя.

Что реализовано:

• Главная: заголовок, цифры, направления, крупные кейсы, этапы работы, стек по группам, общие вопросы и ответы, бриф.
• Страница каждого из пяти направлений: лид, стек, свои вопросы и ответы, кейсы направления. Список кейсов строится по полю direction, без ручных списков.
• Каталог кейсов с фильтром в адресе; страница кейса показывает статус, метку NDA или «собственный продукт», плитки результата, стек и связанные кейсы.
• Русская и английская версии с автоопределением языка и переключателем.
• Справочник из 52 IT-терминов на каждом языке; подсказки со ссылкой на справочник на значках технологий.
• Чат-виджет и бриф на главной.
• Светлая и тёмная темы, парящие блоки, свечение за курсором, появление блоков при прокрутке, нижняя панель навигации на телефоне.
• Яндекс.Метрика с целями и плашка cookie; включаются, только если задан номер счётчика.

Как это устроено

Контент в markdown вместо базы данных

Кейсы, направления, справочник и общие данные лежат в папке content/ как markdown, YAML и JSON. Схема полей описана на Zod и проверяется при запуске: у кейса обязательны подзаголовок, эмодзи и направление, статус выбирается из списка. Английская версия лежит в content/en/ под теми же именами файлов и с той же схемой.

Nuxt i18n и hreflang для двух языков

hreflang — подсказка поисковику, что у страницы есть версия на другом языке. Русский язык идёт без префикса, английский с /en. Модуль @nuxtjs/i18n выбирает язык по браузеру, запоминает выбор и подставляет lang и hreflang в заголовок каждой страницы. Русские и английские тексты хранятся в отдельных коллекциях контента.

Карта сайта и robots.txt серверными маршрутами

sitemap.xml и robots.txt собираются кодом из коллекций контента, поэтому новый кейс попадает в карту сайта сам, в обеих языковых версиях. Одна переменная окружения переключает стенд в режим «не индексировать»: тогда добавляются meta robots noindex и запрет в robots.txt.

Микроразметка JSON-LD для поиска и ИИ-ответов

JSON-LD — данные о странице в формате, который читают роботы: кто мы, какие вопросы разбираем, что означает термин. На главной стоят Organization и WebSite, у блоков вопросов и ответов FAQPage, у справочника DefinedTermSet.

Антиспам брифа без капчи

Бриф уходит на серверный маршрут /api/lead. Он отбрасывает заявки с заполненным скрытым полем, отправленные быстрее четырёх секунд после показа формы, с тремя и более ссылками в тексте, а четвёртую заявку за 10 минут с одного адреса отклоняет. Боту в ответ идёт «ok», чтобы не подсказывать, что именно не прошло. Счётчик заявок по адресу хранится в памяти процесса и сбрасывается при перезапуске контейнера.

Выкладка одним контейнером на сервер сайтов

Образ собирается локально, потому что на сервере сайтов не хватает памяти для сборки Nuxt, и заливается готовым командой docker save. Контейнер не публикует порт наружу: его видит только входной nginx через отдельную Docker-сеть. В контейнере задан часовой пояс Europe/Moscow, лимит памяти 512 МБ.

Результат

• С 29 сентября 2026 года сайт работает на основном домене, старый стенд переадресует на него.
• У каждого направления и каждого кейса свой адрес, у каждой страницы свои заголовок, описание и разметка.
• Сайт живёт без базы данных и админки: правка контента идёт через git.
• Справочник из 52 терминов доступен на русском и английском.
• Бриф защищён от ботов без капчи и без лишних шагов для посетителя.

Технологии: что и зачем

• Nuxt 4, Vue 3, TypeScript — серверный рендер страниц, чтобы поисковики видели готовый текст.
• Nuxt Content 3 — контент в markdown и YAML, проверка структуры по схеме Zod, запросы к коллекциям.
• @nuxtjs/i18n — русский и английский, определение языка, hreflang.
• Tailwind CSS 4 — вёрстка и собственные цвета оформления в одном месте.
• Docker — один контейнер на сервер сайтов с часовым поясом Europe/Moscow.
• Яндекс.Метрика — цели на клики по контактам, бриф и чат; подключается только при заданном номере счётчика, рядом показывается плашка cookie.

Статус

Версия 1.1.0 от 29 сентября 2026 года, в продакшене на devunit-lab.ru. В работе: прайсы составлены не все, поэтому блок «Стоимость» в разделах скрыт; настоящих скриншотов у кейсов нет, везде автоматические обложки. Автотестов в репозитории нет.

Предыдущая версия

Прежний сайт был набором статических страниц на чистых HTML, CSS и JavaScript со сборкой стилей Tailwind CSS 3. В него входили страница студии на русском и английском с брифом, чатом и справочником, англоязычный сайт для зарубежной аудитории и лендинг «Дверной ГОСТ» для установщика межкомнатных дверей. История шла по датам с 30 июля 2026 года, номеров версий не было. Сайт студии на русском и английском заменён версией на Nuxt; англоязычный сайт и лендинг описаны в репозитории как статические.