Language switching UI in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Next.js language switcher component render?

Consider this React functional component in Next.js that switches languages using the useRouter hook.

import { useRouter } from 'next/router';

export default function LanguageSwitcher() {
  const router = useRouter();
  const { locale, locales, pathname } = router;

  return (
    <div>
      <p>Current locale: {locale}</p>
      <ul>
        {locales.map((loc) => (
          <li key={loc}>
            <a href={pathname} onClick={(e) => {
              e.preventDefault();
              router.push(pathname, pathname, { locale: loc });
            }}>
              Switch to {loc}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

Assuming the current locale is 'en' and available locales are ['en', 'fr'], what will the component display?

NextJS

import { useRouter } from 'next/router';

export default function LanguageSwitcher() {
  const router = useRouter();
  const { locale, locales, pathname } = router;

  return (
    <div>
      <p>Current locale: {locale}</p>
      <ul>
        {locales.map((loc) => (
          <li key={loc}>
            <a href={pathname} onClick={(e) => {
              e.preventDefault();
              router.push(pathname, pathname, { locale: loc });
            }}>
              Switch to {loc}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

A A paragraph showing 'Current locale: en' and a list with two links: 'Switch to en' and 'Switch to fr'.

B A paragraph showing 'Current locale: en' and no links because locales is empty.

C A paragraph showing 'Current locale: en' and a list with one link: 'Switch to fr' only.

D A paragraph showing 'Current locale: fr' and a list with two links: 'Switch to en' and 'Switch to fr'.

💡 Hint

Check the locale and locales values from the router object.

The component reads the current locale as 'en' and the available locales as ['en', 'fr']. It renders the current locale and a list of links for each locale. So it shows 'Current locale: en' and two links: 'Switch to en' and 'Switch to fr'.

📝 Syntax

intermediate

Which option correctly uses Next.js router to change locale on click?

In Next.js, you want to change the language without reloading the page by clicking a link. Which code snippet correctly uses router.push to change locale?

A onClick={e => { e.preventDefault(); router.push(router.pathname, { locale: 'fr' }); }}

B onClick={e => { e.preventDefault(); router.push('/fr'); }}

C onClick={e => { e.preventDefault(); router.push(router.pathname, router.pathname, { locale: 'fr' }); }}

D onClick={e => { router.push(router.pathname, router.pathname, { locale: 'fr' }); }}

💡 Hint

Remember to prevent default link behavior and pass the correct arguments to router.push.

Option C prevents the default link behavior and calls router.push with the current pathname for both URL and asPath, and passes the locale option correctly. Other options either miss preventing default, use wrong arguments, or incorrect method signature.

🔧 Debug

advanced

Why does this Next.js language switcher cause a full page reload?

This Next.js language switcher uses anchor tags with href set to the current path and an onClick handler that calls router.push with locale. However, clicking the links causes a full page reload. Why?

const LanguageSwitcher = () => {
  const router = useRouter();
  return (
    <ul>
      {router.locales.map(loc => (
        <li key={loc}>
          <a href={router.pathname} onClick={() => router.push(router.pathname, router.pathname, { locale: loc })}>
            {loc}
          </a>
        </li>
      ))}
    </ul>
  );
};

NextJS

const LanguageSwitcher = () => {
  const router = useRouter();
  return (
    <ul>
      {router.locales.map(loc => (
        <li key={loc}>
          <a href={router.pathname} onClick={() => router.push(router.pathname, router.pathname, { locale: loc })}>
            {loc}
          </a>
        </li>
      ))}
    </ul>
  );
};

A Because the href attribute is missing, so the browser reloads the page.

B Because router.push is called with wrong arguments causing a reload fallback.

C Because Next.js does not support locale changes via router.push.

D Because the onClick handler does not call e.preventDefault(), so the browser follows the href and reloads the page.

💡 Hint

Think about default link behavior in browsers.

The anchor tag's default behavior is to navigate to the href URL, causing a full reload. Without calling e.preventDefault() in the onClick handler, the browser performs the default navigation after the router.push call.

❓ state_output

advanced

What is the value of the locale state after clicking 'Switch to fr' link?

Given this Next.js language switcher component, what will be the value of locale state after clicking the 'Switch to fr' link?

import { useRouter } from 'next/router';
import { useState } from 'react';

export default function LanguageSwitcher() {
  const router = useRouter();
  const [currentLocale, setCurrentLocale] = useState(router.locale);

  const changeLocale = (loc) => {
    router.push(router.pathname, router.pathname, { locale: loc });
    setCurrentLocale(loc);
  };

  return (
    <div>
      <p>Current locale: {currentLocale}</p>
      <button onClick={() => changeLocale('fr')}>Switch to fr</button>
    </div>
  );
}

NextJS

import { useRouter } from 'next/router';
import { useState } from 'react';

export default function LanguageSwitcher() {
  const router = useRouter();
  const [currentLocale, setCurrentLocale] = useState(router.locale);

  const changeLocale = (loc) => {
    router.push(router.pathname, router.pathname, { locale: loc });
    setCurrentLocale(loc);
  };

  return (
    <div>
      <p>Current locale: {currentLocale}</p>
      <button onClick={() => changeLocale('fr')}>Switch to fr</button>
    </div>
  );
}

A The original locale (e.g., 'en'), because router.push triggers a page reload resetting state.

B 'fr', because setCurrentLocale is called immediately after router.push.

C Undefined, because currentLocale is not updated properly.

D An error occurs because setCurrentLocale is called inside changeLocale.

💡 Hint

Consider what happens to React state when Next.js changes locale via router.push.

Option B is correct. The changeLocale function calls setCurrentLocale(loc) synchronously right after router.push. Since the state setter is synchronous and router.push starts an asynchronous navigation, the currentLocale updates to 'fr' immediately after clicking.

🧠 Conceptual

expert

Which Next.js feature enables automatic locale detection and routing?

Next.js supports internationalized routing with locale detection. Which configuration enables automatic locale detection and locale-aware routing?

A Setting <code>i18n.locales</code> and <code>i18n.defaultLocale</code> in <code>next.config.js</code> with <code>localeDetection: true</code>.

B Using <code>getStaticProps</code> to fetch locale data manually for each page.

C Adding a custom server to parse Accept-Language headers and redirect accordingly.

D Using <code>next-i18next</code> package without any Next.js config changes.

💡 Hint

Check Next.js official docs on internationalized routing configuration.

Next.js supports automatic locale detection and routing by configuring the i18n object in next.config.js with locales, defaultLocale, and localeDetection: true. This enables Next.js to detect user locale and serve the correct localized page automatically.

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