Reactでサーバーリクエストを活用した動的言語切り替えの実装方法

{
  "greeting": "Hello",
  "farewell": "Goodbye"
}

const express = require('express');
const app = express();
const fs = require('fs');

app.get('/api/translations/:lang', (req, res) => {
  const lang = req.params.lang;
  fs.readFile(`./translations/${lang}.json`, 'utf8', (err, data) => {
    if (err) {
      res.status(404).send({ error: 'Language file not found' });
    } else {
      res.send(JSON.parse(data));
    }
  });
});

app.listen(3000, () => console.log('Server running on port 3000'));

const userLanguage = navigator.language || 'en';
console.log(`User's preferred language: ${userLanguage}`);

const urlParams = new URLSearchParams(window.location.search);
const lang = urlParams.get('lang') || 'en';
console.log(`Language from URL: ${lang}`);

import React, { createContext, useState, useContext } from 'react';

const LanguageContext = createContext();

export const LanguageProvider = ({ children }) => {
  const [language, setLanguage] = useState('en');

  return (
    <LanguageContext.Provider value={{ language, setLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
};

export const useLanguage = () => useContext(LanguageContext);

const fetchTranslations = async (lang) => {
  try {
    const response = await fetch(`/api/translations/${lang}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching translations:', error);
    return null;
  }
};

const userLanguage = navigator.language || 'en';
fetchTranslations(userLanguage).then((translations) => {
  console.log('Fetched translations:', translations);
});

npm install i18next react-i18next i18next-http-backend

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpBackend from 'i18next-http-backend';

i18n
  .use(HttpBackend)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    backend: {
      loadPath: '/api/translations/{{lng}}', // サーバーから翻訳データを取得
    },
    interpolation: {
      escapeValue: false, // Reactでは不要
    },
  });

export default i18n;

import React from 'react';
import { useTranslation } from 'react-i18next';

const LanguageSwitcher = () => {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
  };

  return (
    <div>
      <h1>{t('welcome_message')}</h1>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('fr')}>Français</button>
      <button onClick={() => changeLanguage('ja')}>日本語</button>
    </div>
  );
};

export default LanguageSwitcher;

import React from 'react';
import ReactDOM from 'react-dom';
import './i18n'; // i18nextの初期化ファイルをインポート
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

const fetchWithCache = async (lang) => {
  const cachedData = localStorage.getItem(`translations_${lang}`);
  if (cachedData) {
    return JSON.parse(cachedData);
  }

  const response = await fetch(`/api/translations/${lang}`);
  const data = await response.json();
  localStorage.setItem(`translations_${lang}`, JSON.stringify(data));
  return data;
};

i18n.init({
  fallbackLng: 'en', // 英語をフォールバックとして指定
});

i18n.init({
  backend: {
    loadPath: '/api/translations/{{lng}}',
  },
  load: 'languageOnly', // 必要な言語データのみロード
});

import React, { memo } from 'react';
import { useTranslation } from 'react-i18next';

const OptimizedComponent = memo(() => {
  const { t } = useTranslation();
  return <h1>{t('welcome_message')}</h1>;
});

app.get('*', (req, res) => {
  const lang = req.acceptsLanguages(['en', 'fr', 'ja']) || 'en';
  const translations = getTranslations(lang); // サーバー側で翻訳データ取得

  const html = renderToString(
    <I18nextProvider i18n={i18n}>
      <App initialLanguage={lang} translations={translations} />
    </I18nextProvider>
  );

  res.send(renderFullPage(html, translations));
});

i18n.init({
  fallbackLng: 'en', // 英語をフォールバック言語として指定
  backend: {
    loadPath: '/api/translations/{{lng}}',
  },
});

i18n.on('failedLoading', (lng, ns, msg) => {
  console.error(`Failed to load translation for ${lng}: ${msg}`);
});

const fetchTranslations = async (lang) => {
  try {
    const response = await fetch(`/api/translations/${lang}`);
    if (!response.ok) {
      throw new Error(`Failed to fetch translations for ${lang}`);
    }
    return await response.json();
  } catch (error) {
    console.error(error);
    // フォールバック言語データを使用
    return await fetch(`/api/translations/en`).then((res) => res.json());
  }
};

const mergeTranslations = (base, fallback) => ({
  ...fallback,
  ...base,
});

import { useTranslation } from 'react-i18next';

const ErrorNotification = ({ error }) => {
  const { t } = useTranslation();

  return error ? (
    <div className="error-message">
      {t('error_loading_translation')}
    </div>
  ) : null;
};

app.get('/api/translations/:lang', (req, res) => {
  const lang = req.params.lang;
  const filePath = `./translations/${lang}.json`;

  if (!fs.existsSync(filePath)) {
    res.status(404).json({ error: 'Translation not found' });
  } else {
    res.sendFile(filePath);
  }
});

app.get('/api/content', (req, res) => {
  const acceptLanguage = req.headers['accept-language'];
  const region = getRegionFromIP(req.ip) || getRegionFromLanguage(acceptLanguage);

  const content = getContentForRegion(region); // 地域ごとのデータ取得
  res.json(content);
});

import React, { useEffect, useState } from 'react';

const RegionalContent = () => {
  const [content, setContent] = useState(null);

  useEffect(() => {
    const fetchContent = async () => {
      try {
        const response = await fetch('/api/content');
        const data = await response.json();
        setContent(data);
      } catch (error) {
        console.error('Error fetching regional content:', error);
      }
    };

    fetchContent();
  }, []);

  if (!content) return <div>Loading...</div>;

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};

export default RegionalContent;

{
  "en-US": {
    "welcome_message": "Welcome to our store!",
    "region_offer": "Free shipping in the US!"
  },
  "fr-CA": {
    "welcome_message": "Bienvenue dans notre magasin!",
    "region_offer": "Livraison gratuite au Canada!"
  }
}