feat: add static tag pages

app/posts/[slug]/page.tsx

@@ -4,11 +4,12 @@ import { TableOfContents } from '@/components/blog/TableOfContents'
 import { ScrollToTop } from '@/components/ui/ScrollToTop'
 import { ReadingProgress } from '@/components/ui/ReadingProgress'
 
+export const dynamicParams = false
+export const dynamic = 'force-static'
+export const revalidate = 0
+
 export async function generateStaticParams() {
   const posts = await getPosts()
-  if (posts.length === 0) {
-    return [{ slug: '__placeholder__' }]
-  }
   return posts.map((post) => ({ slug: post.slug }))
 }
 

app/tags/[tag]/page.tsx

@@ -0,0 +1,56 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { PostCard } from '@/components/blog/PostCard'
+import { getAllTags, getPostsByTag } from '@/lib/posts'
+
+type TagPageProps = {
+  params: Promise<{ tag: string }>
+}
+
+export const dynamicParams = false
+export const dynamic = 'force-static'
+export const revalidate = 0
+
+export async function generateStaticParams() {
+  const tags = await getAllTags()
+  return tags.map((tag) => ({ tag: tag.slug }))
+}
+
+export async function generateMetadata({ params }: TagPageProps): Promise<Metadata> {
+  const slug = (await params).tag
+  const tags = await getAllTags()
+  const tag = tags.find((item) => item.slug === slug)
+
+  if (!tag) return { title: 'Not Found' }
+
+  return { title: `${tag.label} posts` }
+}
+
+export default async function TagPage({ params }: TagPageProps) {
+  const slug = (await params).tag
+  const tags = await getAllTags()
+  const tag = tags.find((item) => item.slug === slug)
+
+  if (!tag) notFound()
+
+  const posts = await getPostsByTag(slug)
+
+  return (
+    <main className="max-w-4xl mx-auto px-6 py-12">
+      <header className="mb-12">
+        <p className="font-mono text-sm text-ink-soft mb-3">Tag</p>
+        <h1 className="heading-xl text-ink mb-3">{tag.label}</h1>
+        <p className="text-ink-soft">
+          {tag.count} {tag.count === 1 ? 'post' : 'posts'}
+        </p>
+      </header>
+      <ul className="space-y-8">
+        {posts.map((post, index) => (
+          <li key={post.slug}>
+            <PostCard {...post} index={index} />
+          </li>
+        ))}
+      </ul>
+    </main>
+  )
+}