Stabilize tag URLs using slugs instead of raw tag text

app/blog/[slug]/page.tsx

@@ -58,7 +58,9 @@ export default function BlogPostPage({ params }: Props) {
                 {post.tags.map((t) => (
                   <Link
                     key={t}
-                    href={`/tags/${encodeURIComponent(t)}`}
+                    href={`/tags/${encodeURIComponent(
+                      t.toLowerCase().replace(/\s+/g, '-')
+                    )}`}
                     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}

app/tags/[tag]/page.tsx

@@ -1,17 +1,18 @@
 import type { Metadata } from 'next';
 import { allPosts } from 'contentlayer/generated';
 import { PostListItem } from '@/components/post-list-item';
+import { getTagSlug } from '@/lib/posts';
 
 export function generateStaticParams() {
-  const tags = new Set<string>();
+  const slugs = new Set<string>();
   for (const post of allPosts) {
     if (!post.tags) continue;
     for (const tag of post.tags) {
-      tags.add(tag);
+      slugs.add(getTagSlug(tag));
     }
   }
-  return Array.from(tags).map((tag) => ({
-    tag
+  return Array.from(slugs).map((slug) => ({
+    tag: slug
   }));
 }
 
@@ -20,23 +21,31 @@ interface Props {
 }
 
 export function generateMetadata({ params }: Props): Metadata {
-  const tag = params.tag;
+  const slug = params.tag;
+  // Find original tag label by slug
+  const tag = allPosts
+    .flatMap((post) => post.tags ?? [])
+    .find((t) => getTagSlug(t) === slug);
+
   return {
-    title: `標籤：${tag}`
+    title: tag ? `標籤：${tag}` : '標籤'
   };
 }
 
 export default function TagPage({ params }: Props) {
-  const tag = params.tag;
+  const slug = params.tag;
 
   const posts = allPosts.filter(
-    (post) => post.tags && post.tags.includes(tag)
+    (post) => post.tags && post.tags.some((t) => getTagSlug(t) === slug)
   );
 
+  const tagLabel =
+    posts[0]?.tags?.find((t) => getTagSlug(t) === slug) ?? params.tag;
+
   return (
     <section className="space-y-4">
       <h1 className="text-lg font-semibold text-slate-900 dark:text-slate-50">
-        標籤：{tag}
+        標籤：{tagLabel}
       </h1>
       <ul className="space-y-3">
         {posts.map((post) => (
@@ -46,4 +55,3 @@ export default function TagPage({ params }: Props) {
     </section>
   );
 }
-

components/post-list-item.tsx

@@ -45,7 +45,9 @@ export function PostListItem({ post }: Props) {
                 {post.tags.slice(0, 4).map((t) => (
                   <Link
                     key={t}
-                    href={`/tags/${encodeURIComponent(t)}`}
+                    href={`/tags/${encodeURIComponent(
+                      t.toLowerCase().replace(/\s+/g, '-')
+                    )}`}
                     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}

components/right-sidebar.tsx

@@ -41,7 +41,7 @@ export function RightSidebar() {
             標籤雲
           </h2>
           <div className="mt-2 flex flex-wrap gap-2 text-xs">
-            {tags.map(({ tag, count }) => {
+            {tags.map(({ tag, slug, count }) => {
               let sizeClass = 'text-[11px]';
               if (count >= 5) sizeClass = 'text-sm font-semibold';
               else if (count >= 3) sizeClass = 'text-xs font-medium';
@@ -49,7 +49,7 @@ export function RightSidebar() {
               return (
                 <Link
                   key={tag}
-                  href={`/tags/${encodeURIComponent(tag)}`}
+                  href={`/tags/${slug}`}
                   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}

lib/posts.ts

@@ -26,7 +26,11 @@ export function getPageBySlug(slug: string): Page | undefined {
   );
 }
 
-export function getAllTagsWithCount(): { tag: string; count: number }[] {
+export function getTagSlug(tag: string): string {
+  return encodeURIComponent(tag.toLowerCase().replace(/\s+/g, '-'));
+}
+
+export function getAllTagsWithCount(): { tag: string; slug: string; count: number }[] {
   const map = new Map<string, number>();
 
   for (const post of allPosts) {
@@ -37,7 +41,7 @@ export function getAllTagsWithCount(): { tag: string; count: number }[] {
   }
 
   return Array.from(map.entries())
-    .map(([tag, count]) => ({ tag, count }))
+    .map(([tag, count]) => ({ tag, slug: getTagSlug(tag), count }))
     .sort((a, b) => {
       if (b.count === a.count) return a.tag.localeCompare(b.tag);
       return b.count - a.count;