---
title: "Next.js SEO"
description: "Next.js SEO from ShoutRank. Metadata, rendering, and the HTML a crawler receives from a Next.js app, including App Router sites."
canonical: https://shoutrank.com/nextjs-seo
markdown: https://shoutrank.com/nextjs-seo.md
---

# Next.js SEO

Next.js SEO from ShoutRank. Metadata, rendering, and the HTML a crawler receives from a Next.js app, including App Router sites.
Next.js SEO makes sure the HTML response contains the title, the links, and the copy. A hydrated screen is not enough.

Next.js can render on the server, at the edge, or mostly on the client. Teams ship a polished app whose first response is a shell. Search and answer engines that do not run the full app never see the offer. The fix is in the rendering and the metadata, not in another blog post.

ShoutRank’s own site is a Next.js app. We still specify changes for your developers to ship. This is not a theme install. It sits under [technical SEO](https://shoutrank.com/technical-seo).

ShoutRank does not guarantee a ranking or a citation.

## The problem

### The main copy arrives after hydration.

View source shows a spinner or an empty main. The title is there. The answer is not.

### Metadata is set in two places.

A legacy Head and the Metadata API disagree. Canonicals flip between deploys.

### Client-side routes have no document.

Filters and tabs change the view without a URL, or with a URL that returns an empty shell.

## How ShoutRank approaches it

We fetch the production URL the way a bot would and compare it to what a person sees. Metadata has a single source. Routes that should be indexed return their content in the first response. Routes that are application state do not pretend to be documents.

We do not require a specific Next.js version. We read the one you run.

## What the work includes

### Fetch comparison

First HTML versus the rendered screen, on the templates that matter.

### Metadata map

Where title, canonical, and robots are set, and which source wins.

### Route classes

Documents to index, and app states that should not be URLs.

### Release check

The same fetches after the next production deploy.

## Process

### Discovery

List the templates behind revenue and category queries.

### Audit

Fetch them and read the HTML, including status codes.

### Strategy

Name the metadata source of truth.

### Implementation

Specify render and metadata changes for the team that owns the repo.

### Monitoring

Refetch after deploy.

### Optimization

Reclassify routes that are still shells.

### Reporting

The comparison, the metadata map, and the deploy that changed the HTML.

## Why ShoutRank

### View source counts

If the offer is not in the response, we do not call the page indexable.

### Your repo, your release

We do not fork the app to sneak in tags.

### App states are not pages

Not every click needs a URL. The ones that do need a document.

## How success is measured

Priority templates whose main copy is in the first HTML.

One canonical source, confirmed after deploy.

Shell URLs removed from the sitemap.

A named client result is published when that client clears the figure. Until then the report is the measurement.

## Questions

### Does this cover the App Router and the Pages Router?

Yes. The check is the response, not the router brand. The implementation notes differ, and we write them for the router you use.

### Will you rewrite the site in Next.js?

No. This service assumes Next.js is already the stack. A replatform is a migration.

### Are client components forbidden?

No. Interactivity can be client-side. The content that should be quoted and ranked needs to be in the HTML.

## Related

- [Technical SEO](https://shoutrank.com/technical-seo): The broader crawl and index work.
- [Programmatic SEO](https://shoutrank.com/programmatic-seo): When Next generates a large set of real documents.
- [SEO migration](https://shoutrank.com/seo-migration): Moving onto or off Next.js.