年度や月ごとにブログ記事を分けてリストにする機能を実装しました。

なんのため...?

Author: The-Infinitys

src/app/[article_year]/[month]/components/articlepage.tsx

@@ -0,0 +1,7 @@
+import { getArticleIndexes, Article } from "../../../article/article";
+import ArticleList from "../../../article/components/list";
+
+export default function ArticlePage({ year, month }: { year: string; month: string }) {
+  const articles: Article[] = getArticleIndexes().filter(article => article.date.trim().startsWith(`${year}-${month}-`));
+  return <ArticleList articles={articles} />;
+}

src/app/[article_year]/[month]/components/explains.tsx

@@ -0,0 +1,15 @@
+"use client";
+import { useTranslations } from "next-intl";
+
+export default function Explains({ year, month }: { year: string; month: string }) {
+  const t = useTranslations();
+  return (
+    <>
+      <section className="title">
+        <h1>{t("pages.article.title") + " of " + year + "-" + month}</h1>
+      </section>
+      <section className="description">
+        <p>{t("pages.article.description.msg1")}</p>
+        <p>{t("pages.article.description.msg2")}</p>
+      </section></>)
+}

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

@@ -0,0 +1,31 @@
+import "../../article/article.css"; // CSSファイルをインポート
+import "../../article/page.css";
+import Explains from "./components/explains";
+import ArticlePage from "./components/articlepage"; // クライアントコンポーネントをインポート
+import { getArticleIndexes } from "@/app/article/article";
+
+export async function generateStaticParams() {
+  const indexes = getArticleIndexes();
+  // 静的に生成するパスを返す
+  return indexes.map((article) => {
+    const [article_year, month] = article.slug.split("/");
+    return { article_year, month };
+  });
+}
+
+
+export default async function Home({
+  params,
+}: {
+  params: Promise<{ article_year: string; month: string; }>;
+}) {
+  const resolvedParams = await params;
+  const article_year = parseInt(resolvedParams.article_year.replace("article-", "")).toString();
+  const month = resolvedParams.month;
+  return (
+    <>
+      <Explains year={article_year} month={month} />
+      <ArticlePage year={article_year} month={month} />
+    </>
+  );
+}

src/app/[article_year]/components/articlepage.tsx

@@ -1,7 +1,7 @@
 import { getArticleIndexes, Article } from "../../article/article";
 import ArticleList from "../../article/components/list";
 
-export default function ArticlePage() {
-  const articles: Article[] = getArticleIndexes();
+export default function ArticlePage({ year }: { year: string }) {
+  const articles: Article[] = getArticleIndexes().filter(article => article.date.trim().startsWith(year));
   return <ArticleList articles={articles} />;
 }

src/app/[article_year]/components/explains.tsx

@@ -1,12 +1,12 @@
 "use client";
 import { useTranslations } from "next-intl";
 
-export default function Explains() {
+export default function Explains({ year }: { year: string }) {
   const t = useTranslations();
   return (
     <>
       <section className="title">
-        <h1>{t("pages.article.title")}</h1>
+        <h1>{t("pages.article.title") + " of " + year}</h1>
       </section>
       <section className="description">
         <p>{t("pages.article.description.msg1")}</p>

src/app/[article_year]/page.tsx

@@ -1,13 +1,30 @@
-import "./article.css"; // CSSファイルをインポート
-import "./page.css";
+import "../article/article.css"; // CSSファイルをインポート
+import "../article/page.css";
 import Explains from "./components/explains";
 import ArticlePage from "./components/articlepage"; // クライアントコンポーネントをインポート
+import { getArticleIndexes } from "@/app/article/article";
 
-export default function Home() {
+export async function generateStaticParams() {
+  const indexes = getArticleIndexes();
+  // 静的に生成するパスを返す
+  return indexes.map((article) => {
+    const [article_year] = article.slug.split("/");
+    return { article_year };
+  });
+}
+
+
+export default async function Home({
+  params,
+}: {
+  params: Promise<{ article_year: string }>;
+}) {
+  const resolvedParams = await params;
+  const article_year = parseInt(resolvedParams.article_year.replace("article-", "")).toString();
   return (
     <>
-      <Explains />
-      <ArticlePage />
+      <Explains year={article_year} />
+      <ArticlePage year={article_year} />
     </>
   );
 }