next api og image
Ability to set custom chrome options
Biblioteca simples com o objetivo de fornecer uma maneira fácil de dinamicamente
Gere imagens de grafias abertas usando as rotas da API Next.js.
Se você não estiver familiarizado com o conceito dinâmico de imagens de gráfico aberto-consulte o ReadMe do Repositório Vercel/OG-Image para obter uma explicação muito detalhada.
Você pode tratar este projeto como uma versão mais simples e configurável do repositório de vercel mencionado anterior
No seu projeto Next.js, execute:
npm i next-api-og-image chrome-aws-lambda
# or
yarn add next-api-og-image chrome-aws-lambdaSe sua função sem servidor não se encaixar nos quadros de tamanho permitido no vercel (50 MB) , você pode instalar versões mais antigas do
chrome-aws-lambda
Para fazer isso, substitua chrome-aws-lambda (enquanto adiciona as dependências) por [email protected] (47,6 MB)
Por favor, consulte o #23 (comentar) para mais informações
Você pode encontrar mais exemplos aqui:
O example/ diretório contém um aplicativo simples do próximo.js, implementando next-api-og-image . Para explorar totalmente os exemplos implementados nele por si mesmo - basta fazer npm link && cd example && npm i && npm run dev e depois navegar para 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 > } } ) Você pode notar as propriedades html e react na configuração. A responsabilidade deles é fornecer o documento HTML ao criador de imagens (captura de tela do navegador) , preenchido com seus valores.
️ OBSERVAÇÃO
O modelo não pode ser ambigioso . Você deve
Definirreactouhtml. Nunca ambos de uma vez
As propriedades html e react são funções de provedores de modelos. O primeiro (e único) parâmetro de cada função não passa de parâmetros de consulta da solicitação HTTP convertidos para notação de objeto.
Isso permite criar modelos HTML totalmente personalizados, simplesmente acessando esses parâmetros. A maneira preferida de fazer isso é a destruição de objetos.
️ OBSERVAÇÃO
Funções do provedor de modeloshtmlereact
pode ser definido como assíncrono
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 > } } ) Se você enviar uma solicitação http para a rota da API com o código apresentado acima, por exemplo localhost:3000/api/foo?myQueryParam=hello - ele renderizará o cabeçalho com conteúdo igual a 'hello'
next-api-og-image permite que você escolha a estratégia para fornecer valores ao modelo. As estratégias disponíveis são:
query (padrão) - Os valores são passados por parâmetros de consulta e obtêm solicitação HTTP.
Esses valores ⛔️ não podem ser aninhados nem acessados pela destruição aninhada na função do provedor de modelos .
body - Os valores são passados pela solicitação pós -http e pelo corpo JSON.
Esses valores ✅ podem ser aninhados e acessados pela destruição aninhada na função do provedor de modelos.
As estratégias são determinadas pelo suporte strategy na configuração. A estratégia padrão é query .
️ OBSERVAÇÃO
Independentemente da estratégia - todas as propriedades (cada uma)
são implicitamente escalados para cordas, mesmo os valores aninhados de JSON muito longos
Se você estiver usando o TypeScript, provavelmente deseja ter essas coisas digitadas. Bem ... é realmente super fácil! Basta adicionar tipos genéricos à função withOGImage .
query digitada com parâmetros de consulta ?foo=hello&bar=friend parecerá assim: export default withOGImage < 'query' , 'foo' | 'bar' > ( /* ... */ )body digitada com carga paga JSON { "foo": "hello", "imNested": { "bar": "friend" }} vai ficar assim: export default withOGImage < 'body' , { foo : string , imNested : { bar : string } } > ( { strategy : 'body' , /* ... */ } ) Quando a estratégia está definida como query e você está enviando uma solicitação pós-http com o corpo JSON ou quando a estratégia é configurada para body e você está enviando solicitação http com parâmetros de consulta- next-api-og-image .
dev: { errorsInResponse: false } na configuração Em alguns cenários, você pode querer fazer algo (em outras palavras - execute alguma lógica) após a geração da imagem . Isso pode ser feito facilmente, fornecendo função para hook a propriedade de configuração. O único parâmetro é o objeto NextApiRequest com image anexada a ele.
Exemplo (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
} ,
} ) Manter todos os modelos em linha dentro da rota da API Next.js não deve ser problemática, mas se você preferir manter as coisas em arquivos separados, poderá seguir o padrão comum de criar arquivos como my-template.html.js ou my-template.js quando você definir modelo como reação (a nomeação da convenção é totalmente para você) com código eg eg
export default function myTemplate ( { myQueryParam } ) {
return `<h1> ${ myQueryParam } </h1>`
}... ou em TypeScript
import type { NextApiOgImageQuery } from 'next-api-og-image'
type QueryParams = 'myQueryParam'
export default function myTemplate ( { myQueryParam } : Record < QueryParams , string > ) {
return `<h1> ${ myQueryParam } </h1>`
} Em seguida, importando -o e incorporando no withOGImage .
Para carregar fontes personalizadas da fonte do projeto, você precisa criar um arquivo de origem com sua fonte no formato Base64 ou simplesmente vincular o conteúdo do arquivo de font à variável na sua próxima rota da API.js
Além da propriedade html e react Configuration (no template ) (cujo são necessários) , você pode especificar informações adicionais sobre como next-api-og-image deve se comportar.
Exemplo de configuração com valores padrão (além 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 ,
} ,
} Este projeto está licenciado sob a licença do MIT.
Todas as contribuições são bem -vindas.
