perf: default lang

client/next-i18next.config.js

@@ -5,8 +5,8 @@
 
 module.exports = {
   i18n: {
-    defaultLocale: 'en',
-    locales: ['en', 'zh', 'zh-Hans'],
+    defaultLocale: 'zh',
+    locales: ['en', 'zh', 'zh-Hans', 'zh-CN'],
     localeDetection: false
   }
 };

client/src/components/Language/index.tsx

@@ -1,21 +1,10 @@
 import React, { useState } from 'react';
 import { Menu, MenuButton, MenuItem, MenuList, MenuButtonProps } from '@chakra-ui/react';
-import { getLangStore, LangEnum, setLangStore } from '@/utils/i18n';
+import { getLangStore, LangEnum, setLangStore, langMap } from '@/utils/i18n';
 import MyIcon from '@/components/Icon';
 import { useTranslation } from 'react-i18next';
 import { useRouter } from 'next/router';
 
-const langMap = {
-  [LangEnum.en]: {
-    label: 'English',
-    icon: 'language_en'
-  },
-  [LangEnum.zh]: {
-    label: '简体中文',
-    icon: 'language_zh'
-  }
-};
-
 const Language = (props: MenuButtonProps) => {
   const router = useRouter();
   const { i18n } = useTranslation();

client/src/utils/i18n.ts

@@ -6,6 +6,16 @@ export enum LangEnum {
   'zh' = 'zh',
   'en' = 'en'
 }
+export const langMap = {
+  [LangEnum.en]: {
+    label: 'English',
+    icon: 'language_en'
+  },
+  [LangEnum.zh]: {
+    label: '简体中文',
+    icon: 'language_zh'
+  }
+};
 
 export const setLangStore = (value: `${LangEnum}`) => {
   return Cookies.set(LANG_KEY, value, { expires: 7, sameSite: 'None', secure: true });
@@ -16,10 +26,12 @@ export const getLangStore = () => {
 };
 
 export const serviceSideProps = (content: any) => {
-  return serverSideTranslations(
-    content.req.cookies[LANG_KEY] || 'en',
-    undefined,
-    null,
-    content.locales
-  );
+  const acceptLanguage = (content.req.headers['accept-language'] as string) || '';
+  const acceptLanguageList = acceptLanguage.split(/,|;/g);
+  // @ts-ignore
+  const firstLang = acceptLanguageList.find((lang) => langMap[lang]);
+
+  const language = content.req.cookies[LANG_KEY] || firstLang || 'zh';
+
+  return serverSideTranslations(language, undefined, null, content.locales);
 };