Custom Locale Detection and Language Picker

Create a custom language picker that integrates with Next.js i18n routing and illustrates custom locale detection using cookies or local storage.

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import Cookies from 'js-cookie';

const LanguagePicker = () => {
  const router = useRouter();

  const changeLanguage = (e) => {
    const locale = e.target.value;
    Cookies.set('NEXT_LOCALE', locale);
    router.push(router.pathname, router.asPath, { locale });
  };

  useEffect(() => {
    const nextLocale = Cookies.get('NEXT_LOCALE');
    if (nextLocale && nextLocale !== router.locale) {
      router.push(router.pathname, router.asPath, { locale: nextLocale });
    }
  }, [router]);

  return (
    <select onChange={changeLanguage} defaultValue={router.locale}>
      <option value='en'>English</option>
      <option value='fr'>French</option>
      <option value='es'>Spanish</option>
    </select>
  );
};

export default LanguagePicker;

The LanguagePicker component allows users to switch between languages. It leverages the useEffect hook to detect if a saved language preference exists in the cookies and updates the locale accordingly. When the user selects a different language from the select dropdown, it saves this preference in the cookies for future visits and updates the Next.js router to display the page in the chosen language.

.language-picker {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

select {
  padding: 0.5em;
  border-radius: 4px;
}

The corresponding CSS styles for the LanguagePicker component. It positions the language picker dropdown to a fixed location on the page and styles the select element with padding and a border-radius for better visual appeal.

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Language Picker</title>
</head>
<body>
  <div id='language-picker' class='language-picker'></div>

  <script src='https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/dist/js.cookie.min.js'></script>
  <script type='text/javascript' src='/path-to-your-language-picker-component.js'></script>
</body>
</html>

The HTML structure for implementing the LanguagePicker component. The language picker is contained within a div with the id 'language-picker'. The js-cookie library is included for handling cookies, and there's a reference to the custom JavaScript file that should contain the LanguagePicker component logic. Replace '/path-to-your-language-picker-component.js' with the actual path to the JS file containing the LanguagePicker component.