remember language preference

components/SwitchLang.tsx

@@ -4,6 +4,7 @@ import { Menu, Transition } from '@headlessui/react'
 
 import { useRouter } from 'next/router'
 import Link from 'next/link'
+import { useCookies, withCookies } from 'react-cookie'
 
 // https://headlessui.dev/react/menu#integrating-with-next-js
 const CustomLink = ({ href, children, as, locale, ...props }): JSX.Element => {
@@ -28,6 +29,8 @@ const localeText = (locale: string): string => {
 const SwitchLang = () => {
   const { locales, pathname, query, asPath } = useRouter()
 
+  const [_, setCookie] = useCookies(['NEXT_LOCALE'])
+
   return (
     <div className="relative">
       <Menu>
@@ -48,7 +51,13 @@ const SwitchLang = () => {
           <Menu.Items className="absolute top-0 right-0 z-20 mt-8 w-28 divide-y divide-gray-900 overflow-auto rounded border border-gray-900/10 bg-white py-1 shadow-lg focus:outline-none dark:border-gray-500/30 dark:bg-gray-900 dark:text-white">
             {locales!.map(locale => (
               <Menu.Item key={locale}>
-                <CustomLink key={locale} href={{ pathname, query }} as={asPath} locale={locale}>
+                <CustomLink
+                  key={locale}
+                  href={{ pathname, query }}
+                  as={asPath}
+                  locale={locale}
+                  onClick={() => setCookie('NEXT_LOCALE', locale, { path: '/' })}
+                >
                   <div className="m-1 cursor-pointer rounded px-2 py-1 text-left text-sm font-medium hover:bg-blue-50 hover:text-blue-700 dark:hover:bg-blue-600/10 dark:hover:text-blue-400">
                     {localeText(locale)}
                   </div>
@@ -62,4 +71,4 @@ const SwitchLang = () => {
   )
 }
 
-export default SwitchLang
+export default withCookies(SwitchLang)

package.json

@@ -35,6 +35,7 @@
     "react": "^17.0.2",
     "react-async-hook": "^4.0.0",
     "react-audio-player": "^0.17.0",
+    "react-cookie": "^4.1.1",
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "^17.0.2",
     "react-dplayer": "^0.4.2",

pnpm-lock.yaml

@@ -42,6 +42,7 @@ specifiers:
   react: ^17.0.2
   react-async-hook: ^4.0.0
   react-audio-player: ^0.17.0
+  react-cookie: ^4.1.1
   react-copy-to-clipboard: ^5.0.3
   react-dom: ^17.0.2
   react-dplayer: ^0.4.2
@@ -86,6 +87,7 @@ dependencies:
   react: 17.0.2
   react-async-hook: 4.0.0_react@17.0.2
   react-audio-player: 0.17.0_react-dom@17.0.2+react@17.0.2
+  react-cookie: 4.1.1_react@17.0.2
   react-copy-to-clipboard: 5.0.4_react@17.0.2
   react-dom: 17.0.2_react@17.0.2
   react-dplayer: 0.4.2_react@17.0.2
@@ -395,6 +397,10 @@ packages:
       tailwindcss: 3.0.18_833e1018ad0d7954aa80c53675939269
     dev: false
 
+  /@types/cookie/0.3.3:
+    resolution: {integrity: sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==}
+    dev: false
+
   /@types/cors/2.8.12:
     resolution: {integrity: sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==}
     dev: true
@@ -1068,6 +1074,11 @@ packages:
       safe-buffer: 5.1.2
     dev: true
 
+  /cookie/0.4.2:
+    resolution: {integrity: sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
   /copy-to-clipboard/3.3.1:
     resolution: {integrity: sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==}
     dependencies:
@@ -3645,6 +3656,17 @@ packages:
       react-dom: 17.0.2_react@17.0.2
     dev: false
 
+  /react-cookie/4.1.1_react@17.0.2:
+    resolution: {integrity: sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==}
+    peerDependencies:
+      react: '>= 16.3.0'
+    dependencies:
+      '@types/hoist-non-react-statics': 3.3.1
+      hoist-non-react-statics: 3.3.2
+      react: 17.0.2
+      universal-cookie: 4.0.4
+    dev: false
+
   /react-copy-to-clipboard/5.0.4_react@17.0.2:
     resolution: {integrity: sha512-IeVAiNVKjSPeGax/Gmkqfa/+PuMTBhutEvFUaMQLwE2tS0EXrAdgOpWDX26bWTXF3HrioorR7lr08NqeYUWQCQ==}
     peerDependencies:
@@ -4473,6 +4495,13 @@ packages:
       unist-util-visit-parents: 5.1.0
     dev: false
 
+  /universal-cookie/4.0.4:
+    resolution: {integrity: sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==}
+    dependencies:
+      '@types/cookie': 0.3.3
+      cookie: 0.4.2
+    dev: false
+
   /universalify/0.1.2:
     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
     engines: {node: '>= 4.0.0'}