Easy Localization in React: Switch Between German and Spanish

We need to make our Next.js project multilingual, supporting German and Spanish.

Users: ‘Why is my language still the same?

The plan:

1. Use Axios for fetching page content from the backend, with the desired language specified in request headers.
2. Store key-value translations (e.g., button texts, navigation labels) in Redux Toolkit.
3. Provide a simple toggle to switch between German (Ger) and Spanish (Spa), and keep this preference in sessionStorage so it persists after page reloads.

1. Setting up Axios

First, configure an Axios instance to handle all API calls. For security, use environment variables for your base URL:

// src/store/apiInstance.ts
import axios from 'axios';

const URL = process.env.NEXT_PUBLIC_API_URL;

const instance = axios.create({
  baseURL: `${URL}/api/`,
});

export default instance;

2. Creating GET Requests

Page-Specific Content (Example: “Profile” Page)

If you have a page called Profile, set up a corresponding file apiProfile.ts:

// src/store/apiProfile.ts
import instance from './apiInstance';

const getProfileContent = async (lang: string) => {…