Language switching UI in NextJS

Introduction

A language switching UI lets users pick their preferred language on a website. It helps make your site friendly for people who speak different languages.

You want visitors from different countries to read your site in their own language.

Your website has content available in multiple languages.

You want to improve user experience by letting users choose language easily.

You are building a global app that needs to support many languages.

Syntax

NextJS

import { useState } from 'react';

export default function LanguageSwitcher() {
  const [language, setLanguage] = useState('en');

  function changeLanguage(lang) {
    setLanguage(lang);
    // Add code here to update app language
  }

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('es')}>Spanish</button>
      <p>Current language: {language}</p>
    </div>
  );
}

This example uses React's useState hook to track the selected language.

Buttons call a function to update the language state when clicked.

Examples

Starts with English as the default language.

NextJS

const [language, setLanguage] = useState('en');

Button to switch language to French.

NextJS

<button onClick={() => setLanguage('fr')}>French</button>

Shows which language is currently selected.

NextJS

<p>Current language: {language}</p>

Sample Program

This component shows three buttons for English, Spanish, and French. When you click a button, it updates the language state and shows the selected language in uppercase. It uses aria-pressed for accessibility to indicate which button is active. The selected language text updates live for screen readers using aria-live.

NextJS

import { useState } from 'react';

export default function LanguageSwitcher() {
  const [language, setLanguage] = useState('en');

  function changeLanguage(lang) {
    setLanguage(lang);
  }

  return (
    <main>
      <h1>Choose your language</h1>
      <nav aria-label="Language selection">
        <button onClick={() => changeLanguage('en')} aria-pressed={language === 'en'}>English</button>
        <button onClick={() => changeLanguage('es')} aria-pressed={language === 'es'}>Spanish</button>
        <button onClick={() => changeLanguage('fr')} aria-pressed={language === 'fr'}>French</button>
      </nav>
      <section aria-live="polite">
        <p>You selected: <strong>{language.toUpperCase()}</strong></p>
      </section>
    </main>
  );
}

Important Notes

Use semantic HTML elements like <nav> and <main> for better structure.

Use ARIA attributes like aria-pressed and aria-live to improve accessibility.

Keep the UI simple and clear so users can easily switch languages.

Summary

A language switching UI helps users pick their preferred language easily.

Use React state to track and update the selected language.

Make the UI accessible with proper HTML and ARIA attributes.