add multilanguage pattern

components/languageSwitcher/LanguageSwitcher.js

@@ -0,0 +1,46 @@
+import { useTranslation } from 'react-i18next'
+import { Button, Flex, Text } from 'theme-ui'
+
+const LanguageSwitcher = () => {
+  const { i18n } = useTranslation()
+
+  const changeLanguage = (lng) => {
+    i18n.changeLanguage(lng)
+  }
+
+  const languages = [
+    { code: 'en', name: 'English', flag: '🇺🇸' },
+    { code: 'tr', name: 'Türkçe', flag: '🇹🇷' }
+  ]
+
+  return (
+    <Flex sx={{ gap: 2, alignItems: 'center' }}>
+      <Text sx={{ fontSize: 1, fontWeight: 'bold' }}>Language:</Text>
+      {languages.map((lang) => (
+        <Button
+          key={lang.code}
+          onClick={() => changeLanguage(lang.code)}
+          variant={i18n.language === lang.code ? 'primary' : 'outline'}
+          sx={{
+            fontSize: 1,
+            py: 1,
+            px: 2,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 1,
+            cursor: 'pointer',
+            opacity: i18n.language === lang.code ? 1 : 0.7,
+            '&:hover': {
+              opacity: 1
+            }
+          }}
+        >
+          <span>{lang.flag}</span>
+          <span>{lang.name}</span>
+        </Button>
+      ))}
+    </Flex>
+  )
+}
+
+export default LanguageSwitcher

components/nav.js

@@ -7,6 +7,7 @@ import Icon from './icon'
 import Flag from './flag'
 import ScrollLock from 'react-scrolllock'
 import NextLink from 'next/link'
+import LanguageSwitcher from '../components/languageSwitcher/LanguageSwitcher'
 
 const rgbaBgColor = (props, opacity) =>
   `rgba(
@@ -147,6 +148,8 @@ const Navigation = props => (
     <NextLink href="https://toolbox.hackclub.com/" passHref>
       <Link>Toolbox</Link>
     </NextLink>
+
+
   </NavBar>
 )
 
@@ -225,6 +228,7 @@ function Header({ unfixed, color, bgColor, dark, fixed, ...props }) {
           color={baseColor}
           dark={dark}
         />
+        <LanguageSwitcher />
         <ToggleContainer color={toggleColor} onClick={handleToggleMenu}>
           <Icon glyph={toggled ? 'view-close' : 'menu'} />
         </ToggleContainer>

lib/i18n.js

@@ -0,0 +1,56 @@
+import i18n from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+
+// Import translation files
+import enTranslations from '../public/locales/en/translation.json'
+import trTranslations from '../public/locales/tr/translation.json'
+
+i18n
+  // Detect user language
+  .use(LanguageDetector)
+  // Pass the i18n instance to react-i18next
+  .use(initReactI18next)
+  // Initialize i18next
+  .init({
+    debug: process.env.NODE_ENV === 'development',
+
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+
+    // Language resources
+    resources: {
+      en: {
+        translation: enTranslations
+      },
+      tr: {
+        translation: trTranslations
+      }
+    },
+
+    // Language detection options
+    detection: {
+      // Order of language detection
+      order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag'],
+
+      // Keys or params to lookup language from
+      lookupQuerystring: 'lng',
+      lookupCookie: 'i18next',
+      lookupLocalStorage: 'i18nextLng',
+
+      // Cache user language
+      caches: ['localStorage', 'cookie'],
+
+      // Optional expire and domain for set cookie
+      cookieMinutes: 10080, // 7 days
+    },
+
+    // React options
+    react: {
+      useSuspense: false
+    }
+  })
+
+export default i18n

next-i18next.config.js

@@ -0,0 +1,8 @@
+// Next.js i18n configuration for routing
+const i18nConfig = {
+  locales: ['en', 'tr'],
+  defaultLocale: 'en',
+  localeDetection: true
+}
+
+export default i18nConfig

next.config.mjs

@@ -1,3 +1,4 @@
+import i18n from './next-i18next.config.js';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
@@ -25,6 +26,7 @@ const nextConfig = {
       }
     ]
   },
+  i18n,
   webpack: (config, { isServer }) => {
     return config
   },