{"id":82228,"date":"2024-11-01T19:49:36","date_gmt":"2024-11-01T16:19:36","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/how-to-capture-web-page-screenshots-with-nextjs-and-puppeteer-o7p\/"},"modified":"2024-11-01T19:49:36","modified_gmt":"2024-11-01T16:19:36","slug":"how-to-capture-web-page-screenshots-with-nextjs-and-puppeteer-o7p","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/how-to-capture-web-page-screenshots-with-nextjs-and-puppeteer-o7p\/","title":{"rendered":"\u0646\u062d\u0648\u0647 \u06af\u0631\u0641\u062a\u0646 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u062a \u0627\u0632 \u0635\u0641\u062d\u0647 \u0648\u0628 \u0628\u0627 Next.js \u0648 Puppeteer"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n \u06af\u0631\u0641\u062a\u0646 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u062a \u0627\u0632 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0647 \u0635\u0648\u0631\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634\u060c \u0627\u06cc\u062c\u0627\u062f \u06af\u0632\u0627\u0631\u0634 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0648 \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0645\u0627 \u06cc\u06a9 \u0645\u0633\u06cc\u0631 API Next.js \u062e\u0648\u0627\u0647\u06cc\u0645 \u0633\u0627\u062e\u062a \u06a9\u0647 \u06cc\u06a9 URL \u0631\u0627 \u0645\u06cc \u06af\u06cc\u0631\u062f \u0648 \u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u062a PNG \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f. \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u0627 \u0627\u0632 Puppeteer \u0648 chrome-aws-lambda \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u062f\u0648\u0646 \u0647\u062f Chrome \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0647\u0645\u0647\u200c\u06a9\u0627\u0631\u0647 \u0648 \u0622\u0645\u0627\u062f\u0647 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

\u0645\u0627 \u0628\u0627 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Next.js \u0648 \u0642\u062f\u0645 \u0628\u0647 \u0642\u062f\u0645 \u06a9\u062f\u0647\u0627 \u0631\u0627 \u0634\u0631\u0648\u0639 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u0641\u0647\u0645\u06cc\u0645 \u06a9\u0647 API \u0686\u06af\u0648\u0646\u0647 \u0627\u0633\u06a9\u0631\u06cc\u0646\u200c\u0634\u0627\u062a\u200c\u0647\u0627 \u0631\u0627 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f.<\/p>\n

\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/p>\n

\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 Next.js
\n\u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0645\u0633\u06cc\u0631 API \u0628\u0627 Puppeteer
\n\u0627\u06cc\u062c\u0627\u062f \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a React \u0628\u0631\u0627\u06cc \u0631\u0627\u0628\u0637 \u06a9\u067e\u0686\u0631
\n\u062a\u0648\u0636\u06cc\u062d \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0645\u062d\u0644\u06cc \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u0628\u0631\u0627\u06cc Puppeteer<\/p>\n

\u0634\u0631\u0648\u0639 \u06a9\u0627\u0631 \u0628\u0627 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Next.js \u062c\u062f\u06cc\u062f<\/p>\n

\u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Next.js \u062c\u062f\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n

npx create-next-app@latest capture-image-app
\ncd capture-image-app<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n

npm install puppeteer puppeteer-core chrome-aws-lambda busboy<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0631\u062d\u0644\u0647 2: \u0645\u0633\u06cc\u0631 API \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/p>\n

\u0627\u06a9\u0646\u0648\u0646\u060c \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u067e\u0627\u06cc\u0627\u0646\u06cc API \u0628\u0631\u0627\u06cc \u06af\u0631\u0641\u062a\u0646 \u0648 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u062f\u0646 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u062a \u0647\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 URL \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647\u060c \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n

\u062f\u0631 pages\/api \u067e\u0648\u0634\u0647\u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f generate-png.ts \u0648 \u0627\u06cc\u0646 \u06a9\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

import { NextApiRequest, NextApiResponse } from “next”;
\nimport busboy, { Busboy } from “busboy”; \/\/ Use busboy for multipart parsing
\nimport chromium from “chrome-aws-lambda”;
\nimport puppeteerCore from “puppeteer-core”; \/\/ Import puppeteer-core directly
\nimport puppeteer from “puppeteer”; \/\/ Import puppeteer directly<\/p>\n

\/\/ Conditional import for Puppeteer based on the environment
\nconst puppeteerModule = process.env.NODE_ENV === “production” ? puppeteerCore : puppeteer;<\/p>\n

export const config = {
\n api: {
\n bodyParser: false, \/\/ Disable default body parsing to handle raw binary data (Blob)
\n },
\n};<\/p>\n

const delay = (ms: number): Promise => new Promise((resolve) => setTimeout(resolve, ms));<\/p>\n

export default async function handler(
\n req: NextApiRequest,
\n res: NextApiResponse
\n): Promise {
\n try {
\n if (req.method === “POST”) {
\n const bb: Busboy = busboy({ headers: req.headers });
\n let width: number = 1920; \/\/ Default width
\n let height: number = 0; \/\/ Default height
\n let delayTime: number = 6000;
\n const buffers: Buffer[] = [];<\/p>\n

bb.on(“file”, (_name: string, file: NodeJS.ReadableStream) => {
\n file.on(“data”, (data: Buffer) => buffers.push(data));
\n });<\/p>\n

bb.on(“field”, (name: string, value: string) => {
\n if (name === “width”) width = parseInt(value, 10) || 1920;
\n if (name === “height”) height = parseInt(value, 10) || 0;
\n if (name === “delay”) delayTime = parseInt(value, 10) || 6000;
\n });<\/p>\n

bb.on(“finish”, async () => {
\n const blobBuffer: Buffer = Buffer.concat(buffers);
\n const htmlContent: string = blobBuffer.toString(“utf-8”);<\/p>\n

const browser = await puppeteerModule.launch({
\n args: [“–start-maximized”],
\n executablePath: process.env.NODE_ENV === “production”
\n ? await chromium.executablePath || “\/usr\/bin\/chromium-browser”
\n : undefined, \/\/ No custom executable path needed for local
\n headless: true,
\n });<\/p>\n

const page = await browser.newPage();<\/p>\n

\/\/ Load the HTML content directly
\n await page.setContent(htmlContent, { waitUntil: “networkidle0” });<\/p>\n

\/\/@ts-expect-error todo
\n const bodyHeight = await page.evaluate(() => {
\n return document.body.scrollHeight; \/\/ Get the full scrollable height of the body
\n });<\/p>\n

await page.setViewport({
\n width: Number(width),
\n height: height || bodyHeight, \/\/ Use the provided height or fallback to the full body height
\n deviceScaleFactor: 2,
\n });<\/p>\n

await delay(delayTime);<\/p>\n

const screenshotBuffer = await page.screenshot({
\n fullPage: !height,
\n type: “png”,
\n omitBackground: false,
\n });<\/p>\n

await browser.close();<\/p>\n

res.setHeader(“Content-Type”, “image\/png”);
\n res.setHeader(
\n “Content-Disposition”,
\n “attachment; filename=screenshot.png”
\n );
\n res.status(200).end(screenshotBuffer);
\n });<\/p>\n

req.pipe(bb); \/\/ Pipe the request stream to busboy
\n } else {
\n res.setHeader(“Allow”, [“POST”]);
\n res.status(405).end(`Method ${req.method} Not Allowed`);
\n }
\n } catch (error) {
\n console.error(“ERROR”, error);
\n res.status(500).end(“Internal Server Error”);
\n }
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

*\u062a\u0648\u0636\u06cc\u062d: \u0627\u0646\u062a\u062e\u0627\u0628 \u0639\u0631\u0648\u0633\u06a9 \u06af\u0631\u062f\u0627\u0646 \u0628\u0631\u0627\u06cc \u0645\u062d\u06cc\u0637 \u0647\u0627\u06cc \u0645\u062d\u0644\u06cc \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 \u062a\u0648\u0644\u06cc\u062f*\u062f\u0631 \u0627\u06cc\u0646 \u06a9\u062f\u060c \u06cc\u06a9 Import \u067e\u0648\u06cc\u0627 \u0628\u0631\u0627\u06cc Puppeteer \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645:<\/p>\n

\u062a\u0648\u0633\u0639\u0647 \u0645\u062d\u0644\u06cc: \u0627\u06af\u0631 NODE_ENV \u0646\u06cc\u0633\u062a production\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f puppeteer\u060c \u06a9\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0622\u0646 \u0633\u0627\u062f\u0647 \u062a\u0631 \u0627\u0633\u062a \u0648 \u0646\u06cc\u0627\u0632\u06cc \u0646\u062f\u0627\u0631\u062f chrome-aws-lambda.
\n\u062a\u0648\u0644\u06cc\u062f: \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631\u0647\u0627\u06cc \u0628\u062f\u0648\u0646 \u0633\u0631\u0648\u0631\u060c \u0645\u062d\u06cc\u0637 \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f NODE_ENV \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 production \u0648 Puppeteer-core \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 chrome-aws-lambda\u060c \u06a9\u0647 \u0628\u0647 \u0622\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062f\u0631 AWS Lambda \u0648 \u0633\u0627\u06cc\u0631 \u0645\u062d\u06cc\u0637 \u0647\u0627\u06cc \u0645\u0634\u0627\u0628\u0647 \u06a9\u0627\u0631 \u06a9\u0646\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a\u060c chrome-aws-lambda \u0645\u0633\u06cc\u0631 \u0635\u062d\u06cc\u062d Chromium \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u0632 \u0633\u0627\u0632\u06af\u0627\u0631\u06cc \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u062f\u0648\u0646 \u0633\u0631\u0648\u0631 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n

\u0645\u0631\u062d\u0644\u0647 3: \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a Simple React \u0628\u0631\u0627\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u06cc\u06a9 \u0641\u0631\u0645 \u0633\u0627\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f \u0645\u0642\u0627\u062f\u06cc\u0631 \u0648\u0631\u0648\u062f\u06cc \u0635\u0641\u062d\u0647 \u0648\u0628 \u0631\u0627 \u062b\u0628\u062a \u06a9\u0646\u0646\u062f. \u0627\u06cc\u0646 \u0641\u0631\u0645 \u062a\u0627\u0628\u0639 \u062a\u0648\u0644\u06cc\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u06af\u0631\u0641\u062a\u0646 \u0648 \u062f\u0627\u0646\u0644\u0648\u062f \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u062a \u062f\u0631 \u0642\u0627\u0644\u0628 PDF \u0641\u0639\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

import { useState } from “react”;<\/p>\n

export default function ScreenCaptureComponent() {
\n const [isProcessing, setProcessing] = useState(false);
\n const [width, setWidth] = useState(“1920”);
\n const [height, setHeight] = useState(“1000”);
\n const [delay, setDelay] = useState(“6000”);<\/p>\n

\/\/ Function to clone HTML and prepare for capture
\n function takeScreenshot() {
\n const clonedElement = document.body.cloneNode(true) as HTMLElement;
\n const blob = new Blob([clonedElement.outerHTML], { type: “text\/html” });
\n return blob;
\n }<\/p>\n

\/\/ Function to capture screenshot by sending cloned HTML to API
\n async function generateCapture() {
\n setProcessing(true);<\/p>\n

const htmlBlob = takeScreenshot();<\/p>\n

if (!htmlBlob) {
\n setProcessing(false);
\n return;
\n }<\/p>\n

try {
\n const formData = new FormData();
\n formData.append(“file”, htmlBlob);
\n formData.append(“width”, width);
\n formData.append(“height”, height);
\n formData.append(“delay”, delay);
\n const response = await fetch(“\/api\/generate-png”, {
\n method: “POST”,
\n body: formData,
\n });<\/p>\n

if (!response.ok) throw new Error(“Capture failed”);<\/p>\n

const blob = await response.blob();
\n const downloadUrl = URL.createObjectURL(blob);
\n const link = document.createElement(“a”);
\n link.href = downloadUrl;
\n link.download = “capture.png”;
\n link.click();
\n URL.revokeObjectURL(downloadUrl);
\n } catch (error) {
\n console.error(“Failed to capture screenshot”, error);
\n } finally {
\n setProcessing(false);
\n }
\n }<\/p>\n

return (<\/p>\n

Webpage Screenshot Capture<\/p>\n

{
\n e.preventDefault();
\n generateCapture();
\n }}
\n style={{
\n display: “flex”,
\n flexDirection: “column”,
\n alignItems: “center”,
\n marginBottom: “16px”,
\n }}
\n ><\/p>\n

Width (px)<\/p>\n

setWidth(e.target.value)}
\n style={{
\n width: “100%”,
\n padding: “8px”,
\n marginBottom: “16px”,
\n borderRadius: “4px”,
\n border: “1px solid #ccc”,
\n outline: “none”,
\n }}
\n >
\n 1920 (Full HD)
\n 1366 (Laptop)
\n 1280 (Desktop)
\n 1024 (Tablet Landscape)
\n 768 (Tablet Portrait)
\n 375 (Mobile)<\/p>\n

Height (px)<\/p>\n

setHeight(e.target.value)}
\n required
\n style={{
\n width: “100%”,
\n padding: “8px”,
\n marginBottom: “16px”,
\n borderRadius: “4px”,
\n border: “1px solid #ccc”,
\n outline: “none”,
\n }}
\n \/><\/p>\n

Delay (ms)<\/p>\n

setDelay(e.target.value)}
\n required
\n style={{
\n width: “100%”,
\n padding: “8px”,
\n marginBottom: “16px”,
\n borderRadius: “4px”,
\n border: “1px solid #ccc”,
\n outline: “none”,
\n }}
\n \/><\/p>\n

