fix: server.js

Author: 521xueweihan

package.json

@@ -27,12 +27,14 @@
     "@next/bundle-analyzer": "^12.3.1",
     "classnames": "^2.3.1",
     "clsx": "^1.1.1",
+    "cookie-parser": "^1.4.6",
     "copy-to-clipboard": "^3.3.2",
     "dayjs": "^1.11.3",
     "echarts": "^5.4.2",
     "echarts-for-react": "^3.0.2",
     "express": "^4.18.1",
     "i18next": "^23.11.5",
+    "js-cookie": "^3.0.5",
     "next": "^12.1.6",
     "next-i18next": "^15.3.0",
     "nprogress": "^0.2.0",

server.js

@@ -1,27 +1,92 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const express = require('express');
 const next = require('next');
+const cookieParser = require('cookie-parser');
 
 const app = next({ dev: false });
 const handle = app.getRequestHandler();
 
 const PORT = process.env.PORT || 3000;
+const DEFAULT_LOCALE = 'zh';
+const FALLBACK_LOCALE = 'en';
+const SUPPORTED_LOCALES = ['zh', 'en'];
 
 async function startServer() {
   try {
     await app.prepare();
     const server = express();
+    server.use(cookieParser());
 
-    // 中间件处理尾部斜杠但不重定向
+    // 中间件处理语言选择和路由
     server.use((req, res, next) => {
-      if (req.url.length > 1 && req.url.endsWith('/')) {
-        req.url = req.url.slice(0, -1);
+      if (req.url.startsWith('/_next') || req.url.startsWith('/static')) {
+        next();
+      } else {
+        let locale = req.cookies.locale;
+
+        // 解析 URL 中的语言设置
+        const urlParts = req.path.split('/');
+        const urlLocale = SUPPORTED_LOCALES.includes(urlParts[1])
+          ? urlParts[1]
+          : null;
+
+        if (!locale) {
+          // 如果没有 cookie，使用 URL 中的语言或浏览器偏好
+          const browserLocale = req.acceptsLanguages(SUPPORTED_LOCALES);
+          locale = urlLocale || browserLocale || FALLBACK_LOCALE;
+
+          // 如果浏览器语言不是中文，默认使用英语
+          if (browserLocale && browserLocale !== 'zh') {
+            locale = FALLBACK_LOCALE;
+          }
+        }
+
+        // 确保 locale 是支持的语言之一
+        locale = SUPPORTED_LOCALES.includes(locale) ? locale : FALLBACK_LOCALE;
+        if (urlLocale) {
+          // URL 中有语言前缀
+          if (urlLocale !== locale) {
+            // URL 语言与 cookie 不匹配，更新 locale
+            locale = urlLocale;
+          }
+          if (locale === DEFAULT_LOCALE) {
+            // 默认语言不应该在 URL 中显示，重定向到无前缀的 URL
+            const newUrl = req.url.replace(`/${DEFAULT_LOCALE}`, '') || '/';
+            return res.redirect(307, newUrl);
+          }
+        } else if (locale !== DEFAULT_LOCALE) {
+          // URL 中没有语言前缀，且不是默认语言，添加前缀并重定向
+          let newUrl = `/${locale}${req.url}`;
+          if (newUrl.endsWith('/')) {
+            // 如果以 '/' 结尾，去掉末尾的 '/'
+            newUrl = newUrl.slice(0, -1);
+          }
+          return res.redirect(307, newUrl);
+        }
+
+        // 设置或更新 cookie
+        res.cookie('locale', locale, {
+          maxAge: 365 * 24 * 60 * 60 * 1000,
+        });
+
+        req.locale = locale;
+
+        // 处理尾部斜杠并重定向
+        if (req.url.length > 1 && req.url.endsWith('/')) {
+          const newUrl =
+            req.url.slice(0, -1) +
+            (req.url.includes('?') ? req.url.slice(req.url.indexOf('?')) : '');
+          return res.redirect(301, newUrl);
+        }
+
+        next();
       }
-      next();
     });
 
     // 处理所有其他请求
-    server.all('*', (req, res) => handle(req, res));
+    server.all('*', (req, res) => {
+      return handle(req, res);
+    });
 
     server.listen(PORT, (err) => {
       if (err) throw err;

src/components/buttons/Button.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { ImSpinner2 } from 'react-icons/im';
 
 import clsxm from '@/lib/clsxm';

src/components/buttons/LanguageSwitcher.tsx

@@ -1,7 +1,8 @@
 // components/LanguageSwitcher.tsx
 import { useRouter } from 'next/router';
-import { useEffect, useRef, useState } from 'react';
-import { MdTranslate } from 'react-icons/md';
+import { useRef, useState } from 'react';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const Cookies = require('js-cookie');
 
 type LanguageSwitchProps = {
   type?: string;
@@ -11,24 +12,13 @@ const LanguageSwitcher = (props: LanguageSwitchProps) => {
   const router = useRouter();
   const { locale, asPath } = router;
   const [isHovered, setIsHovered] = useState(false);
+  const [selectedLocale, setSelectedLocale] = useState(locale);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  useEffect(() => {
-    const storedLocale = localStorage.getItem('locale');
-    if (storedLocale) {
-      router.push(asPath, asPath, { locale: storedLocale });
-    } else {
-      const systemLocale = navigator.language.toLowerCase().startsWith('zh')
-        ? 'zh'
-        : 'en';
-      localStorage.setItem('locale', systemLocale);
-      router.push(asPath, asPath, { locale: systemLocale });
-    }
-  }, []);
-
   const changeLanguage = (language: string) => {
-    localStorage.setItem('locale', language);
+    Cookies.set('locale', language);
+    setSelectedLocale(language);
     setIsHovered(false);
     router.push(asPath, asPath, { locale: language });
   };
@@ -71,8 +61,8 @@ const LanguageSwitcher = (props: LanguageSwitchProps) => {
           aria-haspopup='true'
           aria-expanded={isHovered ? 'true' : 'false'}
         >
-          <MdTranslate size={16} />
-          {/* {selectedLocale === 'zh' ? '中文' : 'EN'} */}
+          {/* <MdTranslate size={16} /> */}
+          {selectedLocale === 'zh' ? '中文' : 'EN'}
         </button>
       </div>
 

src/components/layout/Header.tsx

@@ -89,9 +89,7 @@ const Header = () => {
             </button>
           </RepoModal>
           <ThemeSwitcher />
-          <div className='hidden'>
-            <LanguageSwitcher />
-          </div>
+          <LanguageSwitcher />
         </div>
       </nav>
     </div>

yarn.lock

@@ -3052,11 +3052,24 @@ convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+cookie-parser@^1.4.6:
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/cookie-parser/-/cookie-parser-1.4.6.tgz#3ac3a7d35a7a03bbc7e365073a26074824214594"
+  integrity sha512-z3IzaNjdwUC2olLIB5/ITd0/setiaFMLYiZJle7xg5Fe9KWAceil7xszYfHHBtDFYLSgJduS2Ty0P1uJdPDJeA==
+  dependencies:
+    cookie "0.4.1"
+    cookie-signature "1.0.6"
+
 [email protected]:
   version "1.0.6"
   resolved "https://registry.npmmirror.com/cookie-signature/-/cookie-signature-1.0.6.tgz"
   integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
+[email protected]:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.1.tgz#afd713fe26ebd21ba95ceb61f9a8116e50a537d1"
+  integrity sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==
+
 [email protected]:
   version "0.5.0"
   resolved "https://registry.npmmirror.com/cookie/-/cookie-0.5.0.tgz"
@@ -5257,6 +5270,11 @@ jest@^27.5.1:
     import-local "^3.0.2"
     jest-cli "^27.5.1"
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 js-sdsl@^4.1.4:
   version "4.1.5"
   resolved "https://registry.npmmirror.com/js-sdsl/-/js-sdsl-4.1.5.tgz"