Next.js Integration

ostr.io pre-rendering integration options for Next.js apps. Two first-class paths are supported in-app; several additional integrations route bot traffic without touching your Next.js code at all.

• Pre-rendering overview
• Rendering endpoints
• Complete Next.js middleware example

Contents

• Pick an integration
• Option 1 — Self-managed middleware.ts
• Option 2 — seo-middleware-nextjs NPM package
• Option 3 — Infrastructure-level (no code changes)
• Validation

Pick an integration

Option	Where it runs	Code changes	Best for
Self-managed middleware.ts	Next.js middleware (edge)	Copy one file	Full control, no extra dependency
seo-middleware-nextjs NPM package	Next.js middleware (edge)	One-line import	Maintained bot list & fewer moving parts
Vercel Routing Middleware	Vercel edge (before Next.js)	Copy one file	Deployed to Vercel, framework-agnostic
Cloudflare Worker	Cloudflare edge	None	DNS on Cloudflare, zero app changes
Netlify integration	Netlify edge	None	Deployed on Netlify Pro/Enterprise
Nginx / Apache / Caddy	Reverse proxy	None	Self-hosted Next.js behind a proxy

Option 1 — Self-managed middleware.ts

Copy examples/next.js/middleware.ts to the project root or /src/ directory. The file is a complete, ready-to-deploy middleware.ts that detects bot traffic using the canonical crawler regex and proxies matching requests to https://render.ostr.io.

Set the OSTR_AUTH environment variable (Basic <base64 user:password> from the ostr.io pre-rendering panel) in your deployment environment.

No extra npm dependency is required — the middleware uses only NextRequest / NextResponse.

Option 2 — seo-middleware-nextjs NPM package

Maintained Next.js wrapper around spiderable-middleware. One-line import into your middleware.ts; bot list, renderer routing, and configuration defaults are kept up to date upstream.

• 📦 seo-middleware-nextjs on NPM
• 🐙 veliovgroup/seo-middleware-nextjs — installation, API, matcher configuration, and options

Pick this option when you want the bot-detection list and renderer upgrade path to be maintained by the spiderable-middleware family of packages rather than copy-pasting a file.

Option 3 — Infrastructure-level (no code changes)

When you cannot modify middleware.ts — or you prefer to keep pre-rendering concerns out of the app — route bot traffic before Next.js ever sees it:

• 👷‍♂️ Via Nginx — reverse-proxy integration, works with next start or a Node server.
• 🌤️ Via Cloudflare Worker — DNS/edge-level, works with any Next.js host.
• ✨ Via Netlify — enable in Netlify site settings (Pro/Enterprise).
• ▲ Via Vercel Routing Middleware — Vercel-edge middleware, works for any framework.
• 🥞 Via Supabase Edge Functions — Deno-native middleware for apps served from Supabase (plain Deno.serve, Hono, Oak, Fresh).

Validation

Bot request should return a pre-rendered snapshot with X-Prerender-Id:

curl -sI -A 'Googlebot/2.1' https://yourdomain.com/some-page

Regular browser request should pass through to Next.js:

curl -sI -A 'Mozilla/5.0' https://yourdomain.com/some-page

References

• Official Next.js middleware docs
• veliovgroup/seo-middleware-nextjs
• veliovgroup/spiderable-middleware — Node.js middleware the package is built on
• Detect pre-rendering engine requests at runtime