next api og image
Ability to set custom chrome options
Einfache Bibliothek mit dem Zweck, dynamisch einfache Möglichkeiten zu bieten
Generieren Sie Bilder mit Open-Graph-Bildern mit Next.js-API-Routen.
Wenn Sie nicht mit dem Dynamic Open-Graph-Bilderkonzept vertraut sind, finden Sie die Readme von Vercel/OG-Image Repository für eine sehr detaillierte Erklärung.
Sie können dieses Projekt als einfachere und konfigurierbare Version des erwähnten früheren Vercel -Repositorys behandeln
Führen Sie in Ihrem nächsten Projekt aus.
npm i next-api-og-image chrome-aws-lambda
# or
yarn add next-api-og-image chrome-aws-lambdaWenn Ihre serverlose Funktion nicht in die zulässigen Größenrahmen auf Vercel (50 MB) passt, möchten Sie möglicherweise ältere Versionen von
chrome-aws-lambdainstallieren
Um dies zu tun, ersetzen Sie chrome-aws-lambda (beim Hinzufügen der Abhängigkeiten) durch [email protected] (47,6 MB).
Bitte finden Sie in #23 (Kommentar) für weitere Informationen
Weitere Beispiele finden Sie hier:
Das example/ Verzeichnis enthält eine einfache Next.js-Anwendung, in der next-api-og-image implementiert wird. Um die darin implementierten Beispiele vollständig zu untersuchen - machen Sie einfach npm link && cd example && npm i && npm run dev und navigieren Sie dann zu http: // localhost: 3000//
import { withOGImage } from 'next-api-og-image'
export default withOGImage ( { template : { html : ( { myQueryParam } ) => `<h1> ${ myQueryParam } </h1>` } } ) import { withOGImage } from 'next-api-og-image'
export default withOGImage ( { template : { react : ( { myQueryParam } ) => < h1 > { myQueryParam } </ h1 > } } ) Möglicherweise haben Sie die html und react -Eigenschaften in der Konfiguration bemerkt. Ihre Verantwortung ist es, dem Image Creator (Browser -Screenshot) , der mit Ihren Werten gefüllt ist, HTML -Dokument bereitzustellen.
Euen NOTIZ
Vorlage kann nicht eindeutig sein . Sie müssen entweder
Definieren Siereactoderhtml. Nie beides gleichzeitig
Die html und react -Eigenschaften sind Vorlagenanbieterfunktionen. Der erste (und einzige) Parameter jeder Funktion ist nichts anderes als die Abfrageparameter von HTTP Request, die in Objektnotation konvertiert wurden.
Auf diese Weise können Sie vollständig angepasste HTML -Vorlagen erstellen, indem Sie einfach auf diese Parameter zugreifen. Der bevorzugte Weg, dies zu tun, ist Objektzerstörungen.
Euen NOTIZ
htmlundreact-Vorlagenanbieterfunktionen
kann als asynchron definiert werden
import { withOGImage } from 'next-api-og-image'
export default withOGImage ( { template : { html : ( { myQueryParam } ) => `<h1> ${ myQueryParam } </h1>` } } ) import { withOGImage } from 'next-api-og-image'
export default withOGImage ( { template : { react : ( { myQueryParam } ) => < h1 > { myQueryParam } </ h1 > } } ) Wenn Sie eine HTTP -Anfrage an eine API -Route mit dem oben dargestellten Code senden, z localhost:3000/api/foo?myQueryParam=hello
next-api-og-image können Sie Strategie für die Bereitstellung von Werten für die Vorlage auswählen. Die verfügbaren Strategien sind:
query (Standard) - Werte werden mit Abfragungsparams übergeben und HTTP -Anforderung abgerufen.
Diese Werte können nicht durch verschachtelte Zerstörungen in der Vorlagenanbieterfunktion verschachtelt oder zugegriffen werden .
body - Werte werden von post HTTP -Anfrage und JSON -Körper übergeben.
Diese Werte ✅ können durch verschachtelte Zerstörungen in der Vorlagenanbieterfunktion verschachtelt und zugegriffen werden.
Die Strategien werden durch strategy -Prop in der Konfiguration bestimmt. Die Standardstrategie ist query .
Euen NOTIZ
Unabhängig von der Strategie - alle Eigenschaften (jeder einzelne)
werden implizit in String gegossen, selbst sehr lange Jsons verschachtelte Werte
Wenn Sie TypeScript verwenden, möchten Sie diese Dinge wahrscheinlich tippen lassen. Nun ... es ist eigentlich super einfach! Fügen Sie einfach generische Typen zur withOGImage -Funktion hinzu.
query mit Abfrageparams ?foo=hello&bar=friend sieht so aus: export default withOGImage < 'query' , 'foo' | 'bar' > ( /* ... */ )body Strategy mit JSON Payload { "foo": "hello", "imNested": { "bar": "friend" }} sieht so aus: export default withOGImage < 'body' , { foo : string , imNested : { bar : string } } > ( { strategy : 'body' , /* ... */ } ) Wenn die Strategie auf query festgelegt ist und Sie eine Post-HTTP-Anfrage mit JSON Body senden oder wenn die Strategie an body festgelegt ist und Sie die HTTP-Anfrage mit Abfrageparamien senden-wird: next-api-og-image :
dev: { errorsInResponse: false } in der Konfiguration festlegen In einigen Szenarien möchten Sie nach der Erzeugung des Bildes möglicherweise etwas (mit anderen Worten - eine Logik ausführen) tun. Dies kann einfach erfolgen, indem die Eigenschaft zur hook von Funktionen zur Verfügung gestellt wird. Der einzige Parameter ist das NextApiRequest -Objekt, wobei image daran angeschlossen ist.
Beispiel (JavaScript):
import { withOGImage } from 'next-api-og-image'
export default withOGImage ( {
template : {
react : ( { myQueryParam } ) => < div > { myQueryParam } </ div > ,
} ,
dev : {
inspectHtml : false ,
} ,
hook : ( innerRequest ) => {
console . log ( innerRequest . image )
// will print the generated image on the server as Buffer
} ,
} ) Wenn Sie alle Vorlagen in der nächsten.js-API-Route einhalten, sollten Sie nicht problematisch sein. Wenn Sie jedoch bevorzugen, dass Sie Dinge in separaten Dateien behalten, können Sie das gemeinsame Muster des Erstellens von Dateien wie my-template.html.js oder my-template.js befolgen, wenn Sie Vorlage als Reaktion definieren (Namenskonvention ist vollständig bei Ihnen) mit Code Egg eg.
export default function myTemplate ( { myQueryParam } ) {
return `<h1> ${ myQueryParam } </h1>`
}... oder in TypeScript
import type { NextApiOgImageQuery } from 'next-api-og-image'
type QueryParams = 'myQueryParam'
export default function myTemplate ( { myQueryParam } : Record < QueryParams , string > ) {
return `<h1> ${ myQueryParam } </h1>`
} Dann importieren und in das withOGImage einbetten.
Um benutzerdefinierte Schriftarten aus der Projektquelle zu laden
Abgesehen von html und react Konfigurationseigenschaft (in template ) (deren erforderlich ist) können Sie zusätzliche Informationen darüber angeben, wie sich next-api-og-image verhalten sollte.
Beispielkonfiguration mit Standardwerten (abgesehen von der Vorlage.html oder der Vorlage.React Prop) :
const nextApiOgImageConfig = {
// Values passing strategy
strategy : 'query' ,
// Response's 'Content-Type' HTTP header and browser screenshot type.
type : 'png' ,
// Screenshot's quality. WORKS ONLY IF 'type' IS SET TO 'jpeg'
quality : 90 ,
// Width of the image in pixels
width : 1200 ,
// Height of the image in pixels
height : 630 ,
// 'Cache-Control' HTTP header
cacheControl : 'max-age 3600, must-revalidate' ,
// Hook function that allows to intercept inner NextApiRequest with `ogImage` prop attached.
// useful for e.g. saving image in the database after the generation.
// The hook function return is Map containing custom headers that will be set BEFORE sending
// response to the client.
hook : null ,
// NOTE: Options within 'chrome' object only works when next-api-og-image is run in server (not serverless!!) environment.
chrome : {
// Custom command-line args passed to the browser start command
// by default, no arguments are provided.
args : null ,
// Custom executable provided. Useful when you e.g. have to run Chromium instead of Google Chrome
// by default, executable is retrieved automatically (it looks for Google Chrome in the filesystem)
executable : null ,
}
// NOTE: Options within 'dev' object works only when process.env.NODE_ENV === 'development'
dev : {
// Whether to replace binary data (image/screenshot) with HTML
// that can be debugged in Developer Tools
inspectHtml : true ,
// Whether to set error message in response
// if there are strategy related errors
errorsInResponse : true ,
} ,
} Dieses Projekt ist unter der MIT -Lizenz lizenziert.
Alle Beiträge sind willkommen.
