Dynamische Open Graph Bilder mit Next.js unter Verwendung von @vercel/og erstellen

In diesem Blogbeitrag lernen wir, wie man dynamische Open Graph-Bilder mit Next.js und Tailwind CSS unter Verwendung des Pakets @vercel/og erstellt.

Was ist Open Graph?

Open Graph ist ein Protokoll zum Teilen von Webinhalten in sozialen Medien. Es erlaubt Ihnen zu kontrollieren, wie Ihre Inhalte erscheinen, wenn sie auf Social Media Plattformen wie Facebook, Twitter und LinkedIn geteilt werden.

Was ist @vercel/og?

`@vercel/og`` ist eine Bibliothek, mit dem Sie dynamische Open Graph-Bilder mit Next.js und Tailwind CSS erstellen können. Es macht es einfach und unkompliziert, Open Graph Bilder in Ihre Next.js Anwendung zu integrieren.

Wenn es auf Vercel gehostet wird, verwendet es das Edge Functions Feature, um die Open Graph Bilder am Rand zu erzeugen.

Erste Schritte

Zuerst erstellen wir ein neues Next.js Projekt.

npx create-next-app

Als nächstes installieren wir die Bibliothek @vercel/og.

npm install @vercel/og

Erstellen des Open-Graph-Images

Nun erstellen wir das Open Graph-Image.

Zuerst erstellen wir einen Api-Endpunkt namens og.tsx im Verzeichnis pages/api. Ein sehr einfaches Beispiel für ein Open Graph-Image sieht wie folgt aus:

import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "edge",
};

export default function handler() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

Source: Vercel docs

Dies wird ein Open Graph Bild mit dem Text "Hello world!" erstellen.

Starten Sie den Entwicklungsserver, indem Sie npm run dev ausführen und besuchen Sie http://localhost:3000/api/og, um das Open Graph Bild zu sehen.

OG Image example "Hello world!" — OG Image example: Hello world!

Das Open-Graph-Bild dynamisch machen

Lassen Sie uns nun das Open Graph-Bild dynamisch machen. Dies können wir mit dem Parameter NextRequest erreichen. Dieses Objekt enthält Informationen über die Anfrage, einschließlich der Abfrageparameter. Wir können dann die Methode new Url(req.url) verwenden, um die Abfrageparameter zu erhalten.

import { ImageResponse } from "@vercel/og";
import { NextRequest } from "next/server";

export const config = {
  runtime: "edge",
};

export default function handler(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const text = searchParams.get("text");

  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        {text}
      </div>
    ),
    {
      width: 1200,
      height: 630,
      emoji: "fluent",
    }
  );
}

}

Jetzt können wir den Text, der im Open Graph Bild angezeigt werden soll, als Abfrageparameter übergeben. Als Beispiel, wenn wir Hello from query param 👋 anzeigen möchten, können wir die URL http://localhost:3000/api/og?text=Hello%20from%20query%20param%20👋 aufrufen.

Bitte beachten Sie, dass die Option emoji im Objekt ImageResponse auf fluent gesetzt ist.

OG Image Beispiel: Hello from query param 👋

Gestaltung des Open-Graph-Bildes

Lassen Sie uns nun das Open Graph Bild mit Tailwind CSS gestalten.

Um Tailwind CSS zu verwenden, müssen wir tw anstelle von style verwenden.

import { ImageResponse } from "@vercel/og";
import { NextRequest } from "next/server";

export const config = {
  runtime: "edge",
};

export default function handler(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const text = searchParams.get("text");

  return new ImageResponse(
    (
      <div tw="text-6xl bg-white w-full h-full flex flex-col items-center justify-center">
        {text}
        <p tw="flex text-red-500">
          and styled with
          <span tw="ml-2 text-red-700">TailwindCSS ⭐</span>
        </p>
      </div>
    ),
    {
      width: 1200,
      height: 630,
      emoji: "fluent",
    }
  );
}

Jetzt können wir die Seite öffnen, um das gestylte Open Graph-Bild mit Tailwind-CSS zu sehen. Hier ist ein Beispiellink:

http://localhost:3000/api/og?text=This%20open%20graph%20image%20is%20dynamic%20💫

OG Image example "TailwindCSS" — OG Image example: TailwindCSS

Bitte denken Sie daran, dass die `tw'-Eigenschaft noch experimentell ist und sich in Zukunft ändern kann.

Fazit

In diesem Tutorial haben wir gelernt, wie man dynamische Open Graph Bilder mit Next.js und Tailwind CSS unter Verwendung der @vercel/og Bibliothek erstellt.

Es ist eine großartige Möglichkeit, dynamische Open-Graph-Bilder für Ihre Next.js-Projekte zu erstellen, um sie in den sozialen Medien zu teilen.

Weiterführende Links

Über mich

Ich bin ein Softwareentwickler aus Deutschland mit mehr als 12 Jahren Erfahrung. Ich interessiere mich leidenschaftlich für Technik und liebe es, neue Dinge zu lernen. Zurzeit arbeite ich als Senior Softwareentwickler bei einer Firma namens "Engel & Völkers Technology".

Folge mir und erfahre, woran ich gerade arbeite: