We will implement a mechanism to display thumbnails of a website as Next.js API. This time, we will proceed to the point of displaying the image using the URL obtained.
![](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F6abKCw4b7LP0x0Ymx48b7z%2F1861abcb81c70e32add9fe3112abd503%2Fzach-lucero-x_x3RPpDbII-unsplash.jpg&w=3840&q=75)
Interacting with Next.js API and Playwright's Container (Part 2)
Next.jsRelated TechnologyPublished: 2023-10-25
Change the behavior of Playwright containers
The sample of a working container for Playwright that had already been implemented was created to display an image when a URL is passed as a parameter. This time, in order to make it easier to use in collaboration, the return value is in Json format, and the image data is output in base64.
The change in this section is very simple; simply rewrite the relevant code as follows
const screenshot = await page.screenshot();
// Base64エンコードされたスクリーンショットをHTTPレスポンスとして送信
const base64Screenshot = screenshot.toString("base64");
res.json({ screenshot: base64Screenshot });
Actual access returns Json data as follows.
![functions09.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F65dYsOSlmhcsF66dhMZuBc%2F5b325789182413466f4edf17ae23c9f6%2Ffunctions09.png&w=3840&q=75)
Obtain an image
The code will be rewritten to display the data acquired in Base64 as an image using the above API.
This time, we will use axios to implement asynchronous processing. Please install as follows
npm install axios
Then add a definition that uses this in the first area.
const axios = require("axios");
The URL should be the URL of the web app running the container that you have already deployed, or the URL of the container if you are running it locally.
try {
const externalApiUrl =
"https://yourplaywright.domain/api/screenshot?url=" +
url;
const response = await axios.get(externalApiUrl);
const imageData = response.data.screenshot;
const decodedImageData = Buffer.from(imageData, "base64");
res.setHeader("Content-Type", "image/png");
res.status(200).end(decodedImageData, "binary");
} catch (error) {
return res.status(500).json({ error: "Can't get content data" });
}
Now you can convert the URL to me to your application and the value returned in Base64 to an image for display. The result will look like this
![playwright25.png](/_next/image?url=https%3A%2F%2Fimages.ctfassets.net%2Fzi1ovlormku8%2F2cpZMAyBS7H9BvMEkXbRjz%2F4333471111f1c5ceca14cc9075490ec3%2Fplaywright25.png&w=3840&q=75)
Define servers as environment variables
In the above sample code, the server URL is embedded. Define this as an environment variable. First, add the following items in .env.
NEXT_PUBLIC_PLAYWRIGHT=https://yourplaywright.domain
Then add the following line to the appropriate code to obtain the above values.
const NEXT_PUBLIC_PLAYWRIGHT = process.env.NEXT_PUBLIC_PLAYWRIGHT;
Finally, rewrite the line containing the URL as follows
const externalApiUrl = NEXT_PUBLIC_PLAYWRIGHT + "/api/screenshot?url=" + url;
After completing the above settings, check to see if the system is working without problems.
Summary
In this article, we introduced how to obtain screenshots from the Next.js API using the Playwright API. In this case, the data returned by the container was an image, but this time we have changed the data to be exchanged as Base64 data. In addition, we have added an environment variable that allows you to change the URL of the server in case the server is often changed.
Since the current implementation is to retrieve an image each time, we will add code to store the image in Azure Blob Storage and use the image if it is available.