Téléchargement next api og image OG - Téléchargement du code source next api og image API Suivant OG

next api og image

Code Source AI

Ability to set custom chrome options

Télécharger

Next.js API OG Image ·

Bibliothèque simple dans le but de fournir un moyen facile de dynamiquement
Générez des images graphiques ouvertes à l'aide des routes de l'API suivantes.

Si vous n'êtes pas familier avec le concept dynamique des images graphiques ouverts - veuillez consulter la lecture du référentiel de Vercel / Og-Image pour une explication très détaillée.

Vous pouvez traiter ce projet comme une version plus simple et configurable du référentiel Vercel mentionné mentionné

Caractéristiques

? Usage super facile
Convient pour un environnement sans serveur
Moyen élégant de définir des modèles à la fois dans React et HTML
? STRATÉGES MULTIPLES - PASSER VALEURS PAR GET ET REMINER PARAMS OU POST ET JSON BOLOD
? Compatible

Installation

Dans votre projet Next.js, exécutez:

npm i next-api-og-image chrome-aws-lambda
# or
yarn add next-api-og-image chrome-aws-lambda

Remarque courte sur les dépendances par les pairs

Si votre fonction sans serveur ne correspond pas aux cadres de taille autorisés sur Vercel (50 Mo) , vous voudrez peut-être installer des versions plus anciennes de chrome-aws-lambda

Pour ce faire, remplacez chrome-aws-lambda (tout en ajoutant les dépendances) par [email protected] (47,6 Mo)

S'il vous plaît, reportez-vous à # 23 (commentaire) pour plus d'informations

Exemples

Vous pouvez trouver plus d'exemples ici:

Javascrip
- Utilisation de base avec JavaScript
- Utilisation de base avec des composants stylisés
- Utilisation de base avec TailwindCSS
- Utilisation de base avec modèle de réact fourni
- Utilisation de base avec le chargement des polices locales personnalisées
Manuscrit
- Utilisation de base avec dactylographie
- Utilisation de base avec TypeScript et réagir en utilisant la stratégie de requête
- Utilisation de base avec dactylographie et réagir en utilisant la stratégie corporelle (JSON)
- Utilisation avancée avec dactylographie, modèle de réaction et polices locales personnalisées

L' example/ répertoire contient une application Simple Next.js implémentant next-api-og-image . Pour explorer pleinement des exemples implémentés par vous-même - faites simplement npm link && cd example && npm i && npm run dev puis accédez à http: // localhost: 3000 /

Utilisation de base et explication

Modèle HTML

 import { withOGImage } from 'next-api-og-image'

export default withOGImage ( { template : { html : ( { myQueryParam } ) => `<h1> ${ myQueryParam } </h1>` } } )

Modèle de réaction

 import { withOGImage } from 'next-api-og-image'

export default withOGImage ( { template : { react : ( { myQueryParam } ) => < h1 > { myQueryParam } </ h1 > } } )

Création de modèle

