機能を大量に追加した。

Author: The-Infinitys

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

@@ -4,26 +4,47 @@ import crypto from "crypto";
 import ClientComponent from "./client";
 import { AvailableLocales } from "@/i18n/request";
 
+// generateStaticParams は既存のまま
+
 export async function generateStaticParams() {
   const indexes = getArticleIndexes();
   return indexes.map((article) => {
-    const [article_year, month, aid] = article.slug.split("/");
-    return { article_year, month, aid };
-  });
+    // slugが "YYYY/MM/AID" の形式であることを前提とする
+    const parts = article.slug.split("/");
+    // partsの最後の3つの要素を取り出すことで、"lang/YYYY/MM/AID"のような形式にも対応できるようにする
+    if (parts.length >= 3) {
+        const [article_year, month, aid] = parts.slice(-3);
+        return { article_year, month, aid };
+    }
+    // 予期しない形式のslugはスキップするか、ログを出す
+    console.warn(`Skipping invalid slug format in generateStaticParams: ${article.slug}`);
+    return null; // nullを返して後でfilter(Boolean)で除外する
+  }).filter(Boolean); // nullを除外
 }
 
+
+// ArticleServer コンポーネントは既存のまま、または generateMetadata で取得した
+// データを再利用するようにリファクタリング可能ですが、ここでは generateMetadata の追加のみに留めます。
+// Next.js のApp Routerは、generateMetadata と ページコンポーネントで同じ
+// データ取得関数（getArticleIndexes, toHTMLなど）を呼び出した場合、
+// 可能であれば自動的に deduplicate (重複排除) してくれるため、
+// データの二重取得による大きなパフォーマンス低下は起きにくい設計になっています。
+
 export default async function ArticleServer({
   params,
 }: {
   params: Promise<{ article_year: string; month: string; aid: string }>;
 }) {
   const resolvedParams = await params;
   const indexes = getArticleIndexes();
-  const articles = await toHTML(indexes);
+  const articles = await toHTML(indexes); // ここで再度データを取得
   const slug = `${resolvedParams.article_year}/${resolvedParams.month}/${resolvedParams.aid}`;
 
-  const headings_list = articles
-    .filter((a) => a.slug === slug)
+  // スラッグに一致する記事のみをフィルタリング
+  const articlesForSlug = articles.filter((a) => a.slug === slug);
+
+  // TOC生成ロジック (既存のまま)
+  const headings_list = articlesForSlug
     .map((article) => {
       return {
         lang: article.lang as AvailableLocales,
@@ -35,21 +56,25 @@ export default async function ArticleServer({
       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);
+        // headingタグからレベルを抽出する処理をより頑健に
+        const levelMatch = heading.match(/^<h([1-6])>/);
+        const level = levelMatch ? `index-h${levelMatch[1]}` : 'index-heading'; // 例: <h1> -> index-h1
         return { id, text, level };
       }),
       lang: headings.lang,
     };
   });
 
