How to Detect if a Website Uses Next.js: 5 Methods

Next.js has become the default choice for production React applications. Companies like Vercel, Hulu, TikTok, and Notion use it to build fast, SEO-friendly web experiences. But from the outside, a well-built Next.js site can look like any other website—there is no visible badge announcing the framework.

Whether you are researching a competitor’s technology decisions, auditing a site for known Next.js vulnerabilities, qualifying sales leads by their tech stack, or evaluating a potential employer’s engineering choices, you need reliable detection methods. This guide covers five approaches, from quick manual checks to fully automated API-based detection at scale.

Why Detect Next.js Specifically

Next.js vs Plain React — Why the Distinction Matters

Every Next.js site uses React under the hood, but the reverse is not true. Detecting Next.js tells you more than just “this site uses React.” It reveals architectural decisions:

• Server-side rendering: Next.js provides built-in SSR, SSG, and ISR. A company using Next.js has invested in SEO and initial load performance—a different engineering priority than a client-side React SPA.
• Vercel alignment: Many Next.js sites deploy on Vercel, which means they likely use Vercel’s edge network, serverless functions, and analytics. This tells you about their infrastructure budget and vendor preferences.
• Team sophistication: Next.js adoption signals a team that follows modern React patterns—server components, file-based routing, API routes. This is useful context for sales conversations or competitive analysis.
• Version-specific vulnerabilities: Next.js has had its own CVEs separate from React. Detecting Next.js specifically lets you cross-reference against known vulnerabilities in the NVD.

For a broader overview of detecting all JavaScript frameworks, see How to Detect What JavaScript Framework a Website Uses. For React-specific detection (including sites that use React without Next.js), see How to Detect if a Website Uses React.

Use Cases for Next.js Detection

• Competitive intelligence: Know whether competitors chose Next.js over Remix, Gatsby, or a custom React setup. This reveals their priorities around SEO, performance, and developer experience.
• Security auditing: Next.js versions have had authentication bypass and SSRF vulnerabilities. Detecting the framework (and ideally the version) is the first step in a targeted vulnerability assessment.
• Sales prospecting: If you sell monitoring, analytics, or developer tools that integrate with Next.js, knowing which companies use it makes your outreach relevant. This is the same logic behind finding companies that use Stripe for payment-related prospecting.
• Migration planning: Before migrating from the Pages Router to the App Router, or upgrading from Next.js 13 to 14, you need to confirm what is actually running in production.

Method 1 — Check the Page Source for __NEXT_DATA__

The fastest and most reliable manual check. Open the page source (Ctrl+U on Windows/Linux, Cmd+Option+U on macOS) and search for __NEXT_DATA__.

<!-- The definitive Next.js fingerprint -->
<script id="__NEXT_DATA__" type="application/json">
  {"props":{"pageProps":{}},"page":"/","query":{},"buildId":"abc123XYZ"}
</script>

This script tag is injected by Next.js on every server-rendered page. It contains the serialized page props, the current route, query parameters, and the build ID. If you see it, the site is using Next.js—no ambiguity.

Also look for the root element:

<div id="__next">
  <!-- The entire application renders inside this div -->
</div>

And check for asset paths that start with /_next/static/:

<script src="/_next/static/chunks/main-abc123.js"></script>
<link rel="stylesheet" href="/_next/static/css/app-def456.css">

Pages Router vs App Router Fingerprints

Next.js 13 introduced the App Router as an alternative to the traditional Pages Router. The fingerprints differ slightly:

If you see self.__next_f.push() calls in inline scripts instead of a __NEXT_DATA__ tag, the site is using the App Router with React Server Components. Both patterns confirm Next.js.

Method 2 — Inspect HTTP Headers and Asset Paths

Next.js sets specific HTTP headers that you can check without even viewing the page source. Open the Network tab in DevTools and inspect the response headers for the main document.

X-Nextjs-Cache and X-Nextjs-Matched-Path Headers

Next.js adds these headers on pages that use Incremental Static Regeneration (ISR) or middleware routing:

X-Nextjs-Cache: HIT
X-Nextjs-Matched-Path: /blog/[slug]

