Next.js
Next.js (Node)
Node runtime의 Next.js에서 better-og를 사용하는 방법입니다.
개요
@better-og/next는 font, proxy, preset을 묶어 Next.js에서 platform-aware OG route를 쉽게 만들게 합니다.
예제
import { resolveFontSetup } from "@better-og/core";
import {
createOgRouteHandler,
loadGoogleFontForImageResponse,
} from "@better-og/next";
export const runtime = "nodejs";
const fontSetup = await resolveFontSetup({
baseFonts: await loadGoogleFontForImageResponse({
family: "Geist",
weights: [400, 700],
}),
});
export const GET = createOgRouteHandler({
component: (
<div
style={{
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontFamily: fontSetup.families.base,
}}
>
Platform-aware OG
</div>
),
baseFonts: fontSetup.fonts,
});참고
- 기본 renderer는
next/og입니다. - 필요하면
renderer: "takumi"로 바꿀 수 있습니다.
Edit on GitHub
Last updated on