add category/tag archive support

README.md

@@ -17,6 +17,7 @@ Please consider it a starting point for your next headless WordPress project.
   - Previews
   - Static Site Generation (SSG)
   - On-demand Revalidation
+  - Category and Tag Archives
   - Custom Post Types
   - Custom Fields
   - Comments

app/blog/[slug]/page.tsx

@@ -3,6 +3,7 @@ import getAllPosts from '@/lib/queries/getAllPosts'
 import getPostBySlug from '@/lib/queries/getPostBySlug'
 import {Metadata} from 'next'
 import Image from 'next/image'
+import Link from 'next/link'
 import {notFound} from 'next/navigation'
 
 /**
@@ -78,7 +79,9 @@ export default async function Post({params}: {params: {slug: string}}) {
           <ul className="m-0 flex list-none gap-2 p-0">
             {post.categories.nodes.map((category) => (
               <li className="m-0 p-0" key={category.databaseId}>
-                {category.name}
+                <Link href={`/blog/category/${category.name}`}>
+                  {category.name}
+                </Link>
               </li>
             ))}
           </ul>
@@ -89,7 +92,7 @@ export default async function Post({params}: {params: {slug: string}}) {
           <ul className="m-0 flex list-none gap-2 p-0">
             {post.tags.nodes.map((tag) => (
               <li className="m-0 p-0" key={tag.databaseId}>
-                {tag.name}
+                <Link href={`/blog/tag/${tag.name}`}>{tag.name}</Link>
               </li>
             ))}
           </ul>

app/blog/category/[slug]/page.tsx

@@ -0,0 +1,72 @@
+import config from '@/lib/config'
+import getCategoryBySlug from '@/lib/queries/getCategoryBySlug'
+import {Metadata} from 'next'
+import Image from 'next/image'
+import Link from 'next/link'
+import {notFound} from 'next/navigation'
+
+/**
+ * Generate the metadata for each static route at build time.
+ *
+ * @see https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
+ */
+export async function generateMetadata({
+  params
+}: {
+  params: {slug: string}
+}): Promise<Metadata | null> {
+  const slug = params.slug
+
+  return {
+    title: `${slug} Archives - ${config.siteName}`,
+    description: `The post archive for ${slug}`
+  }
+}
+
+/**
+ * The category archive route.
+ *
+ * @see https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages
+ */
+export default async function CategoryArchive({
+  params
+}: {
+  params: {slug: string}
+}) {
+  // Fetch posts from WordPress.
+  const posts = await getCategoryBySlug(params.slug)
+
+  // No posts? Bail...
+  if (!posts) {
+    notFound()
+  }
+
+  return (
+    <main className="flex flex-col gap-8">
+      <h1 className="capitalize">Post Category: {params.slug}</h1>
+      <div className="flex flex-wrap gap-8">
+        {posts.map((post) => (
+          <article className="w-72" key={post.databaseId}>
+            <Image
+              alt={post.featuredImage.node.altText}
+              height={post.featuredImage.node.mediaDetails.height}
+              src={post.featuredImage.node.sourceUrl}
+              width={post.featuredImage.node.mediaDetails.width}
+              priority={true}
+            />
+            <Link href={`/blog/${post.slug}`}>
+              <h2 dangerouslySetInnerHTML={{__html: post.title}} />
+            </Link>
+            <p className="text-sm text-gray-500">
+              {post.commentCount} Comments
+            </p>
+            <div dangerouslySetInnerHTML={{__html: post.excerpt}} />
+            <Link className="button" href={`/blog/${post.slug}`}>
+              View Post
+            </Link>
+          </article>
+        ))}
+      </div>
+    </main>
+  )
+}

app/blog/tag/[slug]/page.tsx

