Language switching UI in NextJS - Step-by-Step Execution

Concept Flow - Language switching UI

User sees UI with current language

↓

User clicks language button

↓

Update language state

↓

Re-render UI with new language

↓

Display content in selected language

The UI shows the current language. When the user clicks a language button, the app updates the language state and re-renders the content in the chosen language.

Execution Sample

NextJS

"use client";
import { useState } from 'react';

export default function LangSwitcher() {
  const [lang, setLang] = useState('en');
  const content = lang === 'en' ? 'Content in English' : 'Contenido en Español';
  return (
    <div>
      <p>{content}</p>
      <button onClick={() => setLang(lang === 'en' ? 'es' : 'en')}>Switch</button>
    </div>
  );
}

A simple button toggles language state between English and Spanish on click.

Execution Table

Step	UI Language State	User Action	State Change	UI Output
1	en	Page loads	No change	Button shows 'Switch' (content in English)
2	en	User clicks button	lang changes to 'es'	UI re-renders, content in Spanish
3	es	User clicks button	lang changes to 'en'	UI re-renders, content in English
4	en	No further clicks	No change	UI remains in English

💡 User stops clicking; language state remains stable.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
lang	'en'	'en'	'es'	'en'	'en'

Key Moments - 2 Insights

Why does the UI update immediately after clicking the button?

Because clicking triggers setLang which updates the state, causing React to re-render the component with the new language (see execution_table step 2).

What happens if we don't use state for language?

Without state, React won't know to re-render the UI when language changes, so the displayed language won't update (state change is key as shown in execution_table).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'lang' after the second click?

A 'en'

B 'es'

C undefined

D 'fr'

💡 Hint

Check the 'After 3' column in the variable_tracker.

At which step does the UI first show content in Spanish?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'UI Output' column in the execution_table for when Spanish content appears.

If the initial state was 'es' instead of 'en', what would the UI show on page load?

A English content

B No content

C Spanish content

D Error message

💡 Hint

Refer to the 'Start' value of 'lang' in variable_tracker and how UI output depends on it.

Concept Snapshot

Language switching UI in Next.js:
- Use useState to hold current language
- Render UI based on language state
- On button click, update language state
- React re-renders UI with new language
- State change triggers visible language update

Full Transcript

This example shows a simple language switching UI in Next.js using React's useState hook. Initially, the language state is set to English ('en'). The UI displays a button labeled 'Switch'. When the user clicks this button, the language state toggles between 'en' and 'es' (Spanish). Each click updates the state, causing React to re-render the component and display content in the selected language. The execution table traces each step: starting with English, switching to Spanish on the first click, back to English on the second click, and so on. The variable tracker shows how the 'lang' variable changes over time. Key moments highlight why state is necessary for UI updates and how React re-renders on state change. The quiz questions test understanding of state changes and UI output at each step. This pattern is common for building accessible, responsive language switchers in modern web apps.

Practice

1. What is the main purpose of a language switching UI in a Next.js app?

easy

A. To let users choose their preferred language for the app content

B. To change the app's theme colors

C. To update the user's profile picture

D. To log out the user automatically

Solution

1. Step 1: Understand the UI purpose

   A language switching UI is designed to let users pick their language preference.

2. Step 2: Match purpose to options

   Only To let users choose their preferred language for the app content describes changing language, others are unrelated to language switching.

3. Final Answer:

   To let users choose their preferred language for the app content -> Option A

4. Quick Check:

   Language switching UI = Choose language [OK]

Hint: Language switch changes content language, not appearance [OK]

Common Mistakes:

• Confusing language switch with theme or profile settings
• Thinking it logs out users automatically

2. Which of the following is the correct way to declare a React state hook for language selection in Next.js?

easy

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

B. const language = useState('en')

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

D. const [language, setLanguage] = useState()

Solution

1. Step 1: Recall React useState syntax

   The correct syntax is: const [state, setState] = useState(initialValue).

2. Step 2: Check each option

   const [language, setLanguage] = useState('en') matches correct syntax with initial value 'en'. Others have syntax errors or missing initial value.

3. Final Answer:

   const [language, setLanguage] = useState('en') -> Option A

4. Quick Check:

   useState syntax = const [var, setVar] = useState(value) [OK]

Hint: useState returns array destructured into state and setter [OK]

Common Mistakes:

• Not destructuring the array returned by useState
• Missing initial state value
• Incorrect assignment order

3. Given this Next.js component snippet:
<pre>const LanguageSwitcher = () => { const [lang, setLang] = useState('en'); return ( <button onClick={() => setLang('fr')} aria-label="Switch to French">FR</button> ); }; What will be the value of lang after clicking the button once?

medium

A. null

B. 'en'

C. undefined

D. 'fr'

Solution

1. Step 1: Understand initial state

   The state variable lang starts as 'en'.

2. Step 2: Analyze button click effect

   Clicking the button calls setLang('fr'), updating lang to 'fr'.

3. Final Answer:

   'fr' -> Option D

4. Quick Check:

   Click sets lang to 'fr' [OK]

Hint: Click triggers setLang with new language [OK]

Common Mistakes:

• Thinking state stays the same after click
• Confusing initial value with updated value

4. Consider this Next.js language switcher code:
<pre>const LanguageSwitcher = () => { const [lang, setLang] = useState('en'); return ( <button onClick={() => setLang('es')}>Switch to Spanish</button> ); }; Why might this code cause an accessibility issue?

medium

A. The state variable is not initialized

B. The button lacks an aria-label describing its purpose

C. The onClick handler syntax is incorrect

D. The component does not import React

Solution

1. Step 1: Check accessibility features

   The button has no aria-label or descriptive text for screen readers.

2. Step 2: Evaluate other options

   State is initialized, onClick syntax is correct, React import is assumed; only missing aria-label is an accessibility issue.

3. Final Answer:

   The button lacks an aria-label describing its purpose -> Option B

4. Quick Check:

   Missing aria-label = accessibility problem [OK]

Hint: Always add aria-label for buttons with unclear text [OK]

Common Mistakes:

• Ignoring accessibility attributes
• Assuming syntax errors without checking
• Overlooking React import necessity

5. You want to build a language switcher in Next.js that updates the URL locale and changes the displayed language without a full page reload. Which approach is best?

hard

A. Reload the page manually after setting a cookie for language

B. Use window.location.href to change URL and reload page

C. Use Next.js <Link> with locale prop and React state to track language

D. Store language in localStorage and ignore URL changes

Solution

1. Step 1: Understand Next.js locale routing

   Next.js supports locale routing with to change language without full reload.

2. Step 2: Combine URL update and React state

   Using <Link> with locale prop updates URL and React state tracks current language for UI updates.

3. Step 3: Evaluate other options

   Reloading page or using window.location causes full reload, losing SPA benefits. Ignoring URL breaks routing consistency.

4. Final Answer:

   Use Next.js <Link> with locale prop and React state to track language -> Option C

5. Quick Check:

   Next.js locale routing + state = smooth language switch [OK]

Hint: Use Next.js for smooth language changes [OK]

Common Mistakes:

• Reloading page loses SPA benefits
• Ignoring URL locale causes routing issues
• Using localStorage alone misses URL sync