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 =;
    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>

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'>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Language Picker</title>
  <div id='language-picker' class='language-picker'></div>

  <script src=''></script>
  <script type='text/javascript' src='/path-to-your-language-picker-component.js'></script>
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.