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>
+  );
+}
+

components/post-list-item.tsx

@@ -43,12 +43,13 @@ export function PostListItem({ post }: Props) {
             {post.tags && post.tags.length > 0 && (
               <div className="flex flex-wrap gap-2 pt-0.5">
                 {post.tags.slice(0, 4).map((t) => (
-                  <span
+                  <Link
                     key={t}
-                    className="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] text-slate-600 group-hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:group-hover:bg-slate-700"
+                    href={`/tags/${encodeURIComponent(t)}`}
+                    className="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] text-slate-600 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
                   >
                     #{t}
-                  </span>
+                  </Link>
                 ))}
               </div>
             )}

components/right-sidebar.tsx

@@ -47,12 +47,13 @@ export function RightSidebar() {
               else if (count >= 3) sizeClass = 'text-xs font-medium';
 
               return (
-                <span
+                <Link
                   key={tag}
-                  className={`${sizeClass} rounded-full bg-slate-100 px-2 py-0.5 text-slate-700 dark:bg-slate-800 dark:text-slate-200`}
+                  href={`/tags/${encodeURIComponent(tag)}`}
+                  className={`${sizeClass} rounded-full bg-slate-100 px-2 py-0.5 text-slate-700 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700`}
                 >
                   {tag}
-                </span>
+                </Link>
               );
             })}
           </div>