The X-Nextjs-Cache header indicates whether the page was served from the ISR cache (HIT), regenerated (STALE), or rendered on demand (MISS). Not every Next.js page has this header—only those using ISR—but when present, it is definitive.

You can check these headers from the command line:

$ curl -sI "https://vercel.com" | grep -i "x-nextjs"
x-nextjs-cache: HIT

The /_next/static/ Asset Path Pattern

Every Next.js application serves its static assets from /_next/static/. In the Network tab, filter by JS or CSS and look for this pattern:

• /_next/static/chunks/webpack-*.js — The webpack runtime chunk.
• /_next/static/chunks/main-*.js — The main application entry point.
• /_next/static/chunks/pages/_app-*.js — Pages Router app component.
• /_next/static/css/*.css — CSS modules and global styles.
• /_next/static/media/* — Images and fonts processed by Next.js.

This asset path convention is unique to Next.js. Other React frameworks use different patterns: Create React App uses /static/js/, Gatsby uses /static/ with different chunk naming, and Remix does not use a /_next/ prefix at all.

Method 3 — Browser DevTools Console Checks

Open Chrome DevTools (F12) and switch to the Console tab. These JavaScript checks detect Next.js at runtime:

// Check for the __next root element
!!document.getElementById('__next')

// Check for __NEXT_DATA__ (Pages Router)
!!document.getElementById('__NEXT_DATA__')

// Check for Next.js router on window
!!window.next

// Check for the Next.js version (when exposed)
window.next?.version

// Check for App Router RSC payload
!!document.querySelector('script[src*="/_next/static"]')

The window.next object is the most direct check. When present, it contains the Next.js router instance. The version property is not always populated, but when it is, you get the exact Next.js version number—valuable for security auditing.

Since Next.js is built on React, you can also verify the React layer:

// Confirm React is present (every Next.js site has React)
!!window.__REACT_DEVTOOLS_GLOBAL_HOOK__

// Check for React Fiber on the __next root
document.getElementById('__next')?._reactRootContainer

If __next exists with React internals but window.next is undefined, the site may have stripped the Next.js runtime object—but the structural markers (asset paths, root div) still confirm the framework.

Method 4 — DetectZeStack Chrome Extension

The DetectZeStack Chrome extension detects Next.js and the entire technology stack from a single toolbar click. Unlike manual DevTools checks, the extension gives you the full picture: the framework (Next.js), the underlying library (React), the CDN and hosting provider (often Vercel for Next.js sites), analytics tools, and more.

This is faster than manual inspection for browsing multiple sites but still requires visiting each page. For automated detection across many domains, you need an API.

Method 5 — DetectZeStack API (Programmatic Detection at Scale)

Manual methods and browser extensions work for one-off checks. When you need to detect Next.js across tens, hundreds, or thousands of sites—for lead qualification, competitive analysis, or security scanning—you need an API.

Quick Check with the Free Demo Endpoint

The DetectZeStack API detects Next.js and 7,200+ other technologies in a single request. Try the free demo endpoint (no API key required):

$ curl -s "https://detectzestack.com/demo?url=vercel.com" | jq '.technologies[] | select(.name == "Next.js" or .name == "React")'

This returns any detected Next.js and React entries from the full technology scan. The demo endpoint is rate-limited but useful for quick verification.

Production API with RapidAPI

For production use with higher rate limits, use the RapidAPI endpoint:

$ curl -s "https://detectzestack.p.rapidapi.com/analyze?url=vercel.com" \
  -H "X-RapidAPI-Key: YOUR_KEY" \
  -H "X-RapidAPI-Host: detectzestack.p.rapidapi.com" \
  | jq '.technologies[] | select(.name == "Next.js")'

A typical response for a Next.js site includes both the framework and its underlying library:

{
  "url": "https://vercel.com",
  "domain": "vercel.com",
  "status": 200,
  "technologies": [
    {
      "name": "Next.js",
      "categories": ["JavaScript frameworks"],
      "confidence": 100,
      "website": "https://nextjs.org"
    },
    {
      "name": "React",
      "categories": ["JavaScript frameworks"],
      "confidence": 100,
      "website": "https://reactjs.org"
    },
    {
      "name": "Vercel",
      "categories": ["PaaS"],
      "confidence": 100,
      "website": "https://vercel.com"
    }
  ]
}

Key fields:

• name — Next.js and React are reported separately, so you can distinguish between the two.
• confidence — A score from 0-100 indicating detection certainty. A confidence of 100 means the fingerprint matched unambiguously.
• categories — Next.js appears under “JavaScript frameworks.” Filter the response by category to isolate front-end technologies.
• version — When detectable, the specific version. Useful for cross-referencing against known CVEs using CPE identifiers.

Batch Scanning Multiple Sites for Next.js

To scan a list of domains for Next.js usage, loop through them with curl:

$ for domain in vercel.com notion.so cal.com; do
    echo -n "$domain: "
    curl -s "https://detectzestack.p.rapidapi.com/analyze?url=$domain" \
      -H "X-RapidAPI-Key: YOUR_KEY" \
      -H "X-RapidAPI-Host: detectzestack.p.rapidapi.com" \
      | jq -r '[.technologies[] | select(.name == "Next.js") | .name] | if length == 0 then "not detected" else "Next.js detected" end'
  done

For larger-scale scanning with rate limiting and CSV export, see the Python tutorial.

Distinguishing Next.js from Gatsby and Remix

All three are React-based frameworks, but they leave different fingerprints. Knowing which one a site uses tells you about the team’s architectural choices:

The DetectZeStack API detects all three as separate technologies, so you do not need to memorize these signals for programmatic detection. But for manual inspection, the root element ID and data script pattern are the fastest differentiators.

When Next.js Detection Fails — Edge Cases

Static Export Mode

Next.js supports a next export mode that generates fully static HTML files with no server runtime. In this mode, the __NEXT_DATA__ script tag is still present (it is baked into the HTML at build time), but there are no server-side headers like X-Nextjs-Cache. The /_next/static/ asset paths remain, so detection still works—but you lose the ISR header signals.

Custom Server Configurations

Some teams run Next.js behind a custom Express or Fastify server that strips or replaces default headers. The X-Nextjs-Cache header may be absent, and the Server header may not mention Next.js. In these cases, page source inspection (looking for __NEXT_DATA__ or /_next/ asset paths) is more reliable than header analysis.

Sites Behind Cloudflare or Reverse Proxies

Reverse proxies like Cloudflare, AWS CloudFront, or Nginx can strip or rewrite response headers. The X-Nextjs-Cache header may be removed by the CDN layer. However, the HTML content—including the __NEXT_DATA__ tag and /_next/ asset paths—passes through unchanged. The DetectZeStack API handles this by analyzing the full HTML response, not just headers. It also performs DNS and TLS analysis to detect the CDN layer itself.

What Next.js Detection Reveals About a Company

Detecting Next.js tells you more than just the framework choice. Combined with other detection layers, it paints a picture of the company’s engineering and business priorities:

• Vercel deployment: If the API also detects Vercel as the hosting provider, the company is likely using Vercel’s paid plans for production hosting. This signals budget for developer tooling and a preference for managed infrastructure.
• SEO investment: Next.js is chosen over plain React specifically for server-side rendering and SEO. Detecting Next.js means the company cares about organic search traffic—relevant if you sell SEO tools or marketing services.
• Modern React patterns: Next.js adoption correlates with teams that follow current React best practices. If you sell React component libraries, testing tools, or developer education, these are qualified prospects.
• Scale signals: The CDN and hosting detection that accompanies framework detection reveals whether the site uses Cloudflare, CloudFront, or another CDN on top of the Next.js deployment—indicating traffic volume and performance requirements.

Get Started with Next.js Detection

For a quick manual check, view the page source and search for __NEXT_DATA__. For anything systematic—lead qualification, competitive research, security audits, or portfolio analysis—the DetectZeStack API is the practical approach.

Every API request returns Next.js detection alongside 7,200+ other technology fingerprints, plus DNS-based infrastructure detection, TLS certificate analysis, and CPE identifiers for vulnerability lookups. These layers give you context that no single manual check can match.

The free tier includes 100 requests per month with no credit card required. That is enough to scan your competitor list, audit a client portfolio, or build a proof-of-concept integration.