✨ feat: i18n on server

app/components/footer-i18n-switcher/index.tsx

@@ -1,8 +1,9 @@
 "use client";
-import { DEFAULT_SITE_LANGUAGE } from "@/utils/config";
-import { useMemoizedFn, useMount, useUpdate, useUpdateEffect } from "ahooks";
+import { DEFAULT_SITE_LANGUAGE, LOCAL_KEY } from "@/utils/config";
+import { useMemoizedFn, useMount, useUpdateEffect } from "ahooks";
 import clsx from "clsx";
-import { useEffect, useState } from "react";
+import Cookies from "js-cookie";
+import { useState } from "react";
 
 const mapForLocale: Record<string, string> = {
 	"zh-CN": "🇨🇳",
@@ -14,18 +15,25 @@ const I18nSwitcher = () => {
 	const [locale, setLocale] = useState<string>(DEFAULT_SITE_LANGUAGE);
 
 	const setLanguageToStorage = useMemoizedFn((newLocale: string) => {
-		console.log("set language to storage: ", newLocale);
-		localStorage.setItem("locale", newLocale);
+		// console.log("set language to storage: ", newLocale);
+		localStorage.setItem(LOCAL_KEY, newLocale);
+		Cookies.set(LOCAL_KEY, newLocale, { expires: 365 });
 	});
 
 	useMount(() => {
-		const newLocale =
-			localStorage.getItem("locale") || window.navigator.language;
+		const acceptLanguage =
+			window.navigator.languages.find((locale) => locale in mapForLocale) ||
+			DEFAULT_SITE_LANGUAGE;
+		// TODO: 服务器默认英文，找到匹配语言后自动切换
+		const newLocale = localStorage.getItem("locale") || acceptLanguage;
 		setLocale(newLocale);
 	});
 
 	const handleChangeLocale = (newLocale: string) => () => {
 		setLocale(newLocale);
+		setTimeout(() => {
+			window.location.reload();
+		});
 	};
 
 	useUpdateEffect(() => {

app/components/header/index.tsx

@@ -28,7 +28,7 @@ const Header = async () => {
 						<span>🚧{t("intermediate")}</span>
 					</Link>
 					<Link href="/topik" className="mr-4">
-						<span>TOPIK</span>
+						<span>🚧TOPIK</span>
 					</Link>
 					<span>
 						{session ? (

app/i18n.ts

@@ -1,11 +1,12 @@
 import { getRequestConfig } from "next-intl/server";
-import {} from "next/headers";
-import { DEFAULT_SITE_LANGUAGE } from "./utils/config";
+import { cookies, headers } from "next/headers";
+import { DEFAULT_SITE_LANGUAGE, LOCAL_KEY } from "./utils/config";
 
-export default getRequestConfig(async (params) => {
+export default getRequestConfig(async () => {
 	// read from `cookies()`, `headers()`, etc.
 	// TODO: GET COOKIE FOR LANGUAGE
-	const locale = DEFAULT_SITE_LANGUAGE;
+	const cookie = cookies();
+	const locale = cookie.get(LOCAL_KEY)?.value || DEFAULT_SITE_LANGUAGE;
 
 	return {
 		locale,

app/types/site.ts

@@ -3,7 +3,7 @@ enum SITES_LANGUAGE {
 	japanese = "jp",
 	zhCN = "zh-CN",
 	zhTW = "zh-TW",
-	english = "en",
+	en = "en",
 }
 
 export { SITES_LANGUAGE };

app/utils/config.ts

@@ -5,9 +5,10 @@ const siteLanguageConfig: Record<SITES_LANGUAGE, string> = {
 	[SITES_LANGUAGE.japanese]: "日本語",
 	[SITES_LANGUAGE.zhCN]: "中文简体",
 	[SITES_LANGUAGE.zhTW]: "中文繁体",
-	[SITES_LANGUAGE.english]: "English",
+	[SITES_LANGUAGE.en]: "English",
 };
 
+const LOCAL_KEY = "locale";
 const DEFAULT_SITE_LANGUAGE = SITES_LANGUAGE.zhCN;
 
 /**
@@ -28,4 +29,4 @@ export const dicts = {
 	"kr-popular": "流行词汇",
 };
 
-export { siteConfig, DEFAULT_SITE_LANGUAGE };
+export { siteConfig, DEFAULT_SITE_LANGUAGE, LOCAL_KEY };

mdx/beginner/keyboard.mdx

@@ -3,7 +3,7 @@ title: keyboard
 author: summerscar
 description: 韩语键盘输入方法指南
 date: 2024-07-15
-tags: ['a', 'b']
+tags: ['keyboard', 'hangul']
 ---
 
 ## 韩语键盘输入方法指南

messages/ja.json

@@ -0,0 +1,11 @@
+{
+	"Index": {
+		"title": "韓国語教室",
+		"description": "Korean Language Learning",
+		"keywords": "Korean, Korean Language, Korean Learning, Korean Studio"
+	},
+	"Header": {
+		"beginner": "初級",
+		"intermediate": "中級"
+	}
+}

package.json

@@ -40,6 +40,7 @@
 		"github-markdown-css": "^5.6.1",
 		"graphql-request": "^7.1.0",
 		"graphql-yoga": "^5.4.0",
+		"js-cookie": "^3.0.5",
 		"next": "14.2.4",
 		"next-auth": "^5.0.0-beta.19",
 		"next-intl": "^3.15.0",
@@ -56,6 +57,7 @@
 		"@biomejs/biome": "1.8.1",
 		"@prisma/nextjs-monorepo-workaround-plugin": "^5.16.2",
 		"@types/canvas-confetti": "^1.6.4",
+		"@types/js-cookie": "^3.0.6",
 		"@types/node": "^20",
 		"@types/react": "^18",
 		"@types/react-dom": "^18",