next api og image
Ability to set custom chrome options
Простая библиотека с целью обеспечения простого способа динамически
Сгенерировать изображения с открытым графом с помощью маршрутов API Next.js.
Если вы не знакомы с концепцией динамических изображений с открытым графом-см. Readme Repository Vercel/OG-Image для очень подробного объяснения.
Вы можете рассматривать этот проект как более простую и настраиваемую версию упомянутого ранее Vercel Repository
В вашем проекте Next.js выполнить:
npm i next-api-og-image chrome-aws-lambda
# or
yarn add next-api-og-image chrome-aws-lambdaЕсли ваша функция без сервера не вписывается в рамки разрешенных размеров на Vercel (50 МБ) , вы можете установить более старые версии
chrome-aws-lambda
Для этого замените chrome-aws-lambda (при добавлении зависимостей) на [email protected] (47,6 МБ)
Пожалуйста, обратитесь к #23 (комментарий) для получения дополнительной информации
Вы можете найти больше примеров здесь:
example/ каталог содержит простое приложение Next.js, реализующее next-api-og-image . Чтобы полностью изучить примеры, реализованные в нем сами - просто сделайте npm link && cd example && npm i && npm run dev , затем перейдите по 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 > } } ) Возможно, вы заметили свойства html и react в конфигурации. Их ответственность состоит в том, чтобы предоставить HTML -документ создателю изображения (скриншот браузера) , заполненный вашим ценностями.
️ ПРИМЕЧАНИЕ
Шаблон не может быть неотъемлемой частью . Вы должны тоже
Определитьreactилиhtml. Никогда не оба сразу
Свойства html и react являются функциями поставщиков шаблонов. Первый (и единственный) параметр каждой функции - это не что иное, как параметры запроса HTTP -запроса, преобразованные в нотацию объекта.
Это позволяет создавать полностью настраиваемые шаблоны HTML, просто обращаясь к этим параметрам. Предпочтительным способом сделать это является разрушение объекта.
️ ПРИМЕЧАНИЕ
функции поставщика шаблоновhtmlиreact
может быть определен как асинхронный
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 > } } ) Если вы отправите htttp -запрос на маршрут API с кодом, представленным выше, например, localhost:3000/api/foo?myQueryParam=hello .
next-api-og-image позволяет выбирать стратегию для предоставления значений для шаблона. Доступные стратегии:
query (по умолчанию) - значения передаются с помощью параметров запроса и получают HTTP -запрос.
Эти значения ⛔ не могут быть вложены и не доступны путем вложенной деструкции в функции поставщика шаблонов .
body - значения передаются по Post HTTP -запросу и корпусу JSON.
Эти значения ✅ могут быть вложены и доступны путем вложенной разрушения в функции поставщика шаблонов.
Стратегии определяются strategy опорой в конфигурации. Стратегия по умолчанию - query .
️ ПРИМЕЧАНИЕ
Независимо от стратегии - все свойства (каждый)
неявно подчиняются к струне, даже очень длинные вложенные значения JSON
Если вы используете TypeScript, вы, вероятно, хотите напечатать эти вещи. Ну ... это на самом деле очень легко! Просто добавьте общие типы в withOGImage функции.
query с помощью запросов ?foo=hello&bar=friend будет выглядеть так: export default withOGImage < 'query' , 'foo' | 'bar' > ( /* ... */ )body с json Payload { "foo": "hello", "imNested": { "bar": "friend" }} будет выглядеть следующим образом: export default withOGImage < 'body' , { foo : string , imNested : { bar : string } } > ( { strategy : 'body' , /* ... */ } ) Когда стратегия установлена на query , и вы отправляете Post HTTP-запрос с помощью корпуса JSON или когда стратегия установлена на body , и вы отправляете HTTP-запрос с помощью запросов Params- next-api-og-image Will:
dev: { errorsInResponse: false } в конфигурации В некоторых сценариях вы можете захотеть что -то сделать (другими словами - выполнить некоторую логику) после генерации изображения . Это можно легко сделать, предоставив функцию для hook свойства конфигурации. Единственный параметр - это объект NextApiRequest с прикрепленным к нему image .
Пример (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
} ,
} ) Сохранение всех шаблонов встроенных в пределах stear.js API-маршрута не должно быть проблематичным, но если вы предпочитаете хранить вещи в отдельных файлах, вы можете следовать общему шаблону создания файлов, таких как my-template.html.js или my-template.js когда вы определяете шаблон как реагирование .
export default function myTemplate ( { myQueryParam } ) {
return `<h1> ${ myQueryParam } </h1>`
}... или в TypeScript
import type { NextApiOgImageQuery } from 'next-api-og-image'
type QueryParams = 'myQueryParam'
export default function myTemplate ( { myQueryParam } : Record < QueryParams , string > ) {
return `<h1> ${ myQueryParam } </h1>`
} Затем импортируя его и внедряя в withOGImage .
Чтобы загрузить пользовательские шрифты из источника проекта, вам необходимо создать исходный файл с помощью вашего шрифта в формате Base64 или просто привязать содержимое файла шрифта с переменной в вашем маршруте API stect.js.
Помимо свойства html и react Configuration (в template ) (чьи необходимы) , вы можете указать дополнительную информацию о том, как должен вести себя next-api-og-image .
Пример конфигурации со значениями по умолчанию (кроме Template.html или 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 ,
} ,
} Этот проект лицензирован по лицензии MIT.
Все взносы приветствуются.
