Next.js Integration

import { ogxResponse } from '@ogxjs/next';
import { NextRequest } from 'next/server';

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'My Site';

  return ogxResponse({
    preset: 'docs',
    title,
    colorScheme: 'dark',
    inter: [400, 700], // Declarative font loading
  });
}

import type { Metadata } from 'next';

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);

  return {
    title: post.title,
    openGraph: {
      images: [`/api/og?title=${encodeURIComponent(post.title)}`],
    },
  };
}

import { fontRegistry, ogx } from '@ogxjs/core';
import { writeFile } from 'fs/promises';

const pages = ['home', 'about', 'contact'];

await fontRegistry.registerInterFromUrl([400, 700]);

for (const page of pages) {
  const png = await ogx({
    preset: 'docs',
    title: page,
  });

  await writeFile(`public/og/${page}.png`, png);
}