@quikturn/logos-next 1.0.0

package/README.md

@@ -0,0 +1,262 @@
+# @quikturn/logos-next
+
+> Next.js components for the [Quikturn Logos API](https://getquikturn.io) -- `<QuikturnImage>` with `next/image` integration, image loaders, and server helpers.
+
+**[Get your API key](https://getquikturn.io)** -- free tier available, no credit card required.
+
+## Features
+
+- **`<QuikturnImage>`** -- `next/image` wrapper that renders a Quikturn logo with automatic optimization
+- **`quikturnImageLoader`** -- basic Next.js image loader for the Logos API
+- **`createQuikturnImageLoader()`** -- factory for pre-configured image loaders with token, format, theme
+- **`<QuikturnProvider>`** -- context provider for token and base URL propagation
+- **Server helpers** -- `getServerClient()` and `getLogoBuffer()` for API routes and server components
+- **Re-exports** -- all `@quikturn/logos-react` components (`QuikturnLogo`, `QuikturnLogoCarousel`, `QuikturnLogoGrid`, `useLogoUrl`)
+- **Tree-shakeable** -- ESM and CJS dual builds; import only what you use
+
+## Installation
+
+```bash
+# pnpm (recommended)
+pnpm add @quikturn/logos-next @quikturn/logos @quikturn/logos-react next react react-dom
+
+# npm
+npm install @quikturn/logos-next @quikturn/logos @quikturn/logos-react next react react-dom
+```
+
+**Peer dependencies:** `next >= 14`, `react >= 18`, `react-dom >= 18`
+
+## Quick Start
+
+```tsx
+import { QuikturnProvider, QuikturnImage } from "@quikturn/logos-next";
+
+export default function Page() {
+  return (
+    <QuikturnProvider token="qt_your_publishable_key">
+      <QuikturnImage domain="github.com" width={128} height={128} alt="GitHub" />
+    </QuikturnProvider>
+  );
+}
+```
+
+## API Reference
+
+### `<QuikturnImage>`
+
+A `next/image` wrapper that renders a Quikturn logo for the given domain. Automatically constructs a custom `loader`, fires an attribution beacon on mount, and reads a token from `<QuikturnProvider>` context when available.
+
+```tsx
+<QuikturnImage
+  domain="stripe.com"
+  width={256}
+  height={256}
+  format="webp"
+  greyscale
+  theme="dark"
+  alt="Stripe"
+  priority
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `domain` | `string` | **required** | Domain to fetch logo for |
+| `token` | `string` | from context | Publishable API key (`qt_`/`pk_` prefix) |
+| `format` | `string` | -- | Output format (`"png"`, `"jpeg"`, `"webp"`, `"avif"`, or MIME type) |
+| `greyscale` | `boolean` | `false` | Greyscale transformation |
+| `theme` | `"light" \| "dark"` | -- | Background-optimized rendering |
+| `width` | `number` | **required** | Image width in pixels (from `next/image`) |
+| `height` | `number` | **required** | Image height in pixels (from `next/image`) |
+| `alt` | `string` | `"<domain> logo"` | Image alt text |
+| `priority` | `boolean` | `false` | Disable lazy loading (from `next/image`) |
+| ...rest | `ImageProps` | -- | All other `next/image` props are forwarded |
+
+---
+
+### `quikturnImageLoader`
+
+Basic image loader compatible with `next/image`. Converts a domain + width into a Logos API URL without any pre-configured options.
+
+```tsx
+import Image from "next/image";
+import { quikturnImageLoader } from "@quikturn/logos-next";
+
+<Image
+  loader={quikturnImageLoader}
+  src="github.com"
+  width={256}
+  height={256}
+  alt="GitHub"
+/>
+```
+
+---
+
+### `createQuikturnImageLoader(options)`
+
+Factory that creates a pre-configured image loader with baked-in token, format, theme, and other options.
+
+```tsx
+import Image from "next/image";
+import { createQuikturnImageLoader } from "@quikturn/logos-next";
+
+const loader = createQuikturnImageLoader({
+  token: "qt_abc123",
+  format: "webp",
+  greyscale: true,
+});
+
+<Image loader={loader} src="github.com" width={256} height={256} alt="GitHub" />
+```
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `token` | `string` | Publishable API key |
+| `format` | `string` | Output format |
+| `greyscale` | `boolean` | Greyscale transformation |
+| `theme` | `"light" \| "dark"` | Theme optimization |
+| `baseUrl` | `string` | Override the Quikturn API base URL |
+
+---
+
+### `<QuikturnProvider>`
+
+Provides `token` and `baseUrl` to all nested `QuikturnImage` components via React Context.
+
+```tsx
+<QuikturnProvider token="qt_abc123" baseUrl="https://custom.api">
+  {children}
+</QuikturnProvider>
+```
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `token` | `string` | yes | Publishable API key (`qt_`/`pk_` prefix) |
+| `baseUrl` | `string` | no | Override the Quikturn API base URL |
+| `children` | `ReactNode` | yes | Child components |
+
+---
+
+### Server Helpers
+
+Import from `@quikturn/logos-next/server` for use in API routes and server components. This entry point is gated by `server-only` and will throw at build time if imported in client code.
+
+#### `getServerClient()`
+
+Returns a singleton `QuikturnLogos` server client. Reads the `QUIKTURN_SECRET_KEY` environment variable on first call and caches the instance.
+
+#### `getLogoBuffer(domain, options?)`
+
+Convenience wrapper that fetches a logo buffer using the cached server client.
+
+```ts
+// app/api/logo/route.ts
+import { getLogoBuffer } from "@quikturn/logos-next/server";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const domain = searchParams.get("domain") ?? "example.com";
+
+  const result = await getLogoBuffer(domain, { format: "image/webp" });
+
+  return new Response(result.buffer, {
+    headers: { "Content-Type": result.contentType },
+  });
+}
+```
+
+**Environment variable required:** `QUIKTURN_SECRET_KEY` (set in `.env.local` or your deployment environment).
+
+---
+
+## Re-exported Components
+
+The following are re-exported from `@quikturn/logos-react` for convenience, so you can import everything from a single package:
+
+- **`<QuikturnLogo>`** -- single logo image with lazy loading and optional link wrapper
+- **`<QuikturnLogoCarousel>`** -- infinite scrolling logo ticker
+- **`<QuikturnLogoGrid>`** -- responsive CSS grid of logos
+- **`useLogoUrl()`** -- hook that returns a memoized Quikturn logo URL
+
+See the [@quikturn/logos-react README](https://www.npmjs.com/package/@quikturn/logos-react) for full documentation on these components.
+
+---
+
+## Examples
+
+### Logo Grid with Next.js Image Optimization
+
+```tsx
+import { QuikturnProvider, QuikturnImage } from "@quikturn/logos-next";
+
+const PARTNERS = ["github.com", "stripe.com", "vercel.com", "figma.com"];
+
+export default function Partners() {
+  return (
+    <QuikturnProvider token="qt_your_key">
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
+        {PARTNERS.map((domain) => (
+          <QuikturnImage key={domain} domain={domain} width={128} height={128} alt={domain} />
+        ))}
+      </div>
+    </QuikturnProvider>
+  );
+}
+```
+
+### Custom Loader with Global Config
+
+```tsx
+// lib/quikturn-loader.ts
+import { createQuikturnImageLoader } from "@quikturn/logos-next";
+
+export const logoLoader = createQuikturnImageLoader({
+  token: process.env.NEXT_PUBLIC_QUIKTURN_KEY!,
+  format: "webp",
+});
+
+// app/page.tsx
+import Image from "next/image";
+import { logoLoader } from "@/lib/quikturn-loader";
+
+export default function Page() {
+  return <Image loader={logoLoader} src="github.com" width={64} height={64} alt="GitHub" />;
+}
+```
+
+### Server-Side Logo Proxy
+
+```ts
+// app/api/logo/[domain]/route.ts
+import { getLogoBuffer } from "@quikturn/logos-next/server";
+
+export async function GET(
+  _request: Request,
+  { params }: { params: { domain: string } },
+) {
+  const result = await getLogoBuffer(params.domain, {
+    format: "image/png",
+    size: 256,
+  });
+
+  return new Response(result.buffer, {
+    headers: {
+      "Content-Type": result.contentType,
+      "Cache-Control": "public, max-age=86400",
+    },
+  });
+}
+```
+
+## Resources
+
+- **[Quikturn website](https://getquikturn.io)** -- sign up, manage keys, explore the API
+- **[Dashboard](https://getquikturn.io/dashboard)** -- usage analytics, key management, plan upgrades
+- **[Pricing](https://getquikturn.io/pricing)** -- free tier, pro, and enterprise plans
+- **[Core SDK docs](https://www.npmjs.com/package/@quikturn/logos)** -- `@quikturn/logos` URL builder, browser client, server client
+- **[React SDK docs](https://www.npmjs.com/package/@quikturn/logos-react)** -- `@quikturn/logos-react` components and hooks
+
+## License
+
+MIT -- built by [Quikturn](https://getquikturn.io)

package/dist/index.cjs

@@ -0,0 +1,101 @@
+'use strict';
+
+var Image2 = require('next/image');
+var logos = require('@quikturn/logos');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var logosReact = require('@quikturn/logos-react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Image2__default = /*#__PURE__*/_interopDefault(Image2);
+
+var fired = /* @__PURE__ */ new Set();
+function fireBeacon(token) {
+  if (typeof window === "undefined") return;
+  if (!token || token.startsWith("sk_")) return;
+  if (fired.has(token)) return;
+  fired.add(token);
+  const img = new Image();
+  img.src = `${logos.BASE_URL}/_beacon?token=${token}&page=${encodeURIComponent(location.href)}`;
+}
+var QuikturnContext = react.createContext(null);
+function useQuikturnContext() {
+  return react.useContext(QuikturnContext);
+}
+function QuikturnProvider({
+  token,
+  baseUrl,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(QuikturnContext.Provider, { value: { token, baseUrl }, children });
+}
+function QuikturnImage({
+  domain,
+  token,
+  format,
+  greyscale,
+  theme,
+  alt,
+  ...imageProps
+}) {
+  const ctx = useQuikturnContext();
+  const effectiveToken = token ?? ctx?.token ?? "";
+  const loader = react.useMemo(
+    () => ({ src, width }) => logos.logoUrl(src, {
+      token: effectiveToken || void 0,
+      size: width,
+      format,
+      greyscale,
+      theme
+    }),
+    [effectiveToken, format, greyscale, theme]
+  );
+  react.useEffect(() => {
+    if (effectiveToken) fireBeacon(effectiveToken);
+  }, [effectiveToken]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Image2__default.default,
+    {
+      ...imageProps,
+      src: domain,
+      loader,
+      alt: alt ?? `${domain} logo`
+    }
+  );
+}
+function quikturnImageLoader({ src, width }) {
+  return logos.logoUrl(src, { size: width });
+}
+function createQuikturnImageLoader(options) {
+  return ({ src, width }) => logos.logoUrl(src, {
+    token: options.token,
+    size: width,
+    format: options.format,
+    greyscale: options.greyscale,
+    theme: options.theme,
+    baseUrl: options.baseUrl
+  });
+}
+
+Object.defineProperty(exports, "QuikturnLogo", {
+  enumerable: true,
+  get: function () { return logosReact.QuikturnLogo; }
+});
+Object.defineProperty(exports, "QuikturnLogoCarousel", {
+  enumerable: true,
+  get: function () { return logosReact.QuikturnLogoCarousel; }
+});
+Object.defineProperty(exports, "QuikturnLogoGrid", {
+  enumerable: true,
+  get: function () { return logosReact.QuikturnLogoGrid; }
+});
+Object.defineProperty(exports, "useLogoUrl", {
+  enumerable: true,
+  get: function () { return logosReact.useLogoUrl; }
+});
+exports.QuikturnImage = QuikturnImage;
+exports.QuikturnProvider = QuikturnProvider;
+exports.createQuikturnImageLoader = createQuikturnImageLoader;
+exports.quikturnImageLoader = quikturnImageLoader;
+exports.useQuikturnContext = useQuikturnContext;

package/dist/index.d.cts

@@ -0,0 +1,115 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImageProps } from 'next/image';
+import { LogoRequestOptions } from '@quikturn/logos';
+export { LogoConfig, LogoOptions, QuikturnLogo, QuikturnLogoCarousel, QuikturnLogoCarouselProps, QuikturnLogoGrid, QuikturnLogoGridProps, QuikturnLogoProps, ResolvedLogo, useLogoUrl } from '@quikturn/logos-react';
+
+/**
+ * Props accepted by the `QuikturnImage` component.
+ *
+ * Extends all `next/image` props except `src` and `loader` (which are
+ * derived from the `domain` and logo-specific options).
+ */
+interface QuikturnImageProps extends Omit<ImageProps, "src" | "loader"> {
+    /** The domain to fetch a logo for (e.g. "github.com"). */
+    domain: string;
+    /** Publishable API token (qt_ / pk_ prefix). Overrides context token. */
+    token?: string;
+    /** Output image format. */
+    format?: LogoRequestOptions["format"];
+    /** When true, returns a greyscale logo. */
+    greyscale?: boolean;
+    /** Theme adjustment ("light" or "dark"). */
+    theme?: LogoRequestOptions["theme"];
+}
+/**
+ * Next.js `<Image>` wrapper that renders a Quikturn logo for the given domain.
+ *
+ * Automatically constructs a custom `loader` using `logoUrl()` from
+ * `@quikturn/logos`, fires an attribution beacon on mount, and supports
+ * reading a token from `<QuikturnProvider>` context.
+ *
+ * @example
+ * ```tsx
+ * <QuikturnImage domain="github.com" token="qt_abc" width={128} height={128} alt="GitHub" />
+ * ```
+ */
+declare function QuikturnImage({ domain, token, format, greyscale, theme, alt, ...imageProps }: QuikturnImageProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props matching the Next.js `ImageLoaderProps` interface from `next/image`.
+ *
+ * - `src`     - The domain string (or image source) passed by Next.js.
+ * - `width`   - The resolved width in pixels requested by Next.js.
+ * - `quality` - Optional quality hint (unused by the Logos API, included for compatibility).
+ */
+interface ImageLoaderProps {
+    src: string;
+    width: number;
+    quality?: number;
+}
+/**
+ * Options for configuring a Quikturn image loader factory.
+ *
+ * These options are "baked in" to the returned loader function so they
+ * don't need to be supplied on every call.
+ */
+interface QuikturnImageLoaderOptions {
+    token?: string;
+    format?: LogoRequestOptions["format"];
+    greyscale?: boolean;
+    theme?: LogoRequestOptions["theme"];
+    baseUrl?: string;
+}
+/**
+ * Basic Quikturn image loader compatible with Next.js `next/image`.
+ *
+ * Converts a domain + width into a Logos API URL. Does not inject a token
+ * or any additional options -- use {@link createQuikturnImageLoader} for that.
+ *
+ * @example
+ * ```tsx
+ * import Image from "next/image";
+ * import { quikturnImageLoader } from "@quikturn/logos-next";
+ *
+ * <Image loader={quikturnImageLoader} src="github.com" width={256} height={256} alt="GitHub" />
+ * ```
+ */
+declare function quikturnImageLoader({ src, width }: ImageLoaderProps): string;
+/**
+ * Factory that creates a Quikturn image loader with pre-configured options.
+ *
+ * The returned function is compatible with Next.js `next/image`'s `loader` prop.
+ * Options such as `token`, `format`, `greyscale`, `theme`, and `baseUrl` are
+ * captured in the closure so they apply to every call automatically.
+ *
+ * @example
+ * ```tsx
+ * import Image from "next/image";
+ * import { createQuikturnImageLoader } from "@quikturn/logos-next";
+ *
+ * const loader = createQuikturnImageLoader({ token: "qt_abc123", format: "webp" });
+ *
+ * <Image loader={loader} src="github.com" width={256} height={256} alt="GitHub" />
+ * ```
+ */
+declare function createQuikturnImageLoader(options: QuikturnImageLoaderOptions): (props: ImageLoaderProps) => string;
+
+interface QuikturnContextValue {
+    token: string;
+    baseUrl?: string;
+}
+/** Read the current Quikturn context (token + optional baseUrl). */
+declare function useQuikturnContext(): QuikturnContextValue | null;
+/** Props for the QuikturnProvider component. */
+interface QuikturnProviderProps {
+    token: string;
+    baseUrl?: string;
+    children: React.ReactNode;
+}
+/**
+ * Provides a Quikturn token (and optional baseUrl) to all descendant
+ * `QuikturnImage` components so they don't need an explicit `token` prop.
+ */
+declare function QuikturnProvider({ token, baseUrl, children, }: QuikturnProviderProps): react_jsx_runtime.JSX.Element;
+
+export { type ImageLoaderProps, QuikturnImage, type QuikturnImageLoaderOptions, type QuikturnImageProps, QuikturnProvider, createQuikturnImageLoader, quikturnImageLoader, useQuikturnContext };

package/dist/index.d.ts

@@ -0,0 +1,115 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImageProps } from 'next/image';
+import { LogoRequestOptions } from '@quikturn/logos';
+export { LogoConfig, LogoOptions, QuikturnLogo, QuikturnLogoCarousel, QuikturnLogoCarouselProps, QuikturnLogoGrid, QuikturnLogoGridProps, QuikturnLogoProps, ResolvedLogo, useLogoUrl } from '@quikturn/logos-react';
+
+/**
+ * Props accepted by the `QuikturnImage` component.
+ *
+ * Extends all `next/image` props except `src` and `loader` (which are
+ * derived from the `domain` and logo-specific options).
+ */
+interface QuikturnImageProps extends Omit<ImageProps, "src" | "loader"> {
+    /** The domain to fetch a logo for (e.g. "github.com"). */
+    domain: string;
+    /** Publishable API token (qt_ / pk_ prefix). Overrides context token. */
+    token?: string;
+    /** Output image format. */
+    format?: LogoRequestOptions["format"];
+    /** When true, returns a greyscale logo. */
+    greyscale?: boolean;
+    /** Theme adjustment ("light" or "dark"). */
+    theme?: LogoRequestOptions["theme"];
+}
+/**
+ * Next.js `<Image>` wrapper that renders a Quikturn logo for the given domain.
+ *
+ * Automatically constructs a custom `loader` using `logoUrl()` from
+ * `@quikturn/logos`, fires an attribution beacon on mount, and supports
+ * reading a token from `<QuikturnProvider>` context.
+ *
+ * @example
+ * ```tsx
+ * <QuikturnImage domain="github.com" token="qt_abc" width={128} height={128} alt="GitHub" />
+ * ```
+ */
+declare function QuikturnImage({ domain, token, format, greyscale, theme, alt, ...imageProps }: QuikturnImageProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props matching the Next.js `ImageLoaderProps` interface from `next/image`.
+ *
+ * - `src`     - The domain string (or image source) passed by Next.js.
+ * - `width`   - The resolved width in pixels requested by Next.js.
+ * - `quality` - Optional quality hint (unused by the Logos API, included for compatibility).
+ */
+interface ImageLoaderProps {
+    src: string;
+    width: number;
+    quality?: number;
+}
+/**
+ * Options for configuring a Quikturn image loader factory.
+ *
+ * These options are "baked in" to the returned loader function so they
+ * don't need to be supplied on every call.
+ */
+interface QuikturnImageLoaderOptions {
+    token?: string;
+    format?: LogoRequestOptions["format"];
+    greyscale?: boolean;
+    theme?: LogoRequestOptions["theme"];
+    baseUrl?: string;
+}
+/**
+ * Basic Quikturn image loader compatible with Next.js `next/image`.
+ *
+ * Converts a domain + width into a Logos API URL. Does not inject a token
+ * or any additional options -- use {@link createQuikturnImageLoader} for that.
+ *
+ * @example
+ * ```tsx
+ * import Image from "next/image";
+ * import { quikturnImageLoader } from "@quikturn/logos-next";
+ *
+ * <Image loader={quikturnImageLoader} src="github.com" width={256} height={256} alt="GitHub" />
+ * ```
+ */
+declare function quikturnImageLoader({ src, width }: ImageLoaderProps): string;
+/**
+ * Factory that creates a Quikturn image loader with pre-configured options.
+ *
+ * The returned function is compatible with Next.js `next/image`'s `loader` prop.
+ * Options such as `token`, `format`, `greyscale`, `theme`, and `baseUrl` are
+ * captured in the closure so they apply to every call automatically.
+ *
+ * @example
+ * ```tsx
+ * import Image from "next/image";
+ * import { createQuikturnImageLoader } from "@quikturn/logos-next";
+ *
+ * const loader = createQuikturnImageLoader({ token: "qt_abc123", format: "webp" });
+ *
+ * <Image loader={loader} src="github.com" width={256} height={256} alt="GitHub" />
+ * ```
+ */
+declare function createQuikturnImageLoader(options: QuikturnImageLoaderOptions): (props: ImageLoaderProps) => string;
+
+interface QuikturnContextValue {
+    token: string;
+    baseUrl?: string;
+}
+/** Read the current Quikturn context (token + optional baseUrl). */
+declare function useQuikturnContext(): QuikturnContextValue | null;
+/** Props for the QuikturnProvider component. */
+interface QuikturnProviderProps {
+    token: string;
+    baseUrl?: string;
+    children: React.ReactNode;
+}
+/**
+ * Provides a Quikturn token (and optional baseUrl) to all descendant
+ * `QuikturnImage` components so they don't need an explicit `token` prop.
+ */
+declare function QuikturnProvider({ token, baseUrl, children, }: QuikturnProviderProps): react_jsx_runtime.JSX.Element;
+
+export { type ImageLoaderProps, QuikturnImage, type QuikturnImageLoaderOptions, type QuikturnImageProps, QuikturnProvider, createQuikturnImageLoader, quikturnImageLoader, useQuikturnContext };

package/dist/index.mjs

@@ -0,0 +1,75 @@
+import Image2 from 'next/image';
+import { logoUrl, BASE_URL } from '@quikturn/logos';
+import { createContext, useContext, useMemo, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+export { QuikturnLogo, QuikturnLogoCarousel, QuikturnLogoGrid, useLogoUrl } from '@quikturn/logos-react';
+
+var fired = /* @__PURE__ */ new Set();
+function fireBeacon(token) {
+  if (typeof window === "undefined") return;
+  if (!token || token.startsWith("sk_")) return;
+  if (fired.has(token)) return;
+  fired.add(token);
+  const img = new Image();
+  img.src = `${BASE_URL}/_beacon?token=${token}&page=${encodeURIComponent(location.href)}`;
+}
+var QuikturnContext = createContext(null);
+function useQuikturnContext() {
+  return useContext(QuikturnContext);
+}
+function QuikturnProvider({
+  token,
+  baseUrl,
+  children
+}) {
+  return /* @__PURE__ */ jsx(QuikturnContext.Provider, { value: { token, baseUrl }, children });
+}
+function QuikturnImage({
+  domain,
+  token,
+  format,
+  greyscale,
+  theme,
+  alt,
+  ...imageProps
+}) {
+  const ctx = useQuikturnContext();
+  const effectiveToken = token ?? ctx?.token ?? "";
+  const loader = useMemo(
+    () => ({ src, width }) => logoUrl(src, {
+      token: effectiveToken || void 0,
+      size: width,
+      format,
+      greyscale,
+      theme
+    }),
+    [effectiveToken, format, greyscale, theme]
+  );
+  useEffect(() => {
+    if (effectiveToken) fireBeacon(effectiveToken);
+  }, [effectiveToken]);
+  return /* @__PURE__ */ jsx(
+    Image2,
+    {
+      ...imageProps,
+      src: domain,
+      loader,
+      alt: alt ?? `${domain} logo`
+    }
+  );
+}
+function quikturnImageLoader({ src, width }) {
+  return logoUrl(src, { size: width });
+}
+function createQuikturnImageLoader(options) {
+  return ({ src, width }) => logoUrl(src, {
+    token: options.token,
+    size: width,
+    format: options.format,
+    greyscale: options.greyscale,
+    theme: options.theme,
+    baseUrl: options.baseUrl
+  });
+}
+
+export { QuikturnImage, QuikturnProvider, createQuikturnImageLoader, quikturnImageLoader, useQuikturnContext };

package/dist/server.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+require('server-only');
+var server = require('@quikturn/logos/server');
+
+// src/server.ts
+var cached = null;
+function getServerClient() {
+  if (!cached) {
+    const key = process.env.QUIKTURN_SECRET_KEY;
+    if (!key) {
+      throw new Error(
+        "QUIKTURN_SECRET_KEY environment variable is not set. Set it in your .env.local file or deployment environment."
+      );
+    }
+    cached = new server.QuikturnLogos({ secretKey: key });
+  }
+  return cached;
+}
+async function getLogoBuffer(domain, options) {
+  return getServerClient().get(domain, options);
+}
+
+Object.defineProperty(exports, "QuikturnLogos", {
+  enumerable: true,
+  get: function () { return server.QuikturnLogos; }
+});
+exports.getLogoBuffer = getLogoBuffer;
+exports.getServerClient = getServerClient;

package/dist/server.d.cts

@@ -0,0 +1,23 @@
+import { ServerGetOptions, QuikturnLogos } from '@quikturn/logos/server';
+export { QuikturnLogos } from '@quikturn/logos/server';
+
+/**
+ * Returns a singleton {@link QuikturnLogos} server client.
+ *
+ * Reads the `QUIKTURN_SECRET_KEY` environment variable on first call and
+ * caches the client instance for subsequent calls.
+ *
+ * @throws {Error} If `QUIKTURN_SECRET_KEY` is not set.
+ */
+declare function getServerClient(): QuikturnLogos;
+/**
+ * Convenience wrapper that fetches a logo buffer for a domain using the
+ * cached server client.
+ *
+ * @param domain  - The domain to fetch a logo for (e.g. "github.com").
+ * @param options - Optional request options forwarded to `client.get()`.
+ * @returns The server logo response containing a Buffer, content type, and metadata.
+ */
+declare function getLogoBuffer(domain: string, options?: ServerGetOptions): Promise<ReturnType<QuikturnLogos["get"]>>;
+
+export { getLogoBuffer, getServerClient };

package/dist/server.d.ts

@@ -0,0 +1,23 @@
+import { ServerGetOptions, QuikturnLogos } from '@quikturn/logos/server';
+export { QuikturnLogos } from '@quikturn/logos/server';
+
+/**
+ * Returns a singleton {@link QuikturnLogos} server client.
+ *
+ * Reads the `QUIKTURN_SECRET_KEY` environment variable on first call and
+ * caches the client instance for subsequent calls.
+ *
+ * @throws {Error} If `QUIKTURN_SECRET_KEY` is not set.
+ */
+declare function getServerClient(): QuikturnLogos;
+/**
+ * Convenience wrapper that fetches a logo buffer for a domain using the
+ * cached server client.
+ *
+ * @param domain  - The domain to fetch a logo for (e.g. "github.com").
+ * @param options - Optional request options forwarded to `client.get()`.
+ * @returns The server logo response containing a Buffer, content type, and metadata.
+ */
+declare function getLogoBuffer(domain: string, options?: ServerGetOptions): Promise<ReturnType<QuikturnLogos["get"]>>;
+
+export { getLogoBuffer, getServerClient };

package/dist/server.mjs

@@ -0,0 +1,23 @@
+import 'server-only';
+import { QuikturnLogos } from '@quikturn/logos/server';
+export { QuikturnLogos } from '@quikturn/logos/server';
+
+// src/server.ts
+var cached = null;
+function getServerClient() {
+  if (!cached) {
+    const key = process.env.QUIKTURN_SECRET_KEY;
+    if (!key) {
+      throw new Error(
+        "QUIKTURN_SECRET_KEY environment variable is not set. Set it in your .env.local file or deployment environment."
+      );
+    }
+    cached = new QuikturnLogos({ secretKey: key });
+  }
+  return cached;
+}
+async function getLogoBuffer(domain, options) {
+  return getServerClient().get(domain, options);
+}
+
+export { getLogoBuffer, getServerClient };

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@quikturn/logos-next",
+  "version": "1.0.0",
+  "description": "Next.js components for the Quikturn Logos API — QuikturnImage with next/image integration, server helpers",
+  "license": "MIT",
+  "author": "Quikturn",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./server": {
+      "types": {
+        "import": "./dist/server.d.ts",
+        "require": "./dist/server.d.cts"
+      },
+      "import": "./dist/server.mjs",
+      "require": "./dist/server.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Quikturn-PowerPoint-Add-In/Logo-SDK.git",
+    "directory": "packages/next"
+  },
+  "bugs": {
+    "url": "https://github.com/Quikturn-PowerPoint-Add-In/Logo-SDK/issues"
+  },
+  "homepage": "https://github.com/Quikturn-PowerPoint-Add-In/Logo-SDK/tree/main/packages/next#readme",
+  "keywords": [
+    "quikturn",
+    "logos",
+    "next",
+    "company-logos",
+    "brand-assets"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/ tests/"
+  },
+  "dependencies": {
+    "@quikturn/logos": "workspace:^",
+    "@quikturn/logos-react": "workspace:^",
+    "server-only": "^0.0.1"
+  },
+  "peerDependencies": {
+    "next": "^14 || ^15",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^28.0.0",
+    "next": "^15.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "semantic-release": "^25.0.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  }
+}