Next.js Integration

export default function CompaniesPage() {
  return (
    <img
      src="https://logos.getquikturn.io/stripe.com?token=pk_abc123&size=128"
      alt="Stripe"
      loading="lazy"
    />
  );
}

import Image from 'next/image';

export default function CompaniesPage() {
  const token = process.env.NEXT_PUBLIC_QUIKTURN_PUBLISHABLE_KEY;
  return (
    <Image
      src={`https://logos.getquikturn.io/stripe.com?token=${token}&size=128`}
      alt="Stripe"
      width={128}
      height={128}
      unoptimized // CDN already optimizes
    />
  );
}

npm install @quikturn/logos-react

// app/providers.tsx (client component)
"use client";
import { QuikturnProvider } from "@quikturn/logos-react";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QuikturnProvider token={process.env.NEXT_PUBLIC_QUIKTURN_KEY!}>
      {children}
    </QuikturnProvider>
  );
}

// app/companies/page.tsx
"use client";
import { QuikturnLogo, QuikturnLogoGrid } from "@quikturn/logos-react";

export default function CompaniesPage() {
  return (
    <div>
      <QuikturnLogo domain="stripe.com" size={128} />

      <QuikturnLogoGrid
        domains={["apple.com", "google.com", "stripe.com", "github.com"]}
        columns={4}
        size={64}
      />
    </div>
  );
}

npm install @quikturn/logos

// app/api/logo/[domain]/route.ts
import { QuikturnLogos } from "@quikturn/logos/server";
import { NextResponse } from "next/server";

const client = new QuikturnLogos({
  secretKey: process.env.QT_SECRET_KEY!,
});

export async function GET(
  _req: Request,
  { params }: { params: { domain: string } }
) {
  const { buffer, contentType } = await client.get(params.domain, { size: 512 });

  return new NextResponse(buffer, {
    headers: {
      "Content-Type": contentType,
      "Cache-Control": "public, max-age=86400",
    },
  });
}

// app/actions/logos.ts
"use server";
import { QuikturnLogos } from "@quikturn/logos/server";

const client = new QuikturnLogos({
  secretKey: process.env.QT_SECRET_KEY!,
});

export async function fetchLogos(domains: string[]) {
  const results: { domain: string; success: boolean }[] = [];

  for await (const result of client.getMany(domains)) {
    results.push({ domain: result.domain, success: result.success });
  }

  return results;
}