SSR in Next.js

Use @linkfox/core in Next.js Server Components and Route Handlers.

Server Component

import { createLinkFoxClient } from '@linkfox/core';

const linkfox = createLinkFoxClient({
  apiKey: process.env.LINKFOX_API_KEY!,
});

export default async function FooterLinks() {
  const data = await linkfox.getSiteDelivery('game-father', {
    group: 'game',
    utmKey: 'ref',
    utmValue: 'footer',
  });

  return (
    <nav className="inline-flex flex-wrap gap-2">
      {data.items.map((item) => (
        <a key={item.id} href={item.url} target="_blank" rel="noreferrer">
          {item.name}
        </a>
      ))}
    </nav>
  );
}

Shared server utility

import 'server-only';

import { createLinkFoxClient } from '@linkfox/core';

export const linkfox = createLinkFoxClient({
  apiKey: process.env.LINKFOX_API_KEY!,
});

export async function getFooterNetwork() {
  return linkfox.getSiteDelivery('game-father', {
    group: 'game',
  });
}

Route Handler proxy

Use this when your app mixes SSR and CSR and you want to keep the private key inside your own backend.

import { linkfox } from '@/lib/linkfox';

export async function GET() {
  const data = await linkfox.getSiteDelivery('game-father', {
    group: 'game',
  });

  return Response.json(data);
}

Notes

  • Keep LINKFOX_API_KEY server-only
  • Never use NEXT_PUBLIC_LINKFOX_API_KEY
  • Prefer Server Components first, Route Handlers second