Use ScreenshotOne from server-side code in Next.js: keep the access key in a server-only environment variable, call ScreenshotOne’s HTTPS /take endpoint (or its JavaScript/TypeScript SDK), and return the binary response from a Route Handler. Validate target URLs before fetching them, and handle upstream JSON errors separately from image or PDF data.
Set up the API key and server endpoint
-
Create or copy an access key from ScreenshotOne’s API keys page. The access key authenticates requests; the separate secret key is used for signing or webhook verification.
As an Amazon Associate I earn from qualifying purchases.
-
Store the access key in server-side environment configuration or a secrets manager, such as
SCREENSHOTONE_ACCESS_KEY. Do not commit it, put it in a client component, or expose an unsigned request URL containing it. ScreenshotOne’s guidance is to “Treat your API key like a password.”Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Add a Route Handler under the
appdirectory, for exampleapp/api/screenshot/route.ts. The linked Next.js documentation covers version 13 and describes handlers inroute.jsorroute.tsusing Request and Response APIs; check the documentation for your installed Next.js version for current runtime details. -
Use HTTPS for the request. ScreenshotOne warns that HTTP does not encrypt requests and can expose keys, authorization headers, and cookies in transit.
The following is an illustrative Route Handler pattern. It returns PNG bytes on success and a JSON error on failure. The URL allowlist is intentionally narrow; change it to the destinations your application actually needs.
const allowedHosts = new Set(["example.com", "www.example.com"]);
function validateTarget(value: string | null): URL | null {
if (!value) return null;
try {
const target = new URL(value);
if (target.protocol !== "https:" || !allowedHosts.has(target.hostname)) {
return null;
}
return target;
} catch {
return null;
}
}
export async function GET(request: Request) {
const incoming = new URL(request.url);
const target = validateTarget(incoming.searchParams.get("url"));
if (!target) {
return Response.json({ error: "A permitted HTTPS URL is required" }, { status: 400 });
}
const accessKey = process.env.SCREENSHOTONE_ACCESS_KEY;
if (!accessKey) {
return Response.json({ error: "Screenshot service is not configured" }, { status: 500 });
}
const params = new URLSearchParams({
url: target.toString(),
access_key: accessKey,
format: "png",
});
let upstream: Response;
try {
upstream = await fetch(`https://api.screenshotone.com/take?${params}`);
} catch {
return Response.json({ error: "Could not reach the screenshot service" }, { status: 502 });
}
if (!upstream.ok) {
const error = await upstream.json().catch(() => null);
return Response.json(
{ error: error?.error?.message ?? "Screenshot request failed" },
{ status: upstream.status },
);
}
return new Response(await upstream.arrayBuffer(), {
headers: {
"Content-Type": upstream.headers.get("content-type") ?? "image/png",
"Cache-Control": "no-store",
},
});
}Call the application route from a browser or another server with a URL-encoded target, for example /api/screenshot?url=https%3A%2F%2Fexample.com. Because the access key is added only inside the handler, it is not sent in the browser’s request.
Validate requests and return the right kind of response
A route that accepts arbitrary destinations can be abused to make your server request unintended URLs. Validate the scheme and host, restrict which ScreenshotOne options callers may set, and apply application-level authorization or rate limits where needed. Avoid passing through arbitrary user-supplied headers, cookies, or options.
ScreenshotOne’s API accepts GET and POST. Use POST JSON for large HTML or Markdown inputs instead of placing large values in the query string; the documented maximum POST body size is 100 MiB. The API supports several output formats, including PNG, JPEG, WebP, AVIF, PDF, HTML, and Markdown, depending on the request options. Check the returned content type rather than assuming every successful response is a PNG. Errors are JSON with an error code and message, so do not try to serve an error body as an image.
For pages that require authentication, ScreenshotOne documents passing authorization headers or cookies when you own the site or have permission to access it. Obtaining session cookies may require custom sign-in code. Do not forward a user’s credentials or session cookies without an explicit, secure design.
Use the official JavaScript or TypeScript SDK instead
For a typed client, install ScreenshotOne’s documented package:
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated 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 matchnpm install screenshotone-api-sdkThe documented SDK flow creates a Client with access and secret keys, sets the target with TakeOptions.url(...), calls client.take(options), and reads the response as an ArrayBuffer. Recent SDK methods are asynchronous; follow the current package documentation for exact imports and method signatures. For a URL that must be shared, use generateSignedTakeURL() rather than exposing an ordinary unsigned URL with the access key.
Rank #3
See ScreenshotOne’s JavaScript and TypeScript SDK examples and Getting Started guide for the current SDK and request details.
Choose screenshot options deliberately
ScreenshotOne exposes options for capture behavior and output, so keep your public route’s supported set small and document its defaults. Consult the Screenshot Options reference for the current parameter names and supported formats. Common decisions include:
-
Output: select an image format or request PDF, HTML, or Markdown when your application needs those outputs; preserve the upstream content type in the response.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Input size: send large HTML or Markdown as POST JSON rather than a long query string. The documented request body maximum is 100 MiB.
-
Access: pass authentication headers or cookies only for pages you are entitled to access, and avoid leaking secrets to clients or logs.
Troubleshoot common failures
-
Missing-key or authentication error: check that
SCREENSHOTONE_ACCESS_KEYexists in the server runtime environment and that it is the access key, not the secret key. Restart or redeploy after changing environment configuration. -
Browser exposes the key: move the ScreenshotOne call into a Route Handler or other server-only code. Never put the key in a client component or a shareable unsigned URL. If a key was exposed, replace it.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Invalid target or unexpected destination: confirm the URL is valid HTTPS and permitted by your allowlist. Reject unsupported hosts before calling the upstream API.
-
Image endpoint returns JSON or appears corrupt: inspect the upstream status and content type. On failure, parse the JSON error and return an appropriate error response instead of treating it as image bytes.
-
Large input fails: move large HTML or Markdown from GET query parameters to a POST JSON body. Check that the body stays within ScreenshotOne’s documented 100 MiB maximum.
-
Authenticated page is not rendered as expected: verify that the page permits the access method used and that the required headers or cookies are present. Do not use another person’s session data.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsSpecial offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Next.js route behaves differently than an example: confirm the handler syntax and runtime settings against the documentation for the version installed in your project. The cited Route Handler page is specifically for Next.js 13.
Or skip the browser setup
ScreenshotNeo is a screenshot API and MCP server for developers. Its one-call API can return a PNG, JPEG, WebP, or PDF; for this example, save the response as a WebP file. Keep the API key server-side in your Next.js app.
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 documentation for request options. It removes cookie banners, newsletter popups, and chat widgets before the shot; bot checks, blank pages, and failed loads are never billed; and its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000. Sign up free for ScreenshotNeo.
Frequently Asked Questions
Can I call ScreenshotOne directly from a Next.js client component?
No. Put the access key and ScreenshotOne request in server-side code, such as a Route Handler, so the key is not exposed to visitors.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Can a Next.js route return a PDF instead of an image?
Yes. ScreenshotOne supports PDF output as well as image and other formats; request the needed format and preserve the upstream response content type.
Quick 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.
