Javascript Programming Tutorials, Guides & Best Practices

Enable proper sitemap and routing strategy per locale

Translating URLs in React improves both UX and SEO, especially in 2025 where Google increasingly favors language-aware URLs over query parameters like ?lang=fr.

Set up your translation files, detect user language, and switch languages dynamically using:

i18n.changeLanguage('ar');

npm install i18next react-i18next i18next-browser-languagedetector

Create a new file: src/i18n.js

npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin

Create a webpack.config.js:

   import create from 'zustand';

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

   import React from 'react';
   import useStore from './store';

   function Counter() {
     const { count, increase, decrease } = useStore();
     return (
       <div>
         <h1>{count}</h1>
         <button onClick={increase}>Increase</button>
         <button onClick={decrease}>Decrease</button>
       </div>
     );
   }

   export default Counter;