仮実装

Author: The-Infinitys

next.config.ts

@@ -2,7 +2,7 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   reactStrictMode: true,
-  output: "export",
+  // output: "export",
   images: { unoptimized: true },
   trailingSlash: true,
 };

package-lock.json

@@ -12,6 +12,8 @@
     "gray-matter": "^4.0.3",
     "highlight.js": "^11.11.1",
     "i18next": "^25.0.1",
+    "i18next-browser-languagedetector": "^8.1.0",
+    "i18next-http-backend": "^3.0.2",
     "install": "^0.13.0",
     "negotiator": "^1.0.0",
     "next": "15.3.1",

package.json

@@ -1,4 +1,3 @@
-import "@/app/i18n/i18n";
 import useTranslation from "@/i18n/i18n";
 import { getArticleIndexes, Article } from "./article";
 import "./article.css"; // CSSファイルをインポート

src/app/article/page.tsx

@@ -1,13 +1,13 @@
 "use client";
 import { useState } from "react";
-import i18n from "@/i18n/i18n"; // i18nextをインポート
-
+import i18n from "@/i18n/i18n";
 export default function Footer() {
   const [language, setLanguage] = useState(i18n.language || "en"); // 初期言語を設定
-
   const handleLanguageChange = (lang: string) => {
     setLanguage(lang);
-    i18n.changeLanguage(lang); // 言語を切り替え
+    i18n.changeLanguage(lang === "ja" ? "en" : "ja").then(()=>{}); // 言語を切り替え
+    // alert(i18n.language);
+    // window.location.reload();
     console.log(`Language changed to: ${lang}`);
   };
 

src/app/layout/footer.tsx

@@ -1,4 +1,4 @@
-import "@/app/i18n/i18n";
+
 import useTranslation from "@/i18n/i18n";
 export default function Home() {
   const { t } = useTranslation;

src/app/page.tsx

@@ -1,6 +1,6 @@
 {
   "info": {
-    "lang": "ja"
+    "lang": "en"
   },
   "pages": {
     "home": {
@@ -12,16 +12,16 @@
         "msg4": "Also, on X (formerly Twitter), I share technical topics and daily life updates.",
         "msg5": "If you're interested in my activities, please check them out!",
         "msg6": "And, I would appreciate it if you could follow me on X (formerly Twitter) and GitHub!"
+      }
+    },
+    "article": {
+      "title": "Articles",
+      "description": {
+        "msg1": "Here, you can find various articles (or rather blogs) that I have written!",
+        "msg2": "I write about many topics, so please take a look!"
       },
-      "article": {
-        "title": "Articles",
-        "description": {
-          "msg1": "Here, you can find various articles (or rather blogs) that I have written!",
-          "msg2": "I write about many topics, so please take a look!"
-        },
-        "words": {
-          "search": "Search"
-        }
+      "words": {
+        "search": "Search"
       }
     }
   }

src/i18n/en.json

@@ -16,8 +16,7 @@ const resources = {
 // i18nextの初期化
 i18n.init({
   resources, // リソースを設定
-  lng: "ja", // デフォルト言語を日本語に設定
-  fallbackLng: "en", // フォールバック言語を英語に設定
+  fallbackLng: "ja", // フォールバック言語を英語に設定
   interpolation: {
     escapeValue: false, // ReactはXSS対策済み
   },