Modern Blog Platform

A sophisticated blog platform built with Next.js 15 that showcases your content with a clean, modern design. Features category filtering, author profiles, markdown rendering, and a fully responsive layout.

✨ Features

• 📝 Dynamic blog post display with featured images
• 🏷️ Category filtering and navigation
• 👤 Author profile pages with bio and published posts
• 📱 Fully responsive design for all devices
• 🎨 Modern, clean UI with Tailwind CSS
• 🚀 Server-side rendering for optimal SEO
• 📖 Rich markdown content rendering
• 🔍 Individual post pages with full content
• 🎯 Type-safe with TypeScript
• ⚡ Fast performance with Next.js 15

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 that showcases this content. Include a modern, responsive design with proper navigation, content display, and user-friendly interface. Use Next.js 15."

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

🛠️ Technologies Used

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS
• Content: Cosmic CMS
• Language: TypeScript
• Markdown: react-markdown with remark-gfm
• Package Manager: Bun

🚀 Getting Started

Prerequisites

• Bun installed on your machine
• A Cosmic account with bucket credentials

Installation

1. Clone this repository
2. Install dependencies:

bun install

3. Create a .env.local file in the root directory:

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

4. Run the development server:

bun dev

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

📚 Cosmic SDK Examples

Fetching All Posts with Related Data

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

async function getPosts() {
  try {
    const { objects: posts } = await cosmic.objects
      .find({ type: 'posts' })
      .props(['id', 'title', 'slug', 'metadata'])
      .depth(1) // Include author and category data
    
    return posts
  } catch (error) {
    if (error.status === 404) {
      return []
    }
    throw error
  }
}

Fetching Posts by Category

async function getPostsByCategory(categoryId: string) {
  try {
    const { objects: posts } = await cosmic.objects
      .find({ 
        type: 'posts',
        'metadata.category': categoryId
      })
      .props(['id', 'title', 'slug', 'metadata'])
      .depth(1)
    
    return posts
  } catch (error) {
    if (error.status === 404) {
      return []
    }
    throw error
  }
}

Fetching a Single Post by Slug

async function getPost(slug: string) {
  try {
    const { object: post } = await cosmic.objects
      .findOne({
        type: 'posts',
        slug
      })
      .props(['id', 'title', 'slug', 'metadata'])
      .depth(1)
    
    return post
  } catch (error) {
    if (error.status === 404) {
      return null
    }
    throw error
  }
}

🎨 Cosmic CMS Integration

This application uses the following content model:

Posts

• Content (Markdown): Full post content
• Featured Image (File): Post hero image
• Author (Object): Related author object
• Category (Object): Related category object
• Published Date (Date): Publication date

Authors

• Name (Text): Author's full name
• Bio (Textarea): Author biography
• Profile Photo (File): Author headshot
• Email (Text): Contact email
• Twitter (Text): Twitter handle
• LinkedIn (Text): LinkedIn profile URL

Categories

• Name (Text): Category name
• Description (Textarea): Category description
• Icon (File): Category icon image

🚢 Deployment Options

Deploy to Vercel

1. Push your code to GitHub
2. Import your repository in Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Deploy to Netlify

1. Push your code to GitHub
2. Connect your repository in Netlify
3. Add environment variables in Netlify dashboard
4. Deploy!

Environment Variables

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

• COSMIC_BUCKET_SLUG: Your Cosmic bucket slug
• COSMIC_READ_KEY: Your Cosmic read key