@@ -0,0 +1,68 @@
+import config from '@/lib/config'
+import getTagBySlug from '@/lib/queries/getTagBySlug'
+import {Metadata} from 'next'
+import Image from 'next/image'
+import Link from 'next/link'
+import {notFound} from 'next/navigation'
+
+/**
+ * Generate the metadata for each static route at build time.
+ *
+ * @see https://nextjs.org/docs/app/api-reference/functions/generate-metadata#generatemetadata-function
+ */
+export async function generateMetadata({
+  params
+}: {
+  params: {slug: string}
+}): Promise<Metadata | null> {
+  const slug = params.slug
+
+  return {
+    title: `${slug} Archives - ${config.siteName}`,
+    description: `The post archive for ${slug}`
+  }
+}
+
+/**
+ * The tag archive route.
+ *
+ * @see https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#pages
+ */
+export default async function TagArchive({params}: {params: {slug: string}}) {
+  // Fetch posts from WordPress.
+  const posts = await getTagBySlug(params.slug)
+
+  // No posts? Bail...
+  if (!posts) {
+    notFound()
+  }
+
+  return (
+    <main className="flex flex-col gap-8">
+      <h1 className="capitalize">Post Category: {params.slug}</h1>
+      <div className="flex flex-wrap gap-8">
+        {posts.map((post) => (
+          <article className="w-72" key={post.databaseId}>
+            <Image
+              alt={post.featuredImage.node.altText}
+              height={post.featuredImage.node.mediaDetails.height}
+              src={post.featuredImage.node.sourceUrl}
+              width={post.featuredImage.node.mediaDetails.width}
+              priority={true}
+            />
+            <Link href={`/blog/${post.slug}`}>
+              <h2 dangerouslySetInnerHTML={{__html: post.title}} />
+            </Link>
+            <p className="text-sm text-gray-500">
+              {post.commentCount} Comments
+            </p>
+            <div dangerouslySetInnerHTML={{__html: post.excerpt}} />
+            <Link className="button" href={`/blog/${post.slug}`}>
+              View Post
+            </Link>
+          </article>
+        ))}
+      </div>
+    </main>
+  )
+}

lib/queries/getCategoryBySlug.ts

@@ -0,0 +1,46 @@
+import {fetchGraphQL} from '@/lib/functions'
+import {Post} from '@/lib/types'
+
+/**
+ * Fetch a category archive by slug.
+ */
+export default async function getCategoryBySlug(
+  slug: string,
+  limit: number = 10
+) {
+  const query = `
+    query GetCategoryBySlug($slug: String!) {
+      posts(where: {categoryName: $slug, status: PUBLISH}, first: ${limit}) {
+        nodes {
+          databaseId
+          date
+          excerpt(format: RENDERED)
+          title(format: RENDERED)
+          featuredImage {
+            node {
+              altText
+              sourceUrl
+              mediaDetails {
+                  height
+                  width
+              }
+            }
+          }
+          seo {
+            metaDesc
+            title
+          }
+          slug
+        }
+      }
+    }
+  `
+
+  const variables = {
+    slug: slug
+  }
+
+  const response = await fetchGraphQL(query, variables)
+
+  return response.data.posts.nodes as Post[]
+}

lib/queries/getTagBySlug.ts

@@ -0,0 +1,43 @@
+import {fetchGraphQL} from '@/lib/functions'
+import {Post} from '@/lib/types'
+
+/**
+ * Fetch a tag archive by slug.
+ */
+export default async function getTagBySlug(slug: string, limit: number = 10) {
+  const query = `
+    query GetTagBySlug($slug: String!) {
+      posts(where: {tag: $slug, status: PUBLISH}, first: ${limit}) {
+        nodes {
+          databaseId
+          date
+          excerpt(format: RENDERED)
+          title(format: RENDERED)
+          featuredImage {
+            node {
+              altText
+              sourceUrl
+              mediaDetails {
+                  height
+                  width
+              }
+            }
+          }
+          seo {
+            metaDesc
+            title
+          }
+          slug
+        }
+      }
+    }
+  `
+
+  const variables = {
+    slug: slug
+  }
+
+  const response = await fetchGraphQL(query, variables)
+
+  return response.data.posts.nodes as Post[]
+}