To show a directory listing’s actual website, capture it in a browser with Playwright, save the screenshot as an image asset, and store that asset’s URL or storage key with the listing. Then render the stored image in the directory card. Next.js ImageResponse is for generating a designed image from your own data; it does not screenshot an arbitrary external website.
Choose what the thumbnail should show
There are two distinct image jobs. Decide which one your directory needs before building the pipeline:
As an Amazon Associate I earn from qualifying purchases.
| Image job | Use | What it produces |
|---|---|---|
| A preview of the listed website as it renders in a browser | Playwright screenshot | An image of the target page, captured at a viewport, element, or full-page scope. |
| A consistent branded tile based on directory data | Next.js ImageResponse and the Open Graph image conventions |
A designed image made from JSX and supported CSS, such as a tile containing a site’s name or category. |
For a directory card intended to preview a listed site, use Playwright. A generated Open Graph image is useful for share cards or branded directory graphics, but it is not a substitute for capturing the external site.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsCapture a listed website with Playwright
Playwright’s basic workflow is to launch a browser, create a context and page, navigate to a URL, capture a screenshot, and close the browser. The example below uses Chromium and writes a PNG file. Install Playwright and its browser binaries in the environment where this script runs; browser installation details vary by deployment.
#1 Best Overall
Save as capture.mjs and run with node capture.mjs https://example.com:
import { chromium } from 'playwright';
const targetUrl = process.argv[2];
if (!targetUrl) {
throw new Error('Usage: node capture.mjs https://example.com');
}
const browser = await chromium.launch();
try {
const context = await browser.newContext({
viewport: { width: 1280, height: 800 },
});
const page = await context.newPage();
await page.goto(targetUrl, { waitUntil: 'load', timeout: 30_000 });
await page.screenshot({ path: 'public/thumbnails/example.png' });
} finally {
await browser.close();
}This demonstrates a fixed viewport and a load event as chosen settings, not universal requirements. Target sites differ: some keep loading resources after the load event, while others may never reach network idle. Choose a readiness condition and timeout that suit your targets; the official Playwright and Next.js documentation does not prescribe one universal wait condition, viewport, retry policy, refresh interval, or storage backend.
Return bytes instead of writing a file
page.screenshot() can also return screenshot bytes as a buffer. Use that when you want to resize, transform, or upload the image rather than save it directly to the local filesystem:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →const imageBytes = await page.screenshot({ type: 'webp' });
// Pass imageBytes to your image processor or storage client.Playwright documents screenshot output as files or buffers. The code that uploads or persists those bytes depends on your chosen image processor and storage service.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Select the capture scope and format
For a row of directory cards, a fixed viewport is usually the most predictable starting point: each screenshot has a consistent framing and does not grow with the target page’s length. Playwright also supports element and full-page screenshots.
| Scope | Choose it when | Trade-off |
|---|---|---|
| Viewport | You want uniform, compact card previews. | Only content in the visible viewport is captured. |
| Element | A known, useful region can be selected reliably. | The selector or locator must work on the target site. |
| Full page | The complete page is useful as an image. | The result can be very tall, which is often awkward in a compact card. |
For example, an element capture can use a locator that identifies a stable target:
const preview = page.locator('main');
await preview.screenshot({ path: 'public/thumbnails/example-main.png' });Only use a selector when it is appropriate for the sites you capture; external pages may use different markup or change it. To capture a full page instead, set fullPage: true:
await page.screenshot({
path: 'public/thumbnails/example-full.png',
fullPage: true,
});Playwright’s screenshot options support PNG, JPEG, and WebP output. Choose based on the directory’s display requirements and image pipeline. Its CLI documentation also describes viewport, element, full-page, and high-resolution device-pixel capture modes. High-resolution captures can increase the image dimensions and asset weight, so use them only when the display needs that detail.
Rank #3
Store the image and associate it with a listing
Do not make a visitor’s directory-page request wait for a browser to open every listed site. Instead, capture images in a background or scheduled job, persist each image, and save its URL or storage key against the listing’s stable record. This is an application architecture recommendation: Playwright provides file and buffer outputs, but does not dictate your queue, storage backend, retry policy, or refresh schedule.
- Read a listing’s target URL and stable record ID.
- Run a browser capture using the chosen viewport, readiness condition, and image format.
- Persist the resulting file or bytes, and save its location on the listing record.
- Render the stored asset in the directory card; if capture or refresh fails, retain any previously usable asset and show a placeholder when none exists.
External pages can change or fail to load, so define how listings behave when a first capture fails and when a later refresh cannot replace an existing image. Keep capture status separate from the asset location if the interface needs to explain stale or missing previews.
Display stored images in Next.js
Next.js can render local or remote image assets with its image facilities. For a remote source used with the documented Image component, configure the permitted host pattern in next.config.js; do not treat arbitrary listing URLs as trusted image hosts without deciding which hosts your application allows.
import Image from 'next/image';
export function DirectoryCard({ listing }) {
return (
<article>
<Image
src={listing.thumbnailUrl}
alt={`Preview of ${listing.name}`}
width={640}
height={400}
/>
<h2>{listing.name}</h2>
</article>
);
}Use dimensions that match the images you actually generate and the card layout you design. If images are remote, configure the appropriate remote URL pattern in next.config.js according to the Next.js image documentation. next/image renders and optimizes a supplied asset; it does not perform the browser capture.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Use ImageResponse for designed images, not site screenshots
When the desired result is a consistent graphic generated from directory data—rather than a view of the target site—Next.js supports the opengraph-image file convention and dynamic image generation with ImageResponse. The Next.js documentation example uses a 1200 by 630 pixel canvas; that is an example configuration, not a requirement for directory thumbnails. ImageResponse supports a subset of CSS, so check the documented limits when designing the image.
Use this route for branded share images or controlled tiles. For a thumbnail that depicts an arbitrary listed website, keep capture as a separate Playwright job and store the resulting image asset.
Operational choices and failure handling
Readiness and timeouts
Set a timeout and decide what page condition is good enough to capture. A load event is a workable starting point for some sites, but client-rendered content, delayed images, and third-party resources can behave differently. No single wait condition works for every target. If a capture times out or produces an unusable result, record the failure and avoid replacing a previously valid thumbnail with an empty or incomplete one.
Recommended Free Tools
Refreshes and retries
Capture when a listing is added and refresh on a schedule appropriate to how often its preview needs to change. The exact cadence and retry policy are application decisions; the cited browser documentation does not prescribe them. Use bounded retries for transient failures rather than letting one troublesome site hold a job open indefinitely.
Throughput, cost, and deployment
Each capture requires browser execution and image persistence, so account for browser capacity, storage, and transfer in your deployment design. The amount of work depends on how many sites you capture, how often you refresh them, and what capture scope and output size you choose; there is no universal performance or cost figure established here. Confirm that the runtime where your job executes can launch the browser and has the required browser binaries. For large or recurring workloads, a managed screenshot service is another architectural option, but compare its behavior and terms against your needs rather than assuming a specific provider or cost.
Target-site access
Capture only sites you are permitted to access and consider the target site’s policies and behavior. A browser screenshot workflow does not guarantee that a site will load, allow automation, or display identical content on every run.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Common problems and fixes
| Symptom | Likely cause | What to check |
|---|---|---|
| The script cannot launch a browser | The browser binary may not be installed or available in the job runtime. | Install the Playwright browser required by the script in that environment and verify that the runtime supports launching it. |
| The screenshot is blank or missing content | The page may not have reached the condition your capture treats as ready, or the target may have failed to load. | Inspect navigation errors and choose a readiness condition suitable for that site. Keep the previous asset if a refresh is unusable. |
| A selected-region screenshot fails | The selector may not exist or may not identify a stable element on that site. | Check the target’s rendered markup, wait for the locator if appropriate, or fall back to a viewport capture. |
| A remote thumbnail is rejected by Next.js Image | The remote host may not match the configured image URL pattern. | Configure the permitted host pattern in next.config.js and ensure the stored asset URL matches it. |
| Cards show inconsistent framing or unexpectedly large images | Captures may use different viewports, scopes, or device-pixel settings. | Standardize the viewport and scope; reserve full-page or high-resolution capture for cases that need them. |
| One slow target delays the rest | A page may be slow or fail to settle. | Use bounded navigation and job timeouts, isolate failures per listing, and apply a retry policy outside the visitor’s page request. |
Or skip the browser setup
ScreenshotNeo provides a screenshot API and MCP server for developers. A single GET request can return a PNG, JPEG, WebP, or PDF. To capture a directory target, replace the example URL with the listing URL:
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server includes take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients.
The Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Every feature is on every plan, and yearly billing gives two months free. Sign up for ScreenshotNeo free: 1,000 screenshots a month, no card required.
Frequently Asked Questions
Can Next.js Image take a screenshot of a URL?
No. It renders an image asset you supply. Use a browser capture workflow such as Playwright to screenshot a target website, then render the stored result.
Should directory thumbnails be full-page screenshots?
Usually not for compact cards: a fixed viewport keeps framing more consistent. Use full-page capture when the entire tall page is useful as an image.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
