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_KEYserver-only - Never use
NEXT_PUBLIC_LINKFOX_API_KEY - Prefer Server Components first, Route Handlers second