next api og image下載 - next api og image源代碼下載

next api og image

Ai源碼

Ability to set custom chrome options

下載

next.js api og圖像·

簡單的庫，目的是提供簡單的方法來動態
使用Next.js API路由生成開放圖像。

如果您不熟悉動態開放式圖像概念 - 請參閱Vercel/OG-Image Repository的Readme，以獲取非常詳細的解釋。

您可以將該項目視為更簡單，可配置的版本，提到了Vercel存儲庫

特徵

？超級簡單的用法
適用於無服務器環境
在React和HTML中定義模板的優雅方法
？多種策略 - 通過獲取和查詢參數或發布和JSON主體傳遞值
？打字稿兼容

安裝

在您的下一個項目項目中，執行：

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

關於同伴依賴性的簡短說明

如果您的無服務器功能不適合Vercel （50MB）上允許的尺寸幀，則可能需要安裝舊版本的chrome-aws-lambda

為此，用[email protected] （47.6 MB）替換chrome-aws-lambda （同時添加依賴項）

請，請參閱＃23（評論）以獲取更多信息

例子

您可以在此處找到更多示例：

JavaScript
- JavaScript的基本用法
- 帶有樣式組件的基本用法
- parwindcss的基本用法
- 提供的反應模板的基本用法
- 加載自定義本地字體的基本用法
打字稿
- 用打字稿的基本用法
- 用打字稿的基本用法並使用查詢策略進行反應
- 使用打字稿的基本用法，並使用身體策略（JSON）進行反應
- 使用打字稿，React模板和自定義本地字體的高級用法

example/目錄包含Simple Next.js應用程序實現next-api-og-image 。要完全探索自己在其中實現的示例 - 只需進行npm link && cd example && npm i && npm run dev ，然後導航到http：// localhost：3000/

基本用法和解釋

HTML模板

 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文檔，並充滿您的價值。

配x筆記
模板不能模棱兩可。你必須
定義react或html 。永遠不會一次

規格

html和react屬性是模板提供商功能。每個函數的第一個（也是唯一的）參數除了HTTP請求的查詢參數轉換為對象符號。

這使您可以通過簡單地訪問這些參數來創建完全自定義的HTML模板。這樣做的首選方法是對象破壞。

配x筆記
html和react模板提供商功能
可以定義為異步

例子

HTML模板

 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 > } } )

如果將獲得http請求發送到API路由，則使用上述代碼（例如localhost:3000/api/foo?myQueryParam=hello ）將其呈現為等於'Hello'的內容

策略

next-api-og-image允許您選擇為模板提供值的策略。可用策略是：

query （默認） - 值通過查詢參數傳遞並獲取HTTP請求。
這些值⛔️無法通過在模板提供商功能中嵌套破壞嵌套或訪問。
body - 值通過後HTTP請求和JSON主體傳遞。
這些值✅可以通過在模板提供商函數中嵌套破壞來嵌套和訪問。

策略是由配置中的strategy道具確定的。默認策略是query 。

配x筆記
不管策略如何 - 所有屬性（每個屬性）
被隱式施放到字符串，即使是很長的JSON的嵌套值

模板提供商功能中的類型

如果您正在使用Typescript，則可能要輸入這些內容。好吧...它實際上非常容易！只需將通用類型添加到withOGImage函數中。

帶有查詢參數的鍵入query策略?foo=hello&bar=friend看起來像這樣：

 export default withOGImage < 'query' , 'foo' | 'bar' > ( /* ... */ )

帶有JSON有效載荷{ "foo": "hello", "imNested": { "bar": "friend" }}鍵入body策略將看起來像：

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

錯誤

當策略設置為query時，您將使用JSON主體發送http請求，或者將策略設置為body ，並且您正在發送帶有查詢參數的http請求next-api-og-image將：

會丟下運行時錯誤
將適當的響應消息設置給客戶端您可以通過設置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
  } ,
} )

分裂文件

將所有模板內聯放置在Next.js API路由中不應該是問題的，但是如果您希望將內容保存在單獨的文件中my-template.js則可以遵循創建文件的常見模式my-template.html.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中。

加載自定義本地字體

為了從項目源加載自定義字體，您需要使用BASE64格式的字體創建源文件，或者只需將字體文件內容綁定到下一個方面的變量。 JSAPI ROUTE

配置

除了html和react配置屬性（在template中） （需要）外，您還可以指定有關next-api-og-image應如何行為的其他信息。

帶有默認值的示例配置（除了template.html或template.reeact.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 ,
  } ,
}