Blog System

Overview

The marketing site includes a complete blog system powered by Sanity CMS with server-side rendering, pagination, and search functionality.

Architecture

Sanity CMS → GROQ Queries → Next.js Server Components → Client Components

Content Types

Posts

• Rich text content with Portable Text
• Author relationships
• Category assignments
• Featured images and metadata

Authors

• Profile information and bios
• Post count and specialties
• Avatar images

Categories

• Content organization
• Post count tracking
• Related category suggestions

Pages

Blog Listing (/blog)

• Paginated post grid
• Search and category filtering
• Server-side pagination

Category Pages (/blog/category)

• Category listing with stats
• Individual category pages with posts
• Related categories

Author Pages (/blog/author)

• Author listing with pagination
• Individual author profiles
• Author's post listings

Development

Adding New Content Types

1. Define Schema: Add to Sanity schema
2. Create Resource: Add utility functions in src/utils/blog/
3. Add Types: Update TypeScript types
4. Create Components: Build UI components
5. Add Pages: Create Next.js pages

Server-Side Data Fetching

// Use server pagination utilities
import { getPostsPageData } from '@/utils/blog/server-pagination-posts'

export default async function BlogPage({ searchParams }) {
  const { posts, pagination, error } = await getPostsPageData({
    page: parseInt(searchParams.page || '1'),
    search: searchParams.search || '',
    category: searchParams.category || 'all'
  })

  return <BlogPostsGrid posts={posts} />
}

Client Components

// Search and filtering
'use client'
import { useDebounce } from '@/hooks/use-debounce'

export function BlogSearchAndFilter() {
  const { isLoading } = useDebounce(searchTerm, { delay: 500 }, (debouncedValue) => {
    // Update URL with search params
  })
}

Content Management

Sanity Studio

• Access at /studio route
• Environment-specific datasets
• Real-time preview

Environment Variables

SANITY_STUDIO_PROJECT_ID="jr3qdqox"
SANITY_STUDIO_DATASET="dev"
SANITY_STUDIO_HOST="dev-jubiloop"

Performance

• Server-Side Rendering: All pages use Next.js server components
• Caching: React.cache for efficient data fetching
• Pagination: Server-side pagination reduces load times
• Image Optimization: Sanity CDN with Next.js Image component

SEO

• Metadata: Dynamic meta tags for all pages
• Structured Data: JSON-LD for blog content
• URL Structure: Clean, SEO-friendly URLs
• Sitemap: Automatic sitemap generation