Platform-aware Open Graph image helpers with sane aspect-ratio defaults, locale-aware font loading, and adapters for Next.js, Edge runtimes, Workers, and TanStack Start.

How do I use Better OG?

Better-og provides easy-to-use helpers for generating Open Graph images. You can integrate it with Next.js, Edge runtimes, Workers, and TanStack Start using our dedicated adapters.

Yes, Better OG is completely free and open-source under the MIT license.

Введение

Platform-aware Open Graph rendering с адаптивным layout и многоязычными шрифтами.

Обзор

better-og — это toolkit для Open Graph изображений, который автоматически подстраивает размер и layout под платформу, запрашивающую изображение.

Детекция платформы по реальным сигналам request.
Готовые aspect ratio и safe area.
Адаптеры для Next.js, Workers и TanStack Start.

Установка

Устанавливайте только пакеты для нужного runtime и переиспользуйте один и тот же OG component в разных средах.

pnpm add @better-og/core next react

Первый route

Создайте OG handler, загрузите шрифты и верните component, который должен быть отрендерен как изображение.

app/og/[lang]/route.tsx

import { resolveFontSetup } from "@better-og/core";
import {
  createOgRouteHandler,
  loadGoogleFontForImageResponse,
} from "@better-og/next";

export const runtime = "nodejs";
export const revalidate = false;

const fontSetup = await resolveFontSetup({
  baseFonts: await loadGoogleFontForImageResponse({
    family: "Geist",
    weights: [400, 700],
  }),
  fallbackLocales: ["ja"],
});

export const GET = createOgRouteHandler({
  component: (ogContext) => (
    <div
      style={{
        display: "flex",
        width: "100%",
        height: "100%",
        alignItems: "center",
        justifyContent: "center",
        fontFamily: fontSetup.families.base,
        paddingBottom: 32 + ogContext.safeArea.bottom,
        background: "linear-gradient(135deg, #0d192c, #174a70, #4993d6)",
        color: "white",
      }}
    >
      <div style={{ fontSize: 64, fontWeight: 700 }}>Hello from better-og</div>
    </div>
  ),
  baseFonts: fontSetup.fonts,
});

Добавить proxy

Добавьте withOgRewrite, чтобы platform, layout и aspect_ratio заполнялись автоматически.

proxy.ts

import { withOgRewrite } from "@better-og/next";
import type { NextRequest } from "next/server";

export async function proxy(request: NextRequest) {
  return await withOgRewrite(request);
}

export const config = {
  matcher: ["/og/:path*"],
};

Конфигурация Next.js

Если используете Takumi на Node, держите пакет внешним в конфигурации Next.js.

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  serverExternalPackages: ["@takumi-rs/image-response"],
};

export default nextConfig;

Edit on GitHub

Last updated on