next api og image
Ability to set custom chrome options
مكتبة بسيطة مع الغرض من توفير وسيلة سهلة للديناميكية
إنشاء صور Open-Graph باستخدام طرق API Next.js.
إذا لم تكن معتادًا على مفهوم الصور الديناميكية المفتوحة-يرجى الاطلاع على ReadMe لمستودع Vercel/OG-IMAGE لشرح مفصل للغاية.
يمكنك التعامل مع هذا المشروع كإصدار أبسط وقابل للتكوين من مستودع Vercel المذكور سابقًا
في مشروع 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/ الدليل على تطبيق Simple 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 Route مع رمز مقدم أعلاه على سبيل المثال ، localhost:3000/api/foo?myQueryParam=hello - سيجعل التوجه مع المحتوى يساوي "Hello"
تتيح لك next-api-og-image اختيار استراتيجية لتوفير القيم للقالب. الاستراتيجيات المتاحة هي:
query (افتراضي) - يتم تمرير القيم عن طريق الاستعلام معاملات والحصول على طلب HTTP.
هذه القيم ⛔ لا يمكن التداخل أو الوصول إلى التدمير المتداخل في وظيفة مزود القالب .
body - يتم تمرير القيم عن طريق Post HTTP طلب وجسم JSON.
هذه القيم ✅ يمكن تداخلها والوصول إليها عن طريق التدمير المتداخل في وظيفة مزود القالب.
يتم تحديد الاستراتيجيات من خلال strategy الدعامة في التكوين. الإستراتيجية الافتراضية هي query .
️ ملحوظة
بغض النظر عن الاستراتيجية - جميع الخصائص (كل واحدة)
يتم تلقيها ضمنيًا إلى سلسلة ، حتى قيم JSON المتداخلة الطويلة جدًا
إذا كنت تستخدم TypeScript ، فربما تريد كتابة هذه الأشياء. حسنا ... إنه في الواقع سهل للغاية! ما عليك سوى إضافة أنواع عامة إلى وظيفة withOGImage .
query المكتوبة مع params 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 وترسل الحصول على طلب 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
} ,
} ) يجب ألا يكون الحفاظ على جميع القوالب مضمونة داخل طريق API Next.js مشكلة ، ولكن إذا كنت تفضل الاحتفاظ بالأشياء في ملفات منفصلة ، فيمكنك اتباع النمط الشائع لإنشاء ملفات مثل my-template.html.js أو my-template.js عند تحديد القالب على أنه رد فعل (اتفاقية Naming تمامًا) مع رمز EG eg
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 NEXT.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 ,
} ,
} هذا المشروع مرخص بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.
جميع المساهمات موضع ترحيب.
