Framework · Next.js
Website audit for Next.js sites
Hydration cost, image misuse and metadata gaps in App Router and Pages Router apps.
Free scan takes 30 seconds. Want the whole site? Get the Deep Audit – $29
In every report
- Lighthouse on a mobile device: LCP, INP/TBT, CLS, page weight
- 20+ technical SEO checks on every crawled page
- Automated accessibility audit
- AI copy and conversion review with ready-to-paste rewrites
- Next.js-aware findings and a prioritised 30-day plan
Why Next.js sites lose rankings and conversions
Next.js gives you every tool for a fast, well-indexed site, and makes it just as easy to ship a slow one. The usual suspects: client components where server components would do, so the page hydrates a large JavaScript bundle to render static content; next/image used without sizes so phones download desktop-sized images; and third-party scripts added with plain <script> tags instead of next/script with a strategy.
Metadata is the other gap. The App Router’s metadata API is powerful, but a single static export in the root layout means every page shares one title and description, canonicals are forgotten on dynamic routes, and generateMetadata is never written for [slug] pages. Sites migrated from the Pages Router often carry both next/head and metadata exports, with the last one silently winning.
WebVitalist measures the deployed site – not your local build – so you see what users and crawlers actually receive after edge caching, ISR and streaming have done their work.
Checks
What we check on Next.js
On top of the standard technical, performance, accessibility and copy checks, the report looks for the problems specific to Next.js.
- 01 Hydration cost: client bundle size, Total Blocking Time and INP on mobile
- 02 next/image usage: missing sizes, priority on the LCP image, unoptimised remote images
- 03 Metadata API: shared titles and descriptions, missing canonicals on dynamic routes
- 04 Third-party scripts loaded without next/script strategies
- 05 Streaming and Suspense boundaries that delay LCP content
- 06 Route-level Open Graph images and JSON-LD on article and product routes
- 07 Server response time (TTFB) across static, ISR and dynamic routes
- 08 Font loading via next/font versus external stylesheets
Fix Pack · $149
How the Fix Pack works for Next.js
Fixes are delivered as TypeScript: generateMetadata functions for dynamic routes, metadata exports with alternates.canonical, next/image props (sizes, priority, fill), next/script strategy changes, and JSON-LD components for the App Router. Where the Pages Router is detected, the equivalents use next/head and getStaticProps. Each fix names the file it belongs in, e.g. app/(marketing)/page.tsx.
FAQ
Next.js questions, answered.
Does the audit work with the App Router and React Server Components?
Yes. We audit the rendered HTML and the JavaScript actually shipped to the browser, so it reflects your server/client component split. Fixes are written for the App Router by default.
Can you tell which components should be server components?
We cannot see your source, but the report quantifies the client bundle and hydration cost and lists which visible sections are static, which is usually enough to spot the candidates.
Do you audit the Vercel deployment or my own hosting?
Whatever URL you give us. Hosting is detected (Vercel, Netlify, Cloudflare, self-hosted) and the performance findings account for edge caching and ISR behaviour.
Other platforms