Javascript Programming Tutorials, Guides & Best Practices

✅ Translate meta tags using react-helmet or next/head

✅ Enable proper sitemap and routing strategy per locale

In 2025, Google rewards localized content.

• ✅ Use language-based subpaths: /en, /fr, /ar
• ✅ Generate hreflang tags for each locale
• ✅ Translate meta tags: <title>, <meta description>
• ✅ Avoid client-only routing for indexable pages
• ✅ Pre-render pages via SSR (e.g., with Next.js)

npx create-react-app react-i18n-demo
cd react-i18n-demo

Install the required dependencies:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
const path = require('path');

module.exports = {
  mode: 'development',
  devServer: {
    port: 8080,
  },
  entry: './src/bootstrap.js',
  output: {
    publicPath: 'http://localhost:8080/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'app_shell',
      remotes: {
        analytics_app: 'analytics_app@http://localhost:8081/remoteEntry.js',
      },
      shared: require('./package.json').dependencies,
    }),
    new HtmlWebpackPlugin({ template: './public/index.html' }),
  ],
};

Update src/bootstrap.js:

import create from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(devtools((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
})));

You can persist state to localStorage or sessionStorage: