Language switching UI in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js router hook for navigation.

NextJS

import { [1] } from 'next/navigation';

Drag options to blanks, or click blank then click option'

AuseRouter

BuseState

CuseEffect

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Importing hooks from React instead of Next.js

Using useState for routing

The useRouter hook from next/navigation is used to access routing functions in Next.js.

2fill in blank

medium

Complete the code to get the router object inside the component.

NextJS

const router = [1]();

Drag options to blanks, or click blank then click option'

AuseEffect

BuseState

CuseRouter

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Calling useState instead of useRouter

Not calling the hook as a function

Calling useRouter() inside a component returns the router object for navigation.

3fill in blank

hard

Fix the error in the code to change the locale to 'fr' using the router.

NextJS

router.[1]({ locale: 'fr' });

Drag options to blanks, or click blank then click option'

Areload

Breplace

Cprefetch

Dpush

Attempts:

3 left

💡 Hint

Common Mistakes

Using reload which reloads the page

Using prefetch which only preloads data

The push method navigates to a new URL or changes locale without reloading the page.

4fill in blank

hard

Fill both blanks to create a button that switches language to Spanish ('es') on click.

NextJS

const switchToSpanish = () => {
  router.[1]({ locale: '[2]' });
};

Drag options to blanks, or click blank then click option'

Apush

Bes

Creload

Dprefetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using replace which replaces history entry

Using wrong locale code

Use router.push to change the locale. The locale code for Spanish is 'es'.

5fill in blank

hard

Fill all three blanks to create a language switcher component that updates locale and shows current language.

NextJS

import { useState } from 'react';
import { [1] } from 'next/navigation';

export default function LanguageSwitcher() {
  const router = [2]();
  const [lang, setLang] = useState('en');

  const changeLanguage = (newLang) => {
    router.[3]({ locale: newLang });
    setLang(newLang);
  };

  return (
    <button onClick={() => changeLanguage(lang === 'en' ? 'fr' : 'en')} aria-label="Switch language">
      Current: {lang.toUpperCase()}
    </button>
  );
}

Drag options to blanks, or click blank then click option'

AuseRouter

Cpush

Dreplace

Attempts:

3 left

💡 Hint

Common Mistakes

Using replace instead of push

Not updating the state after changing locale

Import and call useRouter to get the router. Use router.push to change locale. This updates the language and UI.