next api og image
Ability to set custom chrome options
ห้องสมุดง่าย ๆ ที่มีจุดประสงค์ในการจัดหาวิธีที่ง่ายในการแบบไดนามิก
สร้างภาพแบบเปิดกราฟโดยใช้เส้นทาง Next.js API
หากคุณไม่คุ้นเคยกับแนวคิดภาพกราฟแบบเปิดใช้งานแบบไดนามิก-โปรดดู readme ของ 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หากฟังก์ชั่น Serverless ของคุณไม่พอดีกับเฟรมขนาดที่อนุญาตใน Vercel (50MB) คุณอาจต้องการติดตั้ง
chrome-aws-lambdaรุ่นเก่ากว่า
ในการทำเช่นนั้นให้แทนที่ chrome-aws-lambda (ในขณะที่เพิ่มการพึ่งพา) ด้วย [email protected] (47.6 MB)
โปรดดูที่ #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และreactTemplate ผู้ให้บริการ
สามารถกำหนดเป็นอะซิงโครนัส
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 - มันจะแสดงผลด้วยเนื้อหาเท่ากับ 'สวัสดี'
next-api-og-image ช่วยให้คุณสามารถเลือกกลยุทธ์สำหรับการให้ค่ากับเทมเพลต กลยุทธ์ที่มีอยู่คือ:
query (ค่าเริ่มต้น) - ค่าจะถูกส่งผ่านโดยพารามิเตอร์แบบสอบถามและรับคำขอ HTTP
ค่าเหล่านี้⛔ไม่สามารถซ้อนกันหรือเข้าถึงได้โดยการทำลายโครงสร้างที่ซ้อนกันในฟังก์ชั่นผู้ให้บริการแม่แบบ
body - ค่าผ่านการร้องขอโพสต์ HTTP และร่างกาย JSON
ค่าเหล่านี้✅สามารถซ้อนกันและเข้าถึงได้โดยการทำลายโครงสร้างแบบซ้อนกันในฟังก์ชั่นผู้ให้บริการแม่แบบ
กลยุทธ์จะถูกกำหนดโดย Prop 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 และคุณกำลังส่งคำขอโพสต์ HTTP กับ JSON Body หรือเมื่อตั้งค่ากลยุทธ์เป็น body และคุณกำลังส่งคำขอ HTTP พร้อมพารามิเตอร์แบบสอบถาม-Next 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
} ,
} ) การรักษาเทมเพลตทั้งหมดอินไลน์ภายในเส้นทางถัดไป 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 หรือเพียงแค่ผูกเนื้อหาไฟล์ตัวอักษรกับตัวแปรในเส้นทางถัดไปของคุณ
นอกเหนือจากคุณสมบัติการกำหนดค่า html และ react (ใน 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
ยินดีต้อนรับการมีส่วนร่วมทั้งหมด
