Our great sponsors
-
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
// File: pages/dynamic_blogs.js // Destructuring title, image and mode from the query (sent as props to this component) const Blogs = ({ title, image, mode }) => { return (
) } export default Blogs /// Receive the query parameters on the server-side // Read more on queries with getServerSideProps at: // https://github.com/vercel/next.js/discussions/13309 export async function getServerSideProps({ query }) { return { props: { ...query }, } }Checkout this article
{title}
Rishi Raj Jain
Wanna take everyone along in this web development journey by learning and giving back async
// File: pages/api/index.js // This is accessible from the deployed link (say, Y.com) as y.com/api?queryparametershere import core from 'puppeteer-core' import chromium from 'chrome-aws-lambda' export default async function handler(req, res) { // Only allow POST to the given route if (req.method === 'GET') { const { title, mode, image, width = 1400, height = 720 } = req.query // Launching chrome with puppeteer-core // https://github.com/puppeteer/puppeteer/issues/3543#issuecomment-438835878 const browser = await core.launch({ args: chromium.args, defaultViewport: chromium.defaultViewport, executablePath: await chromium.executablePath, headless: chromium.headless, ignoreHTTPSErrors: true, }) // Create a page const page = await browser.newPage() // Define the dimensions of the page await page.setViewport({ width: parseInt(width), height: parseInt(height) }) // Load the /dynamic_blogs with the given query paramters // Don't forget to encode them! // req.headers.host allows to obtain the deployed link as is, hence this app can be deployed anywhere // This allows us to take advantage of Layer0 caching to serve the /dynamic_blogs pages faster to this .goto() call await page.goto(`https://${req.headers.host}/dynamic_blogs?title=${encodeURIComponent(title)}&image=${encodeURIComponent(image)}&mode=${encodeURIComponent(mode)}`) // On average, place an image that is fast to load. // Falling back to 5 seconds timeout where image might take longer to load. await page.waitForTimeout(5000) // Take screenshot of the body of the page, that is the content const content = await page.$('body') const imageBuffer = await content.screenshot({ omitBackground: true }) await page.close() await browser.close() res.setHeader('Cache-Control', 'public, immutable, no-transform, s-maxage=31536000, max-age=31536000') res.setHeader('Content-Type', 'image/png') res.send(imageBuffer) res.status(200) return } // Any other method than GET results in a ERROR 400. res.status(400).json({ message: 'Invalid method.' }) return }