Logo API for Next.js

// Users fetch logos directly from logos-api CDN
// ✓ No server storage needed
// ✓ No rate limits on your server
// ✓ Global CDN caching (24h)
import Image from 'next/image';

function CompanyLogo({ domain }: { domain: string }) {
  return (
    <Image
      src={`https://logos-api.apistemic.com/domain:${domain}`}
      alt={`${domain} logo`}
      width={64}
      height={64}
      unoptimized // Bypasses Next.js optimization, loads directly from API
    />
  );
}

// Your Next.js server downloads and caches logos
// ✓ WebP/AVIF conversion, smaller file sizes
// ✗ Requires server storage for cached images
// ✗ Your server is rate-limited when fetching many logos
// Best for: Few logos, or pre-downloaded logo sets
import Image from 'next/image';

function CompanyLogo({ domain }: { domain: string }) {
  return (
    <Image
      src={`https://logos-api.apistemic.com/domain:${domain}`}
      alt={`${domain} logo`}
      width={64}
      height={64}
      // No unoptimized prop - Next.js fetches and optimizes
    />
  );
}

// Only needed if NOT using unoptimized prop
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'logos-api.apistemic.com',
      },
    ],
  },
};