-  const processedContents = articles
-    .filter((a) => a.slug === slug)
+  // コンテンツ処理ロジック (既存のまま)
+  const processedContents = articlesForSlug
     .map((article) => {
       return {
         content: article.content.replace(
           /<h([1-6])>(.*?)<\/h[1-6]>/g,
           (match, level, text) => {
+            // 見出しレベルを1つ下げる（h1 -> h2, h2 -> h3など）
             const newLevel = Math.min(parseInt(level) + 1, 6);
+            // IDは元の見出しテキストから生成
             const id = crypto.createHash("sha512").update(text).digest("hex");
             return `<h${newLevel} id="${id}">${text}</h${newLevel}>`;
           }
@@ -60,10 +85,13 @@ export default async function ArticleServer({
 
   return (
     <ClientComponent
-      articles={articles}
+      // ClientComponentに渡すarticlesは、スラッグでフィルタリングしたものを渡すのが効率的ですが、
+      // 元のコードに合わせてarticles全体（またはClientComponentが必要とするデータ構造）を渡します。
+      // ここではarticles全体を渡す元のロジックを踏襲します。
+      articles={articles} // 全記事データを渡す (元のコード通り)
       slug={slug}
-      tocs={tocs}
-      processedContents={processedContents}
+      tocs={tocs} // フィルタリング済みのTOCs
+      processedContents={processedContents} // フィルタリング済みのコンテンツ
     />
   );
-}
+}

src/app/[article_year]/[month]/[aid]/page.tsx

@@ -1,7 +1,8 @@
 import ArticleServer from "./components/server";
 import { getArticleIndexes } from "@/app/article/article";
+import { toHTML } from "@/app/article/article";
 import "./page.css";
-
+import { Metadata } from "next";
 export async function generateStaticParams() {
   const indexes = getArticleIndexes();
 
@@ -13,6 +14,57 @@ export async function generateStaticParams() {
 }
 
 
+// メタデータを生成する generateMetadata 関数を追加
+// この関数はページコンポーネントよりも先に実行されます
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ article_year: string; month: string; aid: string }>;
+}): Promise<Metadata> {
+  const resolvedParams = await params;
+  // 1. paramsからslugを再構築
+  const slug = `${resolvedParams.article_year}/${resolvedParams.month}/${resolvedParams.aid}`;
+
+  // 2. 記事データを取得
+  // toHTML関数が記事のコンテンツだけでなく、タイトルやディスクリプションなどのメタデータも
+  // 含むオブジェクトの配列を返すことを前提とします。
+  const indexes = getArticleIndexes();
+  const articles = await toHTML(indexes); // articlesは[{ slug: '...', title: '...', description: '...', lang: '...', content: '...' }, ...] のような形式を想定
+
+  // 3. 現在のslugに一致する記事データを検索
+  // generateStaticParams の設計から、slug に一致する記事は存在するはずですが、
+  // toHTML が複数の言語バージョンを同じ slug で返す可能性があるため、
+  // 最初に見つかったものをメタデータとして利用します。
+  const article = articles.find((a) => a.slug === slug && a.lang === "en");
+
+  // 4. 記事データからタイトルとディスクリプションを取得し、Metadata オブジェクトを生成
+  const title = article?.title || "記事が見つかりません"; // 記事が見つからない場合のデフォルトタイトル
+  const description = article?.description || "要求された記事が見つかりませんでした。"; // 記事が見つからない場合のデフォルトディスクリプション
+
+  // 必要に応じて、サイト名などをタイトルに追加する
+  const fullTitle = `${title} | The Infinity's`; // 例: "Next.jsでメタデータを生成する | あなたのサイト名"
+  const og_image_url = `${slug}/${article?.thumbnail?.split("/").slice(-1)[0]}`;
+  const metadata: Metadata = {
+    metadataBase: new URL(process.env.BASE_URL || "https://the-infinitys.f5.si"),
+    title: fullTitle, // ページのタイトルを設定
+    description: description, // ページのディスクリプションを設定
+    alternates: {
+      canonical: `/${slug}`, //
+    },
+    // Open Graph メタデータ (SNS共有時に表示される情報)
+    openGraph: {
+      title: fullTitle,
+      description: description,
+      url: `/${slug}`, // 絶対URLが推奨
+      type: 'article', // コンテンツタイプを記事に設定
+      // 記事に画像がある場合は、imagesプロパティを追加
+      images: [og_image_url || ""],
+      locale: article?.lang || 'ja_JP', // 記事の言語に対応したロケールを設定
+    }
+  };
+  return metadata;
+}
+
 export default function ArticlePage({
   params,
 }: {

src/app/article/page.tsx

@@ -2,6 +2,12 @@ import "./article.css"; // CSSファイルをインポート
 import "./page.css";
 import Explains from "./components/explains";
 import ArticlePage from "./components/articlepage"; // クライアントコンポーネントをインポート
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "The Infinity's Articles",
+  description: "Much! A lot of! Ideas!",
+};
 
 export default function Home() {
   return (

src/app/music/page.tsx

@@ -1,6 +1,7 @@
 import { getMusicList, MusicCard } from "./music";
 import styles from "./page.module.css";
 import Explains from "./components/explains";
+import { Metadata } from "next";
 export default function MusicPage() {
   const musicList = getMusicList();
 
@@ -20,3 +21,8 @@ export default function MusicPage() {
     </>
   );
 }
+
+export const metadata: Metadata = {
+  title: "The Infinity's Musics",
+  description: "Listen for the Infinite possibilities!",
+};