Documentation

← Back to Documentation

Configuration

Comprehensive guide to configure and customize your Fireship AI Blog component.

Environment Variables

Required Variables

# Primary API key (required)
NEXT_PUBLIC_FIRESHIP_BLOG_PUBLISHABLE_KEY=fs_your_key_here

Optional Variables

# Server-side API key (optional, same as above)
FIRESHIP_BLOG_API_KEY=fs_your_key_here

# Custom API base URL (optional)
FIRESHIP_BLOG_API_BASE=https://custom-api.example.com/api/blog

Proxy Configuration

Basic Proxy Setup

// app/api/fireship-blog/[...path]/route.ts
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',
});

Advanced Proxy Configuration

const base = createFireshipProxyHandler({
  // Custom API endpoint
  apiBase: process.env.FIRESHIP_BLOG_API_BASE || 'https://fireship.ai/api/blog',
  
  // Dynamic API key resolution
  getApiKey: () => {
    return process.env.FIRESHIP_BLOG_API_KEY || 
           process.env.NEXT_PUBLIC_FIRESHIP_BLOG_PUBLISHABLE_KEY ||
           'fallback_key';
  },
  
  // Multiple allowed origins
  allowOrigin: [
    'http://localhost:3000',
    'https://yourdomain.com',
    'https://preview.yourdomain.com'
  ],
});

Styling Configuration

TailwindCSS Setup

// tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/fireship-ai-blog/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // Custom blog theme colors
      colors: {
        'blog-primary': '#3b82f6',
        'blog-secondary': '#64748b',
      }
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Custom CSS Overrides

/* styles/blog-custom.css */
.fireship-blog {
  --blog-primary: #your-color;
  --blog-secondary: #your-color;
  --blog-background: #your-color;
}

/* Override specific components */
.fireship-blog .post-card {
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.fireship-blog .post-content {
  font-family: 'Your Custom Font', sans-serif;
}

Middleware Configuration

Clerk Integration

// middleware.ts
import { clerkMiddleware } from '@clerk/nextjs/server';

export default clerkMiddleware((auth, req) => {
  // Skip authentication for fireship-blog API routes
  if (req.nextUrl.pathname.startsWith('/api/fireship-blog')) {
    return;
  }
});

export const config = {
  matcher: [
    '/((?!_next|[^?]*\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
};

NextAuth Integration

// middleware.ts
import { withAuth } from 'next-auth/middleware';

export default withAuth(
  function middleware(req) {
    // Skip auth for blog API routes
    if (req.nextUrl.pathname.startsWith('/api/fireship-blog')) {
      return;
    }
  },
  {
    callbacks: {
      authorized: ({ token, req }) => {
        if (req.nextUrl.pathname.startsWith('/api/fireship-blog')) {
          return true; // Allow blog API access
        }
        return !!token;
      },
    },
  }
);

Performance Configuration

Bundle Optimization

// next.config.js
module.exports = {
  experimental: {
    optimizePackageImports: ['fireship-ai-blog'],
  },
  
  // Optimize images
  images: {
    domains: ['fireship.ai', 'images.unsplash.com'],
  },
  
  // Enable compression
  compress: true,
};

Caching Configuration

// app/api/fireship-blog/[...path]/route.ts
export async function GET(req: Request, ctx: any) {
  const response = await base.GET(req, ctx);
  
  // Add caching headers
  response.headers.set('Cache-Control', 'public, s-maxage=300, stale-while-revalidate=600');
  
  return response;
}

Production Configuration

Environment Variables

# Production .env
NEXT_PUBLIC_FIRESHIP_BLOG_PUBLISHABLE_KEY=fs_prod_key_here
FIRESHIP_BLOG_API_KEY=fs_prod_key_here
NODE_ENV=production

Build Optimization

// next.config.js
module.exports = {
  // Enable static optimization
  output: 'standalone',
  
  // Optimize bundle
  experimental: {
    optimizeCss: true,
    optimizePackageImports: ['fireship-ai-blog'],
  },
  
  // Security headers
  async headers() {
    return [
      {
        source: '/api/fireship-blog/:path*',
        headers: [
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
        ],
      },
    ];
  },
};