next api og image
Ability to set custom chrome options
Biblioteca simple con el propósito de proporcionar una manera fácil de dinámicamente
Genere imágenes de gráfico abierto usando las rutas API NEXT.JS.
Si no está familiarizado con el concepto dinámico de imágenes de gráfico abierto, consulte el ReadMe del repositorio de Vercel/OG-Image para una explicación muy detallada.
Puede tratar este proyecto como una versión más simple y configurable del repositorio de Vercelse mencionado anterior
En su proyecto Next.js, ejecute:
npm i next-api-og-image chrome-aws-lambda
# or
yarn add next-api-og-image chrome-aws-lambdaSi su función sin servidor no cabe en los marcos de tamaño permitidos en Vercel (50 MB) , es posible que desee instalar versiones anteriores de
chrome-aws-lambda
Para hacerlo, reemplace chrome-aws-lambda (mientras agrega las dependencias) con [email protected] (47.6 MB)
Por favor, consulte #23 (comentario) para obtener más información
Puede encontrar más ejemplos aquí:
El example/ directorio contiene la aplicación Simple Next.js Implementación de next-api-og-image . Para explorar completamente los ejemplos implementados en él solo: simplemente haga npm link && cd example && npm i && npm run dev y luego navegue a 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 > } } ) Puede notar las propiedades html y react en la configuración. Su responsabilidad es proporcionar documento HTML al creador de imágenes (captura de pantalla del navegador) , llena de sus valores.
️ NOTA
La plantilla no puede ser ambigiosa . Debes tampoco
Definareactohtml. Nunca ambos a la vez
Las propiedades html y react son las funciones de proveedores de plantillas. El primer (y único) parámetro de cada función no es más que los parámetros de consulta de la solicitud de HTTP convertidos en notación de objeto.
Esto le permite crear plantillas HTML totalmente personalizadas simplemente accediendo a estos parámetros. La forma preferida de hacerlo es la destrucción de objetos.
️ NOTA
htmlyreactFunciones de proveedor de plantillas
se puede definir como asincrónico
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 > } } ) Si envía la solicitud HTTP a la ruta API con el código presentado anteriormente, por ejemplo localhost:3000/api/foo?myQueryParam=hello - Renderá el encabezado con contenido igual a 'Hola'
next-api-og-image le permite elegir una estrategia para proporcionar valores a la plantilla. Las estrategias disponibles son:
query (predeterminado) : los valores se pasan por parámetros de consulta y obtienen la solicitud HTTP.
Estos valores ⛔️ no se pueden anidar ni acceder por la destrucción anidada en la función del proveedor de plantillas .
body : los valores se pasan mediante la solicitud de HTTP y el cuerpo JSON.
Estos valores ✅ pueden ser anidados y accedidos mediante destructación anidada en la función del proveedor de plantillas.
Las estrategias se determinan mediante el PROP strategy en la configuración. La estrategia predeterminada es query .
️ NOTA
Independientemente de la estrategia: todas las propiedades (cada una)
son implícitamente lanzados a la cuerda, incluso los valores anidados de JSON muy largos
Si está usando TypeScript, probablemente desee escribir estas cosas. Bueno ... ¡en realidad es súper fácil! Simplemente agregue tipos genéricos a la función withOGImage .
query escrita con parámetros de consulta ?foo=hello&bar=friend se verá así: export default withOGImage < 'query' , 'foo' | 'bar' > ( /* ... */ )body tipificada con carga útil JSON { "foo": "hello", "imNested": { "bar": "friend" }} se verá así: export default withOGImage < 'body' , { foo : string , imNested : { bar : string } } > ( { strategy : 'body' , /* ... */ } ) Cuando la estrategia se establece en query y está enviando una solicitud posterior a HTTP con el cuerpo JSON o cuando la estrategia se establece en body y está enviando la solicitud HTTP con parámetros de consulta- next-api-og-image Will:
dev: { errorsInResponse: false } en la configuración En algunos escenarios, es posible que desee hacer algo (en otras palabras, ejecute algo de lógica) después de la generación de la imagen . Esto se puede hacer fácilmente proporcionando función para hook la propiedad de configuración. El único parámetro es el objeto NextApiRequest con image adjunta.
Ejemplo (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
} ,
} ) Mantener todas las plantillas en línea dentro de la ruta de la API Next.js no debería ser problemática, pero si prefiere mantener las cosas en archivos separados, puede seguir el patrón común de crear archivos como my-template.html.js o my-template.js cuando define la plantilla como react (la convención de nominación está completamente a la que) con el código eg)
export default function myTemplate ( { myQueryParam } ) {
return `<h1> ${ myQueryParam } </h1>`
}... o en mecanografiado
import type { NextApiOgImageQuery } from 'next-api-og-image'
type QueryParams = 'myQueryParam'
export default function myTemplate ( { myQueryParam } : Record < QueryParams , string > ) {
return `<h1> ${ myQueryParam } </h1>`
} luego importarlo e incrustar en withOGImage .
Para cargar fuentes personalizadas de la fuente del proyecto, debe crear un archivo fuente con su fuente en formato base64 o simplemente vincular el contenido del archivo de fuentes a la variable en su ruta API Next.js
Además de la propiedad de configuración html y react (en template ) (cuyo se requiere) , puede especificar información adicional sobre cómo debe comportarse next-api-og-image .
Ejemplo de configuración con valores predeterminados (aparte de Template.html o 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 ,
} ,
} Este proyecto tiene licencia bajo la licencia MIT.
Todas las contribuciones son bienvenidas.
