Switching language settings in Mapbox and i18n.

When the JA or EN button is clicked, the language setting of the site is switched and the language setting of Mapbox is switched accordingly.

Create a component like this.

This article assumes that the Nextjs version is “14.0.4″ and that react-map-gl and i18n have already been installed.

Please refer to this article for the introduction of mapbox language settings and i18n.


Language type definitions

Switch between Japanese and English.
If you need other languages as well, add them to the type definition.

export const enum LOCALE {
  JA = 'ja',
  EN = 'en'

export type Locale = LOCALE.JA | LOCALE.EN

language switching component

Language switching is done in the function and involves the following two points.
Switching the language of i18n.
Switching the language of Mapbox

Switching i18n languages

Language switching in i18n can be achieved by calling changeLanguage.

The first argument is the language you want to switch to.



Switching Mapbox language

Mapbox can be switched by setting MapboxLanguage in setStyle.

map?.getMap().setStyle(new MapboxLanguage().setLanguage(map?.getMap().getStyle(), LOCALE.JA))


Language switch button component

The entire code is here.

Clicking on the LangBtn calls handleLanguageChange to switch between i18n and Mapbox languages.

This allows for site-wide language switching.

import { LOCALE, Locale } from '@/types/Lang'
import MapboxLanguage from '@mapbox/mapbox-gl-language'
import { useRouter } from 'next/router'
import { useTranslation } from 'react-i18next'
import { useMap } from 'react-map-gl'
import styled from 'styled-components'

export function LangButtons() {
  const router = useRouter()
  const { locale } = useRouter()
  const { i18n } = useTranslation('translation', { lng: locale })
  const { map } = useMap()

  const handleLanguageChange = (lang: Locale) => {
    map?.getMap().setStyle(new MapboxLanguage().setLanguage(map?.getMap().getStyle(), lang))

    const newPath = `${lang === LOCALE.JA ? '' : `/${LOCALE.EN}`}${router.pathname}`
    const newUrl = { pathname: newPath, query: router.query }

    router.push(newUrl, undefined, { shallow: true, locale: lang })

  return (
      <LangBtn onClick={() => handleLanguageChange(LOCALE.JA)}>{LOCALE.JA.toUpperCase()}</LangBtn>
      <LangBtn onClick={() => handleLanguageChange(LOCALE.EN)}>{LOCALE.EN.toUpperCase()}</LangBtn>

const BtnBox = styled.div`
  display: flex;
  gap: 0 8px;
  padding-bottom: 4px;

const LangBtn = styled.button`
  color: inherit;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  font-size: 16px;
  font-family: inherit;

const Slash = styled.span`
  font-size: 14px;
  font-weight: bold;


Now that Corona has dawned and inbound traffic is returning. Multilingualisation appears to be becoming increasingly important.

This website may be of some help.