Vous avez peut-être remarqué les propriétés html et react en configuration. Leur responsabilité est de fournir un document HTML à Image Creator (Capture d'écran du navigateur) , remplie de vos valeurs.

️ NOTE
Le modèle ne peut pas être ambiguë . Vous devez soit
Définissez react ou html . Jamais les deux à la fois

Spécification

Les propriétés html et react sont des fonctions de fournisseurs de modèles. Le premier (et le seul) paramètre de chaque fonction n'est rien d'autre que les paramètres de requête de la demande HTTP convertis en notation d'objet.

Cela vous permet de créer des modèles HTML entièrement personnalisés en accédant simplement à ces paramètres. La façon préférée de le faire est la destructrice d'objets.

️ NOTE
Fonctions du fournisseur de modèles html et react
peut être défini comme asynchrone

Exemples

Modèle HTML

 import { withOGImage } from 'next-api-og-image'

export default withOGImage ( { template : { html : ( { myQueryParam } ) => `<h1> ${ myQueryParam } </h1>` } } )

Modèle de réaction

 import { withOGImage } from 'next-api-og-image'

export default withOGImage ( { template : { react : ( { myQueryParam } ) => < h1 > { myQueryParam } </ h1 > } } )

Si vous envoyez une demande HTTP à API Route avec le code présenté ci-dessus, par exemple localhost:3000/api/foo?myQueryParam=hello - il rendra la tête avec du contenu égal à «bonjour»

Stratégies

next-api-og-image vous permet de choisir une stratégie pour fournir des valeurs au modèle. Les stratégies disponibles sont:

query (par défaut) - Les valeurs sont transmises par paramètres de requête et obtiennent la demande HTTP.
Ces valeurs ⛔️ ne peuvent pas être imbriquées ni accédés par destructuration imbriquée dans la fonction du fournisseur de modèles .
body - Les valeurs sont transmises par la demande HTTP et le corps JSON.
Ces valeurs ✅ peuvent être imbriquées et accessibles par destructuration imbriquée dans la fonction du fournisseur de modèles.

Les stratégies sont déterminées par strategy PROP dans la configuration. La stratégie par défaut est query .

️ NOTE
Quelle que soit la stratégie - toutes les propriétés (chacune)
sont implicitement coulés en cordes, même les valeurs imbriquées de JSON très longues

Types dans la fonction du fournisseur de modèles

Si vous utilisez TypeScript, vous voulez probablement que ces choses soient tapées. Eh bien ... c'est vraiment super facile! Ajoutez simplement des types génériques à la fonction withOGImage .

Stratégie query dactylographiée avec paramètres de requête ?foo=hello&bar=friend ressemblera à ceci:
```
 export default withOGImage < 'query' , 'foo' | 'bar' > ( /* ... */ )
```

Stratégie body dactylographiée avec la charge utile JSON { "foo": "hello", "imNested": { "bar": "friend" }} ressemblera à ceci:

 export default withOGImage < 'body' , { foo : string , imNested : { bar : string } } > ( { strategy : 'body' , /* ... */ } )

Erreurs

Lorsque la stratégie est définie sur query et que vous envoyez une demande HTTP avec le corps JSON ou lorsque la stratégie est définie sur body et que vous envoyez une demande HTTP avec des paramètres de requête - next-api-og-image :

Je vais lancer une erreur d'exécution
Définissez le message de réponse approprié au client Vous pouvez désactiver ce comportement en définissant dev: { errorsInResponse: false } dans la configuration

Accrocher le processus post-généreté

Dans certains scénarios, vous voudrez peut-être faire quelque chose (en d'autres termes - exécuter une logique) après génération de l'image . Cela peut être facilement fait en fournissant une fonction pour hook la propriété de configuration. Le seul paramètre est l'objet NextApiRequest avec image qui lui est attachée.

Exemple (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
  } ,
} )

Fichage de fichiers

Garder tous les modèles en ligne dans l'itinéraire de l'API Next.js ne doit pas être problématique, mais si vous préférez garder les choses dans des fichiers séparés, vous pouvez suivre le modèle commun de création de fichiers comme my-template.html.js ou my-template.js lorsque vous définissez le modèle comme réact (la convention de nommage est entièrement à vous) avec du code EG EG

 export default function myTemplate ( { myQueryParam } ) {
  return `<h1> ${ myQueryParam } </h1>`
}

... ou en dactylographie

 import type { NextApiOgImageQuery } from 'next-api-og-image'

type QueryParams = 'myQueryParam'
export default function myTemplate ( { myQueryParam } : Record < QueryParams , string > ) {
  return `<h1> ${ myQueryParam } </h1>`
}

puis l'important et l'incorporation dans le withOGImage .

Chargement des polices locales personnalisées

Afin de charger des polices personnalisées à partir de la source du projet, vous devez créer un fichier source avec votre police au format Base64 ou simplement lier le contenu du fichier de police à la variable dans votre route API suivante

Configuration

En dehors de la propriété html et react Configuration (dans template ) (dont on requis) , vous pouvez spécifier des informations supplémentaires sur la façon dont next-api-og-image doit se comporter.

Exemple de configuration avec des valeurs par défaut (en dehors de Template.html ou Template.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 ,
  } ,
}