Link tags to tag pages and add tag overview

app/blog/[slug]/page.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { notFound } from 'next/navigation';
 import type { Metadata } from 'next';
 import { allPosts } from 'contentlayer/generated';
@@ -55,12 +56,13 @@ export default function BlogPostPage({ params }: Props) {
             {post.tags && (
               <div className="flex flex-wrap gap-2 pt-1">
                 {post.tags.map((t) => (
-                  <span
+                  <Link
                     key={t}
-                    className="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700 dark:bg-slate-800 dark:text-slate-300"
+                    href={`/tags/${encodeURIComponent(t)}`}
+                    className="rounded-full bg-slate-100 px-2 py-0.5 text-xs text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
                   >
                     #{t}
-                  </span>
+                  </Link>
                 ))}
               </div>
             )}

app/tags/[tag]/page.tsx

@@ -0,0 +1,49 @@
+import type { Metadata } from 'next';
+import { allPosts } from 'contentlayer/generated';
+import { PostListItem } from '@/components/post-list-item';
+
+export function generateStaticParams() {
+  const tags = new Set<string>();
+  for (const post of allPosts) {
+    if (!post.tags) continue;
+    for (const tag of post.tags) {
+      tags.add(tag);
+    }
+  }
+  return Array.from(tags).map((tag) => ({
+    tag
+  }));
+}
+
+interface Props {
+  params: { tag: string };
+}
+
+export function generateMetadata({ params }: Props): Metadata {
+  const tag = params.tag;
+  return {
+    title: `標籤：${tag}`
+  };
+}
+
+export default function TagPage({ params }: Props) {
+  const tag = params.tag;
+
+  const posts = allPosts.filter(
+    (post) => post.tags && post.tags.includes(tag)
+  );
+
+  return (
+    <section className="space-y-4">
+      <h1 className="text-lg font-semibold text-slate-900 dark:text-slate-50">
+        標籤：{tag}
+      </h1>
+      <ul className="space-y-3">
+        {posts.map((post) => (
+          <PostListItem key={post._id} post={post} />
+        ))}
+      </ul>
+    </section>
+  );
+}
+