Modern Blog Platform

A beautiful, modern blog platform built with Next.js 16 and powered by Cosmic CMS. Features dynamic content display, category filtering, author profiles, and markdown rendering.

Features

• 📝 Dynamic blog post display with featured images
• 👤 Author profiles with bio and social links
• 🏷️ Category-based filtering and navigation
• 📱 Fully responsive mobile-first design
• 🎨 Modern UI with Tailwind CSS
• 🚀 Built with Next.js 16 App Router
• 🔍 SEO-optimized with dynamic metadata
• 📊 Markdown content rendering
• 🖼️ Automatic image optimization with imgix
• ⚡ Server-side rendering for optimal performance

Clone this Project

Want to create your own version of this project with all the content and structure? Clone this Cosmic bucket and code repository to get started instantly:

Prompts

This application was built using the following prompts to generate the content structure and code:

Content Model Prompt

Create a content model for a blog with posts, authors, and categories

Code Generation Prompt

Based on the content model I created for "Create a content model for a blog with posts, authors, and categories", now build a complete web application using Next.js that showcases this content. Include a modern, responsive design with proper navigation, content display, and user-friendly interface.

The app has been tailored to work with your existing Cosmic content structure and includes all the features requested above.

Technologies Used

• Next.js 16 - React framework with App Router
• Cosmic - Headless CMS for content management
• Tailwind CSS - Utility-first CSS framework
• TypeScript - Type-safe development
• React Markdown - Markdown rendering
• Imgix - Image optimization and delivery

Getting Started

Prerequisites

• Node.js 18+ or Bun
• A Cosmic account and bucket with blog content

Installation

1. Clone this repository
2. Install dependencies:

bun install

3. Create a .env.local file with your Cosmic credentials:

COSMIC_BUCKET_SLUG=your-bucket-slug
COSMIC_READ_KEY=your-read-key

4. Run the development server:

bun run dev

5. Open http://localhost:3000 in your browser

Cosmic SDK Examples

Fetching All Posts

import { cosmic } from '@/lib/cosmic'

const { objects: posts } = await cosmic.objects
  .find({ type: 'posts' })
  .props(['id', 'title', 'slug', 'metadata'])
  .depth(1)

Fetching a Single Post by Slug

const { object: post } = await cosmic.objects
  .findOne({
    type: 'posts',
    slug: 'your-post-slug'
  })
  .depth(1)

Filtering Posts by Category

const { objects: posts } = await cosmic.objects
  .find({
    type: 'posts',
    'metadata.categories': categoryId
  })
  .depth(1)

Fetching Author with Posts

const { object: author } = await cosmic.objects
  .findOne({
    type: 'authors',
    slug: 'author-slug'
  })

const { objects: authorPosts } = await cosmic.objects
  .find({
    type: 'posts',
    'metadata.author': author.id
  })
  .depth(1)

Cosmic CMS Integration

This application uses Cosmic's headless CMS to manage all content. The content model includes:

Posts

• Title and slug
• Markdown content
• Featured image
• Author (object relationship)
• Categories (objects relationship)
• Excerpt

Authors

• Name
• Bio
• Avatar image
• Twitter handle
• Website URL

Categories

• Title and slug
• Description

All relationships are loaded using the depth(1) parameter for efficient data fetching. Images are automatically optimized using Cosmic's imgix integration.

Deployment

Deploy to Vercel

1. Click the button above
2. Connect your Git repository
3. Add your environment variables:
   • COSMIC_BUCKET_SLUG
   • COSMIC_READ_KEY
4. Deploy!

Environment Variables

Make sure to set these environment variables in your deployment platform:

COSMIC_BUCKET_SLUG=your-bucket-slug
COSMIC_READ_KEY=your-read-key

Project Structure

├── app/
│   ├── layout.tsx          # Root layout with navigation
│   ├── page.tsx            # Home page with all posts
│   ├── posts/
│   │   └── [slug]/
│   │       └── page.tsx    # Individual post pages
│   ├── authors/
│   │   └── [slug]/
│   │       └── page.tsx    # Author profile pages
│   └── categories/
│       └── [slug]/
│           └── page.tsx    # Category filtered posts
├── components/
│   ├── Header.tsx          # Site header with navigation
│   ├── PostCard.tsx        # Post card component
│   ├── AuthorInfo.tsx      # Author information display
│   ├── CategoryBadge.tsx   # Category badge component
│   └── CosmicBadge.tsx     # "Built with Cosmic" badge
├── lib/
│   └── cosmic.ts           # Cosmic SDK configuration
└── types.ts                # TypeScript type definitions

Learn More

• Cosmic Documentation
• Next.js Documentation
• Tailwind CSS Documentation