next api og image
Ability to set custom chrome options
動的に簡単な方法を提供することを目的としたシンプルなライブラリ
next.js APIルートを使用してオープングラフ画像を生成します。
ダイナミックオープングラフ画像の概念に精通していない場合は、非常に詳細な説明については、Vercel/OG-ImageリポジトリのREADMEを参照してください。
このプロジェクトを、前述のvercelリポジトリのよりシンプルで構成可能なバージョンとして扱うことができます
next.jsプロジェクトでは、実行：
npm i next-api-og-image chrome-aws-lambda
# or
yarn add next-api-og-image chrome-aws-lambdaサーバーレス機能がVercel （50MB）の許可されたサイズフレームに収まらない場合は、
chrome-aws-lambdaの古いバージョンをインストールすることをお勧めします。
そうするために、 chrome-aws-lambda （依存関係を追加しながら）を[email protected] （47.6 MB）に置き換えます
詳細については、＃23（コメント）を参照してください
ここでより多くの例を見つけることができます：
example/ディレクトリにはnext-api-og-imageを実装する簡単なnext.jsアプリケーションが含まれています。自分で実装された例を完全に探索するために - 単に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特性に気付くかもしれません。彼らの責任は、あなたの価値に満ちたImage Creator （ブラウザースクリーンショット）に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 > } } )上記のコードを使用してAPIルートにHTTPリクエストを送信する場合、 localhost:3000/api/foo?myQueryParam=hello -hello-「hello」に等しいコンテンツで見出しになります
next-api-og-image使用すると、テンプレートに値を提供するための戦略を選択できます。利用可能な戦略は次のとおりです。
query （default） - 値はクエリパラメーションで渡され、HTTPリクエストを取得します。
これらの値は、テンプレートプロバイダー機能でネストされた破壊によってネストしたり、アクセスすることはできません。
body - 値は、ポストHTTPリクエストとJSONボディによって渡されます。
これらの値は、テンプレートプロバイダー機能でネストされた破壊によってネストおよびアクセスできます。
戦略は、構成のstrategy小道具によって決定されます。デフォルトの戦略はqueryです。
ショ和 注記
戦略に関係なく - すべてのプロパティ（すべてのプロパティ）
非常に長いJSONのネストされた値でさえ、暗黙的に文字列にキャストされます
TypeScriptを使用している場合は、おそらくこれらのものを入力したいと思うでしょう。まあ...それは実際に非常に簡単です！ GenericタイプをwithOGImage関数に追加するだけです。
query戦略?foo=hello&bar=friend次のようになります： export default withOGImage < 'query' , 'foo' | 'bar' > ( /* ... */ )body戦略{ "foo": "hello", "imNested": { "bar": "friend" }}次のようになります。 export default withOGImage < 'body' , { foo : string , imNested : { bar : string } } > ( { strategy : 'body' , /* ... */ } ) 戦略がqueryように設定されており、JSONボディを使用してPost HTTP要求を送信する場合、または戦略がbodyに設定されている場合、 next-api-og-image Paramsを使用してGet HTTPリクエストを送信します。
dev: { errorsInResponse: false }を設定して、この動作を無効にすることができるクライアントにappropiate応答メッセージを設定するいくつかのシナリオでは、画像の世代後に何か（言い換えれば、何らかのロジックを実行する）をしたいかもしれません。これは、構成プロパティをhook機能を提供することで簡単に実行できます。唯一のパラメーターは、 imageが添付されたNextApiRequestオブジェクトです。
例（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
} ,
} )すべてのテンプレートをnext.next.js APIルート内にインラインに保つことは問題ではありませんが、別のファイルに物事を保持することを好む場合は、 my-template.html.jsやmy-template.jsなどのファイルを作成する共通パターンに従うことができます。
export default function myTemplate ( { myQueryParam } ) {
return `<h1> ${ myQueryParam } </h1>`
}...またはタイプスクリプトで
import type { NextApiOgImageQuery } from 'next-api-og-image'
type QueryParams = 'myQueryParam'
export default function myTemplate ( { myQueryParam } : Record < QueryParams , string > ) {
return `<h1> ${ myQueryParam } </h1>`
}次に、それをインポートして、 withOGImageに埋め込みます。
プロジェクトソースからカスタムフォントをロードするには、FONTを使用してソースファイルをBase64形式で作成するか、フォントファイルコンテンツをNext.js APIルートの変数にバインドする必要があります。
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ライセンスの下でライセンスされています。
すべての貢献は大歓迎です。
