full changed with Roughfts

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,8 +12,6 @@
     "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,7 +1,7 @@
 ---
 title: Researching about Grok AI
 date: "2025-04-30"
-description: "Grokに自分自身について説明してもらった"
+descrption: "Grokに自分自身について説明してもらった"
 ---
 
 # Grok3 についての詳細な記事

public/article-2025/04/grok3/article.md

@@ -59,18 +59,12 @@ export function getArticleIndexes() {
           const fileContents = fs.readFileSync(articlePath, "utf-8");
           const { data } = matter(fileContents);
 
-          // 言語を判定 (デフォルトは "ja")
-          const langMatch = articlePath.match(/article(?:-(\w+))?\.md$/);
-          const lang = langMatch && langMatch[1] ? langMatch[1] : "ja";
-
           return {
             slug: `${year}/${month}/${articleId}`,
             title: data.title || "Untitled", // タイトルがない場合のデフォルト値
             date: data.date || "Unknown date", // 日付がない場合のデフォルト値
             thumbnail: thumbnailPath,
             articlePath,
-            description: data.description || "No description available", // description を追加
-            lang, // 言語を追加
           };
         })
         .filter(
@@ -95,8 +89,6 @@ export type Article = {
   date: string;
   thumbnail: string | null;
   articlePath: string;
-  description: string; // description を追加
-  lang: string; // lang を追加
 };
 
 // 該当箇所の置き換え
@@ -145,14 +137,14 @@ export function generateArticleButton(article: Article): ReactNode {
             alt={article.title}
             width={300}
             height={200}
+            objectFit="cover"
             placeholder={LoadingImage as PlaceholderValue}
             className="article-thumbnail"
           />
         )}
         <div className="article-content">
           <h2>{article.title}</h2>
           <p>{article.date}</p>
-          <p>{article.description}</p>
         </div>
       </article>
     </Link>

public/article-2025/05/may-introduction/article-en.md

@@ -1,21 +1,26 @@
-import useTranslation from "@/i18n/i18n";
-import { getArticleIndexes, Article } from "./article";
+import "@/app/i18n/configs";
+import useTranslation from "i18next";
+import { generateArticleButton, getArticleIndexes, Article } from "./article";
 import "./article.css"; // CSSファイルをインポート
-import ArticleList from "./components/list";
+import { ReactNode } from "react";
 
 export default async function Home() {
   const { t } = useTranslation;
   const articles: Article[] = getArticleIndexes();
   return (
     <>
       <section className="title">
-        <h1>{t("pages.article.title")}</h1>
+        <h1>{t("article.title")}</h1>
       </section>
       <section className="description">
-        <p>{t("pages.article.description.msg1")}</p>
-        <p>{t("pages.article.description.msg2")}</p>
+        <p>{t("article.description.msg1")}</p>
+        <p>{t("article.description.msg2")}</p>
+      </section>
+      <section className="articles">
+        {articles.map(
+          (article: Article): ReactNode => generateArticleButton(article)
+        )}
       </section>
-      <ArticleList articles={articles} />
     </>
   );
 }

src/app/article/article.tsx

@@ -153,7 +153,6 @@ footer {
   width: 100%;
   background-color: color-mix(in srgb, var(--primary), transparent 50%);
   backdrop-filter: blur(4px);
-  padding-bottom: 4em;
 }
 
 a {
@@ -201,24 +200,4 @@ a {
 
 .back-to-top svg {
   fill: var(--foreground);
-}
-
-.language-button {
-  padding: 0.5rem 1rem;
-  margin-right: 0.5rem;
-  background-color: var(--gray-200);
-  color: var(--foreground);
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
-
-.language-button.active {
-  background-color: var(--link-color);
-  color: var(--background);
-}
-
-.language-button:last-child {
-  margin-right: 0;
 }

src/app/article/components/list.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+// 言語jsonファイルのimport
+import translation_en from "./en.json"; 
+import translation_ja from "./ja.json"; 
+
+// リソースの定義
+const resources = {
+  ja: {
+    translation: translation_ja,
+  },
+  en: {
+    translation: translation_en,
+  },
+};
+
+// クライアントサイドでのローカルストレージチェック
+const getInitialLanguage = () => {
+  try {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      const savedLang = localStorage.getItem("language");
+      return savedLang || "ja";
+    }
+  } catch (error) {
+    console.error("Error accessing localStorage:", error);
+  }
+  return "ja";
+};
+
+// i18nextの初期化（ブラウザ環境でのみ実行）
+if (!i18n.isInitialized) {
+  i18n
+    .use(initReactI18next)
+    .init({
+      resources,
+      lng: typeof window !== 'undefined' ? getInitialLanguage() : "ja",
+      fallbackLng: "en",
+      interpolation: {
+        escapeValue: false,
+      },
+      react: {
+        useSuspense: false,
+      },
+    })
+    .catch(error => {
+      console.error("Error initializing i18n:", error);
+    });
+}
+
+export default i18n;