{isProcessing ? “Capturing…” : “Capture Screenshot”}<\/p>\n

{\/* Example HTML Element to Capture *\/}<\/p>\n

Content to Capture<\/p>\n

This is an example of the HTML content that will be captured.<\/p>\n

);
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/p>\n

\u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u0627\u0628\u0632\u0627\u0631 \u0636\u0628\u0637 \u0635\u0641\u062d\u0647 \u0648\u0628 \u062f\u0631 Next.js\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u062a \u0647\u0627 \u0631\u0627 \u067e\u0648\u0634\u0634 \u0645\u06cc \u062f\u0647\u062f Puppeteer\u060c \u0648 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 frontend \u062a\u0639\u0627\u0645\u0644\u06cc. \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f puppeteer \u0628\u0647 \u0635\u0648\u0631\u062a \u0645\u062d\u0644\u06cc \u0648 \u062a\u063a\u06cc\u06cc\u0631 \u0628\u0647 puppeteer-core \u062f\u0631 \u062a\u0648\u0644\u06cc\u062f \u0628\u0631\u0627\u06cc \u06a9\u0627\u0647\u0634 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0627\u0646\u062f\u0644 \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc \u0645\u062d\u06cc\u0637 \u0647\u0627\u06cc \u0628\u062f\u0648\u0646 \u0633\u0631\u0648\u0631. \u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9!<\/p>\n

\n

\u06af\u0631\u0641\u062a\u0646 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u062a \u0627\u0632 \u0635\u0641\u062d\u0627\u062a \u0648\u0628 \u0628\u0647 \u0635\u0648\u0631\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634\u060c \u0627\u06cc\u062c\u0627\u062f \u06af\u0632\u0627\u0631\u0634 \u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0648 \u0645\u0648\u0627\u0631\u062f \u062f\u06cc\u06af\u0631 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u062f. \u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u060c \u0645\u0627 \u06cc\u06a9 \u0645\u0633\u06cc\u0631 API Next.js \u062e\u0648\u0627\u0647\u06cc\u0645 \u0633\u0627\u062e\u062a \u06a9\u0647 \u06cc\u06a9 URL \u0631\u0627 \u0645\u06cc \u06af\u06cc\u0631\u062f \u0648 \u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0634\u0627\u062a PNG \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f. \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0645\u0627 \u0627\u0632 Puppeteer \u0648 chrome-aws-lambda \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u062f\u0648\u0646 \u0647\u062f Chrome \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0647\u0645\u0647\u200c\u06a9\u0627\u0631\u0647 \u0648 \u0622\u0645\u0627\u062f\u0647 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

\u0645\u0627 \u0628\u0627 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 Next.js \u0648 \u0642\u062f\u0645 \u0628\u0647 \u0642\u062f\u0645 \u06a9\u062f\u0647\u0627 \u0631\u0627 \u0634\u0631\u0648\u0639 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u0641\u0647\u0645\u06cc\u0645 \u06a9\u0647 API \u0686\u06af\u0648\u0646\u0647 \u0627\u0633\u06a9\u0631\u06cc\u0646\u200c\u0634\u0627\u062a\u200c\u0647\u0627 \u0631\u0627 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f.<\/p>\n

\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/p>\n