diff --git a/client/next-i18next.config.js b/client/next-i18next.config.js index 745f9f71e..1f8c9fa69 100644 --- a/client/next-i18next.config.js +++ b/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 } }; diff --git a/client/src/components/Language/index.tsx b/client/src/components/Language/index.tsx index d15d5b8a7..e6bdcc78a 100644 --- a/client/src/components/Language/index.tsx +++ b/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(); diff --git a/client/src/utils/i18n.ts b/client/src/utils/i18n.ts index 7f4740b79..a987bd4d9 100644 --- a/client/src/utils/i18n.ts +++ b/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); };