i10n using NextIntl

components/languageSwitcher.tsx

@@ -0,0 +1,24 @@
+import { useRouter } from 'next/router';
+import { useTranslations } from 'next-intl';
+
+// using https://next-intl-docs.vercel.app/docs/getting-started/pages-router
+const LanguageSwitcher = () => {
+    const t = useTranslations('common');
+    const router = useRouter();
+    const { locale, locales, asPath } = router;
+
+    return (
+        <div>
+            {locales.map((lng) => {
+                if (lng === locale) return null;
+                return (
+                    <button key={lng} onClick={() => router.push(asPath, asPath, { locale: lng })}>
+                        {t('changeTo')} {t(lng.toUpperCase())}
+                    </button>
+                );
+            })}
+        </div>
+    );
+};
+
+export default LanguageSwitcher;