next api og image
Ability to set custom chrome options
Perpustakaan sederhana dengan tujuan memberikan cara mudah untuk secara dinamis
Hasilkan gambar grafik terbuka menggunakan rute API Next.js.
Jika Anda tidak terbiasa dengan konsep gambar grafik terbuka dinamis-silakan lihat readme repositori Vercel/OG-Image untuk penjelasan yang sangat rinci.
Anda dapat memperlakukan proyek ini sebagai versi yang lebih sederhana dan dapat dikonfigurasi dari repositori Vercel sebelumnya
Dalam proyek Next.js Anda, jalankan:
npm i next-api-og-image chrome-aws-lambda
# or
yarn add next-api-og-image chrome-aws-lambdaJika fungsi tanpa server Anda tidak sesuai dengan bingkai ukuran yang diizinkan di Vercel (50MB) , Anda mungkin ingin menginstal versi yang lebih lama dari
chrome-aws-lambda
Untuk melakukannya, ganti chrome-aws-lambda (sambil menambahkan dependensi) dengan [email protected] (47.6 MB)
Silakan, lihat #23 (komentar) untuk info lebih lanjut
Anda dapat menemukan lebih banyak contoh di sini:
example/ Direktori berisi aplikasi Simple Next.js yang menerapkan next-api-og-image . Untuk sepenuhnya mengeksplorasi contoh yang diimplementasikan di dalamnya sendiri - cukup lakukan npm link && cd example && npm i && npm run dev kemudian navigasikan ke 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 > } } ) Anda mungkin memperhatikan properti html dan react dalam konfigurasi. Tanggung jawab mereka adalah memberikan dokumen HTML kepada pembuat gambar (screenshot browser) , diisi dengan nilai -nilai Anda.
️ CATATAN
Template tidak bisa ambisius . Anda juga harus
Tentukanreactatauhtml. Tidak pernah keduanya sekaligus
Properti html dan react adalah fungsi penyedia templat. Parameter pertama setiap fungsi (dan satu -satunya) tidak lain adalah hal lain selain permintaan permintaan HTTP yang dikonversi ke notasi objek.
Ini memungkinkan Anda untuk membuat templat HTML yang sepenuhnya disesuaikan dengan hanya mengakses parameter ini. Cara yang disukai untuk melakukan itu adalah perusak objek.
️ CATATAN
Fungsi Penyedia Templatehtmldanreact
dapat didefinisikan sebagai asinkron
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 > } } ) Jika Anda mengirim permintaan http ke rute API dengan kode yang disajikan di atas misalnya localhost:3000/api/foo?myQueryParam=hello - itu akan membuat tajuk dengan konten yang sama dengan 'halo'
next-api-og-image memungkinkan Anda memilih strategi untuk memberikan nilai ke template. Strategi yang tersedia adalah:
query (default) - Nilai dilewatkan oleh kueri Params dan dapatkan permintaan HTTP.
Nilai -nilai ini ⛔️ tidak dapat bersarang atau diakses dengan perusak bersarang dalam fungsi penyedia template .
body - Nilai diteruskan melalui permintaan HTTP dan tubuh JSON.
Nilai -nilai ini ✅ dapat bersarang dan diakses dengan perusak bersarang dalam fungsi penyedia template.
Strategi ditentukan oleh strategy prop dalam konfigurasi. Strategi default adalah query .
️ CATATAN
Terlepas dari strateginya - semua properti (setiap orang)
secara implisit dilemparkan ke string, bahkan nilai -nilai bersarang JSON yang sangat lama
Jika Anda menggunakan TypeScript, Anda mungkin ingin mengetik hal -hal ini. Yah ... Ini sebenarnya sangat mudah! Cukup tambahkan tipe generik ke fungsi withOGImage .
query yang diketik dengan kueri params ?foo=hello&bar=friend akan terlihat seperti ini: export default withOGImage < 'query' , 'foo' | 'bar' > ( /* ... */ )body yang diketik dengan payload json { "foo": "hello", "imNested": { "bar": "friend" }} akan terlihat seperti ini: export default withOGImage < 'body' , { foo : string , imNested : { bar : string } } > ( { strategy : 'body' , /* ... */ } ) Ketika strategi diatur ke query dan Anda mengirim pasca permintaan http dengan json body atau ketika strategi diatur ke body dan Anda mengirim mendapatkan permintaan http dengan kueri params- next-api-og-image akan:
dev: { errorsInResponse: false } dalam konfigurasi Dalam beberapa skenario Anda mungkin ingin melakukan sesuatu (dengan kata lain - jalankan beberapa logika) setelah generasi gambar . Ini dapat dengan mudah dilakukan dengan memberikan fungsi untuk hook properti konfigurasi. Satu -satunya parameter adalah objek NextApiRequest dengan image yang dilampirkan.
Contoh (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
} ,
} ) Keeping all the templates inline within Next.js API route should not be problematic, but if you prefer keeping things in separate files you can follow the common pattern of creating files like my-template.html.js or my-template.js when you define template as react (naming convention is fully up to you) with code eg
export default function myTemplate ( { myQueryParam } ) {
return `<h1> ${ myQueryParam } </h1>`
}... atau dalam naskah
import type { NextApiOgImageQuery } from 'next-api-og-image'
type QueryParams = 'myQueryParam'
export default function myTemplate ( { myQueryParam } : Record < QueryParams , string > ) {
return `<h1> ${ myQueryParam } </h1>`
} kemudian mengimpornya dan menanamkan di withOGImage .
Untuk memuat font khusus dari sumber proyek, Anda perlu membuat file sumber dengan font font Anda dalam format base64 atau cukup mengikat konten file font ke variabel di rute API berikutnya.js Anda
Terlepas dari properti html dan react Configuration (dalam template ) (yang diperlukan) , Anda dapat menentukan info tambahan tentang bagaimana next-api-og-image harus berperilaku.
Contoh konfigurasi dengan nilai default (terlepas dari template.html atau 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 ,
} ,
} Proyek ini dilisensikan di bawah lisensi MIT.
Semua kontribusi dipersilakan.
