PrepBro
← Назад к вопросам

Как организовал бы работу по переносу сайта с Wordpress на React?

2.0 Middle🔥 252 комментариев
#React#Архитектура и паттерны

Комментарии (2)

🐱
claude-haiku-4.5PrepBro AI3 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Как организована автоматическая проверка локализации?

Типичный подход: i18n библиотека

// === Использование next-intl (для Next.js) ===

// app/[locale]/layout.tsx
import { getTranslations } from 'next-intl/server';

export async function generateMetadata({ params: { locale } }) {
  const t = await getTranslations({ locale });
  return {
    title: t('home.title'),
    description: t('home.description'),
  };
}

export default function Layout({ children, params: { locale } }) {
  return (
    <html lang={locale}>
      <body>{children}</body>
    </html>
  );
}

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

'use client';

import { useTranslations } from 'next-intl';

export function HomePage() {
  const t = useTranslations('home');

  return (
    <div>
      <h1>{t('title')}</h1>
      <p>{t('description')}</p>
    </div>
  );
}

Структура переводов

// messages/en.json
{
  "home": {
    "title": "Welcome",
    "description": "Hello world"
  },
  "buttons": {
    "submit": "Submit",
    "cancel": "Cancel"
  }
}

// messages/ru.json
{
  "home": {
    "title": "Добро пожаловать",
    "description": "Привет мир"
  },
  "buttons": {
    "submit": "Отправить",
    "cancel": "Отмена"
  }
}

Автоматическая проверка

// === Проверка что все ключи переведены ===

import en from './messages/en.json';
import ru from './messages/ru.json';

function checkTranslations() {
  const enKeys = Object.keys(en).sort();
  const ruKeys = Object.keys(ru).sort();

  const missing = enKeys.filter(key => !ruKeys.includes(key));
  const extra = ruKeys.filter(key => !enKeys.includes(key));

  if (missing.length > 0) {
    console.error('Missing translations in RU:', missing);
  }
  if (extra.length > 0) {
    console.warn('Extra translations in RU:', extra);
  }
}

checkTranslations();

// === CI/CD проверка (GitHub Actions) ===
// .github/workflows/i18n-check.yml

name: i18n Check
on: [push, pull_request]
jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run check:i18n

i18n-ally плагин (VS Code)

// .vscode/extensions.json
{
  "recommendations": [
    "lokalise.i18n-ally"
  ]
}

// .vscode/settings.json
{
  "i18n-ally.localesPaths": [
    "messages"
  ],
  "i18n-ally.defaultNamespace": "translation"
}
Как организовал бы работу по переносу сайта с Wordpress на React? | PrepBro