Blog Integration

Complete guide for integrating the Fireship AI Blog component into your Next.js application.

Quick Installation

1. Install Package

bash

npm install fireship-ai-blog

2. Install Dependencies

bash

npm install remark remark-gfm remark-html unified lucide-react @tailwindcss/typography

3. Create API Route

Create app/api/fireship-blog/[...path]/route.ts:

tsx

import { createFireshipProxyHandler } from 'fireship-ai-blog';

const base = createFireshipProxyHandler({
  apiBase: 'https://fireship.ai/api/blog',
  getApiKey: () => process.env.NEXT_PUBLIC_FIRESHIP_BLOG_PUBLISHABLE_KEY,
  allowOrigin: 'http://localhost:3000',
  domain: 'your-domain.com' // Your website domain for filtering
});

export async function GET(req: Request, ctx: { params: Promise<{ path?: string[] }> }) {
  const resolved = ctx?.params ? await ctx.params : undefined;
  return base.GET(req, { params: resolved });
}

export function OPTIONS() {
  return base.OPTIONS();
}

4. Basic Integration

Create your blog page at app/blog/page.tsx:

tsx

'use client';

import { FireshipBlog } from 'fireship-ai-blog';

export default function BlogPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-zinc-50 to-zinc-100 dark:from-zinc-900 dark:to-zinc-950">
      <div className="container mx-auto px-4 py-12">
        <FireshipBlog className="max-w-6xl mx-auto" />
      </div>
    </div>
  );
}

Domain Filtering: The domain parameter in your API route ensures only blog posts from campaigns matching your website domain are displayed.

Advanced Integration Options

Custom Styling

tsx

import { FireshipBlog } from 'fireship-ai-blog';

export default function BlogPage() {
  return (
    <div className="min-h-screen">
      <FireshipBlog 
        className="max-w-6xl mx-auto p-8"
        style={{
          '--blog-primary': '#3b82f6',
          '--blog-background': '#f8fafc',
        }}
      />
    </div>
  );
}

Integration with Existing Layout

tsx

import { FireshipBlog } from 'fireship-ai-blog';
import Header from '@/components/Header';
import Footer from '@/components/Footer';

export default function BlogPage() {
  return (
    <>
      <Header />
      <main className="container mx-auto px-4 py-12">
        <FireshipBlog className="max-w-6xl mx-auto" />
      </main>
      <Footer />
    </>
  );
}

Component Props

Prop	Type	Default	Description
`className`	`string`	`''`	Additional CSS classes
`apiKey`	`string`	`undefined`	Override environment API key
`domain`	`string`	`undefined`	Website domain for filtering posts (configured in API route)

Features

✅Self-contained navigation - Handles blog list and individual posts

✅URL state management - Shareable post URLs with query parameters

✅Glass morphism design - Modern Apple-style UI

✅Dark/light mode - Automatic theme detection

✅Responsive layout - Mobile-first design

✅SEO optimized - Proper meta tags and structure

✅Markdown rendering - Rich content with syntax highlighting

✅Image optimization - Automatic image loading and optimization

Browser Support & Performance

Browser Support

✅Chrome 90+

✅Firefox 88+

✅Safari 14+

✅Edge 90+

Performance

Bundle size: ~240KB (gzipped)

First load: ~500ms

Navigation: ~100ms

Core Web Vitals: Optimized

Documentation