Language switching UI in NextJS - Mini Project: Build & Apply

Language switching UI

📖 Scenario: You are building a simple website that supports switching between English and Spanish languages. Users can click buttons to change the displayed greeting message.

🎯 Goal: Create a Next.js functional component that shows a greeting message in English or Spanish. Add buttons to switch the language dynamically.

📋 What You'll Learn

Create a React functional component named LanguageSwitcher

Use useState hook to store the current language

Display a greeting message that changes based on the selected language

Add two buttons labeled English and Spanish to switch languages

Update the greeting message immediately when a button is clicked

💡 Why This Matters

🌍 Real World

Language switching is common in websites to support users from different countries. This UI lets users pick their preferred language easily.

💼 Career

Understanding how to manage state and update UI in React is essential for frontend developers building interactive web apps.

1

Set up the initial greetings data

Create a constant object called greetings with two keys: en and es. Set en to the string 'Hello!' and es to the string '¡Hola!'.

NextJS

// Create the greetings object with English and Spanish messages
// Your code here

Need a hint?

Use a JavaScript object with keys en and es and their respective greeting strings.

2

Add state to track the current language

Inside a React functional component named LanguageSwitcher, use the useState hook to create a state variable called language initialized to 'en'.

NextJS

const greetings = { en: 'Hello!', es: '¡Hola!' };

function LanguageSwitcher() {
  // Use useState to create language state initialized to 'en'
  // Your code here
}

Need a hint?

Import useState from React and call it inside the component to create language and setLanguage.

3

Display the greeting message based on current language

Inside the LanguageSwitcher component, return a <div> that contains a <p> element. The <p> should display the greeting message from greetings using the current language state.

NextJS

import { useState } from 'react';

const greetings = { en: 'Hello!', es: '¡Hola!' };

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

  // Return a div with a paragraph showing greetings[language]
  // Your code here
}

Need a hint?

Use curly braces inside JSX to show the greeting for the current language.

4

Add buttons to switch languages

Inside the LanguageSwitcher component's returned <div>, add two <button> elements labeled English and Spanish. Add onClick handlers to these buttons that call setLanguage('en') and setLanguage('es') respectively to update the language state.

NextJS

import { useState } from 'react';

const greetings = { en: 'Hello!', es: '¡Hola!' };

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

  return (
    
      {greetings[language]}
      {/* Add buttons to switch language here */}
      // Your code here
    
  );
}

Need a hint?

Add two buttons with onClick handlers that call setLanguage with the correct language code.