hotfix: バグ修正。

Author: The-Infinitys

src/app/[article_year]/[month]/[aid]/components/client.tsx

@@ -4,34 +4,34 @@ import { Article } from "../../../../article/article-client";
 import Image from "next/image";
 import { useEffect, useRef } from "react";
 import { generateArticleButton } from "../../../../article/article-client";
-import { useTranslations, useLocale } from "next-intl";
+import { useTranslations } from "next-intl";
+import { notFound } from "next/navigation";
+import { AvailableLocales } from "@/i18n/request";
 
 interface ClientComponentProps {
   articles: Article[];
   slug: string;
-  toc: { id: string; text: string; level: string }[];
-  processedContent: string;
+  tocs: {lang:AvailableLocales,toc:{ id: string; text: string; level: string }[]}[];
+  processedContents: {content:string,lang:AvailableLocales}[];
 }
 
 export default function ClientComponent({
   articles,
   slug,
-  toc,
-  processedContent,
+  tocs,
+  processedContents,
 }: ClientComponentProps) {
   const tocRef = useRef<HTMLElement>(null);
   const t = useTranslations();
   const locale = t("info.lang");
-
+  const processedContent = processedContents.find((c) => c.lang === locale)?.content;
+  const toc = tocs.find((t) => t.lang === locale)?.toc || [];
   const article = articles.find((a) => a.slug === slug && a.lang === locale);
+  console.log(article);
   const otherArticles = articles.filter(
     (a) => a.slug !== slug && a.lang === locale
   );
 
-  if (!article) {
-    return null;
-  }
-
   useEffect(() => {
     const handleScroll = () => {
       if (!tocRef.current) return;
@@ -59,11 +59,14 @@ export default function ClientComponent({
         }
       });
     };
-
     window.addEventListener("scroll", handleScroll);
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
+  if (!article || !processedContent) {
+    return notFound();
+  }
+
   return (
     <div className="article-container">
       <aside className="toc relative md:sticky" ref={tocRef}>

src/app/[article_year]/[month]/[aid]/components/server.tsx

@@ -1,14 +1,8 @@
-import {
-  getArticleIndexes,
-  toHTML,
-  generateArticleButton,
-  Article,
-} from "../../../../article/article";
+import { getArticleIndexes, toHTML } from "../../../../article/article";
 import "../../../../article/article.css";
-import { notFound } from "next/navigation";
-import Image from "next/image";
 import crypto from "crypto";
 import ClientComponent from "./client";
+import { AvailableLocales } from "@/i18n/request";
 
 export async function generateStaticParams() {
   const indexes = getArticleIndexes();
@@ -28,32 +22,48 @@ export default async function ArticleServer({
   const articles = await toHTML(indexes);
   const slug = `${resolvedParams.article_year}/${resolvedParams.month}/${resolvedParams.aid}`;
 
-  const headings =
-    articles
-      .find((a) => a.slug === slug)
-      ?.content.match(/<h[1-6]>.*?<\/h[1-6]>/g) || [];
-  const toc = headings.map((heading) => {
-    const text = heading.replace(/<.*?>/g, "").trim();
-    const id = crypto.createHash("sha512").update(text).digest("hex");
-    const level = "index-" + heading.slice(1, 3);
-    return { id, text, level };
+  const headings_list = articles
+    .filter((a) => a.slug === slug)
+    .map((article) => {
+      return {
+        lang: article.lang as AvailableLocales,
+        toc: article.content.match(/<h[1-6]>.*?<\/h[1-6]>/g) || [],
+      };
+    });
+  const tocs = headings_list.map((headings) => {
+    return {
+      toc: headings.toc.map((heading) => {
+        const text = heading.replace(/<.*?>/g, "").trim();
+        const id = crypto.createHash("sha512").update(text).digest("hex");
+        const level = "index-" + heading.slice(1, 3);
+        return { id, text, level };
+      }),
+      lang: headings.lang,
+    };
   });
 
-  const processedContent =
-    articles
-      .find((a) => a.slug === slug)
-      ?.content.replace(/<h([1-6])>(.*?)<\/h[1-6]>/g, (match, level, text) => {
-        const newLevel = Math.min(parseInt(level) + 1, 6);
-        const id = crypto.createHash("sha512").update(text).digest("hex");
-        return `<h${newLevel} id="${id}">${text}</h${newLevel}>`;
-      }) || "";
+  const processedContents = articles
+    .filter((a) => a.slug === slug)
+    .map((article) => {
+      return {
+        content: article.content.replace(
+          /<h([1-6])>(.*?)<\/h[1-6]>/g,
+          (match, level, text) => {
+            const newLevel = Math.min(parseInt(level) + 1, 6);
+            const id = crypto.createHash("sha512").update(text).digest("hex");
+            return `<h${newLevel} id="${id}">${text}</h${newLevel}>`;
+          }
+        ),
+        lang: article.lang as AvailableLocales,
+      };
+    });
 
   return (
     <ClientComponent
       articles={articles}
       slug={slug}
-      toc={toc}
-      processedContent={processedContent}
+      tocs={tocs}
+      processedContents={processedContents}
     />
   );
 }

src/app/layout.tsx

@@ -3,7 +3,6 @@ import Header from "./layout/header";
 import Footer from "./layout/footer";
 import BackToTopButton from "./layout/back2top";
 import I18nProvider from "./i18nProvider";
-import { getMessages, AvailableLocales } from "@/i18n/request";
 import { Geist, Geist_Mono } from "next/font/google";
 import type { Metadata } from "next";