Как я переводил личный сайт на английский: проблема навигации и культурных адаптаций

TL;DR

Переводил личный сайт на английский. Столкнулся с тем, что прямой перевод навигации «Я → Делаю → Проекты → Как → Надо» звучит глупо и не работает. Пришлось переосмыслить структуру: Me → Craft → Work → Way → Right. Статья — про процесс, решения и культурные различия в UX.

Почему вообще переводить

Личный сайт на русском работает отлично для локального рынка. Но:

1. Международные проекты — хочется быть доступным для англоязычных клиентов и партнёров.
2. Портфолио — большая часть индустрии говорит по-английски.
3. Опыт — интересно было попробовать локализацию на реальном продукте.

Решил добавить английскую версию, сохранив русскую как основную. Next.js 15 + middleware для роутинга по префиксу (/en/...).

Первая проблема: навигация не переводится

Моя русская навигация:

Я → Делаю → Проекты → Как → Надо

Это игра слов: можно читать как предложение «Я делаю проекты как надо» или как отдельные разделы. По‑русски работает. Но английский вариант?

Попытка №1: прямой перевод

I → Do → Projects → How → Need

Звучит как ошибка машинного перевода. «I Do Projects How Need» — бессмыслица.

Попытка №2: смысловой перевод

About → Work → Projects → Process → Contact

Работает, но теряется изюминка. Навигация превращается в стандартный шаблон, каких тысячи.

Решение: переосмыслить структуру

Я задал себе вопрос: что я на самом деле хочу сказать этой навигацией?

• Я — кто я такой, мои навыки
• Делаю — что я создаю, как работаю
• Проекты — конкретные кейсы и портфолио
• Как — процессы, подходы, методология
• Надо — связаться, начать работу

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

Финальная версия

Me → Craft → Work → Way → Right

Почему это работает:

1. Me — про меня (навыки, опыт, экспертиза)
2. Craft — что я создаю, мой подход к ремеслу
3. Work — портфолио, конкретные проекты
4. Way — как я работаю, процессы, методология
5. Right — начать работу, связаться (сделать всё правильно)

Можно читать как предложение: «Me Craft Work Way Right» = «Я создаю работу правильным путём». Звучит чуть странно, но запоминается и передаёт смысл.

Культурные различия в UX

Русский сайт: прямота и игра слов

Русскоязычные пользователи привыкли к:

• Ёмким словам (одно слово = целый раздел)
• Игре слов (двойные смыслы ценятся)
• Прямым заявлениям («Я делаю как надо» — это нормально)

Английский сайт: ясность и нейтральность

Англоязычные пользователи ожидают:

• Прозрачные названия разделов
• Меньше двусмысленностей
• Сдержанность (хвалить себя прямо — моветон)

Поэтому «Надо» (прямое «мне нужна работа, давайте работать») превратилось в «Right» (сделаем всё правильно, вместе).

Технические решения

Next.js App Router + Middleware

Использовал middleware для определения языка:

export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;
 
  // Проверяем, есть ли префикс языка
  const pathnameHasLocale = locales.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  );
 
  if (!pathnameHasLocale) {
    // Редирект на русскую версию (по умолчанию)
    return NextResponse.redirect(new URL(`/ru${pathname}`, request.url));
  }
}

Словари переводов

Создал структуру для переводов:

// src/shared/config/locales/ru.ts
export const ru = {
  nav: {
    home: 'Главная',
    me: 'Я',
    make: 'Делаю',
    projects: 'Проекты',
    how: 'Как',
    need: 'Надо',
  },
  // ...
};
 
// src/shared/config/locales/en.ts
export const en = {
  nav: {
    home: 'Home',
    me: 'Me',
    make: 'Craft',
    projects: 'Work',
    how: 'Way',
    need: 'Right',
  },
  // ...
};

Компоненты с переводами

Каждый компонент получает словарь через пропсы:

export function Hero({ lang, dict }: Props) {
  return (
    <h1>{dict.hero.title}</h1>
  );
}

Что получилось

Русская версия (по умолчанию)

• URL: potapov.me или potapov.me/ru
• Навигация: Я → Делаю → Проекты → Как → Надо
• Тон: Прямой, уверенный, с игрой слов

Английская версия

• URL: potapov.me/en
• Навигация: Me → Craft → Work → Way → Right
• Тон: Сдержанный, профессиональный, запоминающийся

Уроки и выводы

1. Локализация ≠ перевод — нужно адаптировать смысл, а не только слова.
2. Навигация — часть бренда — она должна работать на целевую аудиторию.
3. Культурные различия важны — то, что работает в одной культуре, может не работать в другой.
4. Тестируйте на носителях — я показывал варианты друзьям-нейтивам, их фидбек помог.
5. Технически i18n в Next.js 15 прост — middleware + словари + SSG = всё работает из коробки.

Итоги

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

Если переводите свой сайт — не бойтесь менять концепцию. Главное — чтобы пользователь понял, куда идти и почему это важно.

Технические детали

Для тех, кто хочет реализовать похожее:

Стек

• Next.js 15 (App Router)
• TypeScript
• Middleware для роутинга
• SSG для всех страниц

Ключевые файлы

middleware.ts              # Определение языка
src/shared/config/i18n.ts # Конфигурация локалей
src/shared/config/locales/ # Словари переводов
src/shared/lib/i18n/       # Утилиты для переводов

Полезные функции

Локализация путей:

export function localizePath(path: string, locale: Locale): string {
  if (locale === defaultLocale) return path;
  return `/${locale}${path}`;
}

Получение словаря:

export async function getDictionary(locale: Locale) {
  return (await import(`@/shared/config/locales/${locale}`)).default;
}

Если есть вопросы или хотите обсудить подходы к локализации — пишите в Telegram или на почту.