Next.js SSR

在 Next.js Server Components 和 Route Handlers 中使用 @linkfox/core。

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>
  );
}

抽成共享服务端工具

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 代理

如果你的应用同时有 SSR 和 CSR,这种方式可以把私有 key 留在你自己的后端里。

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

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

  return Response.json(data);
}

注意事项

  • LINKFOX_API_KEY 只能放服务端
  • 不要使用 NEXT_PUBLIC_LINKFOX_API_KEY
  • 优先选 Server Components,其次才是 Route Handlers