NEXT.JS INTEGRATION

Capture rendered pages from a secure Next.js server boundary

Call Snapshot Site from a Route Handler, Server Action, or background worker—not from a public client component. Return an application-owned result while the API key remains in server-only configuration.

Server only
Private API key
Route Handler
Small integration
5 formats
Image, PDF, HTML
Install:npm install @snapshot-site/snapshot-site
Auth:SNAPSHOT_SITE_API_KEY
Get started for free
Next.js capture workflow
Snapshot Site themed Next.js screenshot API integration illustration
Good fits
App Router products that generate previews or reports
Server jobs that archive public pages
CMS workflows that need rendered thumbnails
Teams avoiding a browser binary in Next.js infrastructure

A safe Next.js screenshot architecture

The framework makes server and client code look close together, so the most important design choice is the trust boundary.

1

Server-owned request

Create the Snapshot Site client only in code that cannot enter the browser bundle.

2

Validated input

Allow known hosts or apply a destination policy before accepting a user-supplied URL.

3

Explicit capture state

Set viewport, full-page behavior, format, and readiness for reproducible output.

4

Application-owned response

Validate and store the returned asset before exposing a stable product URL.

Implementation workflow

Ship a Next.js route handler

1

Store SNAPSHOT_SITE_API_KEY in server environment configuration

2

Validate the requested URL against the product destination policy

3

Call Snapshot Site from an App Router route handler

4

Return a stored identifier or controlled asset URL

Next.js screenshot API example

TypeScript

Capture from an App Router endpoint

This route keeps the secret off the client and rejects an unapproved destination before capture.

import { NextResponse } from "next/server";
import { SnapshotSite } from "@snapshot-site/snapshot-site";

const client = new SnapshotSite(process.env.SNAPSHOT_SITE_API_KEY!);

export async function POST(request: Request) {
  const { url } = await request.json();
  const target = new URL(url);
  if (target.protocol !== "https:") {
    return NextResponse.json({ error: "HTTPS required" }, { status: 400 });
  }

  const result = await client.capture({
    url: target.toString(),
    format: "webp",
    width: 1440,
    height: 900,
    fullSize: true,
  });

  return NextResponse.json({ result });
}

Why the server boundary matters in Next.js

A screenshot request is privileged infrastructure work. It carries a paid API credential, accepts a network destination, and may create an artifact that your product later shares. Treating it like an ordinary browser fetch exposes the key and makes destination policy difficult to enforce.

A Route Handler provides a compact boundary: authenticate the caller, validate the target, create the capture request, and normalize errors. Larger products can place the same logic in a queue worker so user requests do not wait for browser rendering.

Rendering a Next.js application reliably

Hydration, streamed content, optimized images, and client-side data can appear after initial HTML. Define the visual state you need, then use the smallest reliable delay or documented readiness mechanism. Keep the viewport fixed because it determines breakpoints and image selection.

For authenticated previews, prefer a short-lived URL specifically designed for capture. Snapshot Site is output-oriented; it does not expose an interactive tab for completing a login flow.

Production checklist

  • Authenticate your own route before accepting capture work.
  • Keep the Snapshot Site key in server-only configuration.
  • Validate protocols and allowed destinations.
  • Persist request settings with the generated asset.
  • Classify timeout, validation, and provider failures separately.
  • Use a queue when capture volume or latency can exceed a web request budget.

Review the authentication guide before launch and use the API documentation as the source of truth for request fields.

Snapshot API for Next.js FAQ

Can I call the screenshot API from a Next.js Client Component?

Do not put the API key in a Client Component or browser request. Call an authenticated route handler or server function owned by your application.

Does this work with the Next.js App Router?

Yes. Route Handlers, Server Actions, and background jobs can make server-side API calls. Choose the boundary that matches the product workflow.

Should the route return the provider URL directly?

A prototype can, but production systems usually validate the response, store the artifact, and return an application-owned identifier with suitable access control.

Can Snapshot Site render a deployed Next.js page?

Yes, when the renderer can reach the HTTP or HTTPS URL and the page reaches the intended state within the configured preparation window.

How should preview deployments be protected?

Use an authorized, short-lived preview URL that the renderer can reach. Do not embed durable credentials or secrets in shared URLs.

Where should I configure the API key?

Use server-only environment configuration or a secret manager. Confirm that the variable is not prefixed or exported for browser use.

How do I capture responsive variants?

Issue separate requests with intentional widths and heights, then store each viewport beside its result.

When is Playwright a better fit?

Use Playwright when the job needs clicks, form entry, a multi-step login, assertions, or persistent browser state before capture.

Related resources

Snapshot Site HomeWebsite Screenshot APIJavaScript RenderingTypeScript SDKPlaywright Screenshot GuideAPI DocumentationPricingReact Screenshot APIScreenshot API Authentication

Add a secure capture route to Next.js

Start with one authorized URL and explicit viewport, then validate storage and access before increasing volume.

Get started for freeRead the API docs