Next.js SEO means making your public pages crawlable, indexable and useful, then keeping them that way as your application changes. Render important content on the server, set page-specific metadata, align canonicals with sitemaps, and test the deployed URLs. The framework supplies the tools. Your implementation decides whether they work.
For enterprise sites, consistency is harder: a CMS edit must reach the page, title, structured data and discovery files without leaving stale versions behind.
I'm Brenden House, founder of Searchmaxxed. This guide is for marketing leaders briefing developers, and developers who need something more useful than “make it SEO-friendly”.
In summary
- Choose rendering by content freshness, not a blanket rule that every page needs server-side rendering.
- Use the App Router Metadata API, with explicit canonicals and checks for inherited fields.
- Test publication, edits and removal. A successful build doesn't prove that Google can see the right page.
- Check Vercel previews separately from production, especially previews on custom domains.
- Connect technical fixes to product, integration and industry pages that bring enquiries, rather than treating performance scores as the whole result.
Match every implementation to your installed Next.js version and caching configuration.
Is Next.js good for SEO?
Yes. Next.js supports server-rendered content, route-specific metadata and generated discovery files. These capabilities make SEO work easier to implement across a large site, but they don't choose your keywords or write useful product pages.
Google can render JavaScript. Its JavaScript SEO documentation still recommends server-side rendering or prerendering because users and crawlers benefit, and some bots cannot execute JavaScript.
That distinction matters. “Uses React” isn't a diagnosis, and “uses Next.js” isn't a clean bill of health.
For a B2B software company, start with the public integration page a buyer needs before requesting a demo. Can a crawler retrieve the explanation, supported systems, setup requirements and links a buyer needs without logging in or operating an interactive interface? That's the useful question.
Searchmaxxed's technical SEO work covers rendering, crawl access, indexing, canonicals, redirects, sitemaps and performance, alongside implementation. We connect those fixes to the product, integration and industry pages customers actually search for, rather than stopping at a long list of warnings.
Our separate JavaScript SEO guide explains Google's rendering process. Here, we configure and test.
Which rendering mode should you use for Next.js SEO?
Use prerendered or cached output for stable public content, and request-time rendering where the public answer genuinely needs fresh data. Keep private application screens separate from your search landing pages.
Rendering means turning application components and data into the HTML a browser receives. Hydration attaches client-side behaviour to that output.
| Approach | What happens | Enterprise use | What to test |
|---|---|---|---|
| Static generation, or SSG | HTML is generated ahead of requests | Product explanations, industry pages, documentation | Whether edits trigger a fresh published version |
| Incremental static regeneration, or ISR | Cached pages can be regenerated after publication | Product catalogues, integration libraries, research | Whether the configured revalidation reaches every affected output |
| Server-side rendering, or SSR | Content is rendered at request time | Public pages needing request-specific or current data | Response time, failed data requests and anonymous access |
| Client-side rendering, or CSR | Browser JavaScript supplies content | Interactive controls and private application features | Whether essential public information depends entirely on browser execution |
You can combine these approaches. Modern App Router pages can combine cached content with streamed sections that arrive later.
The current Cache Components documentation explains that distinction through use cache and Suspense. A loading placeholder can arrive before the content it represents.
Read the configuration first. Next.js maintains a separate previous-model caching guide for applications without Cache Components enabled. It says fetch requests aren't cached by default.
Don't copy a caching snippet from an older tutorial and assume it describes your application. Ask engineering which data is cached, how each stored copy expires, and what happens to the public page when a publishing request fails.
For Searchmaxxed, this sits inside the technical implementation scope: making the page available and current before improving its search targeting or internal links.
How should you implement App Router metadata?
Export metadata for fixed values and generateMetadata for values derived from route parameters or content. Keep these exports in Server Components, even when the page contains interactive Client Components.
Metadata describes a page through fields such as its title, description, canonical URL and social-sharing details. The visible answer still matters.
The official Metadata API reference documents both approaches. Choose one for each segment.
What belongs in the root layout?
Set shared defaults and the production URL base in the root layout. Give each public page its own canonical URL rather than letting every product, integration and industry route inherit the homepage from a shared layout.
This illustrative example uses a fictional software company:
// app/layout.tsx: metadata export alongside your layout component
import type { Metadata } from 'next'
export const metadata: Metadata = {
metadataBase: new URL('https://example.com'),
title: {
default: 'Manufacturing software | Example',
template: '%s | Example',
},
description: 'Software for production planning and reporting.',
}
Then define the route's actual subject:
// app/integrations/erp/page.tsx: metadata export
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'ERP integration',
description: 'Connect production planning with your ERP system.',
alternates: {
canonical: '/integrations/erp',
},
openGraph: {
title: 'ERP integration | Example',
description: 'Connect production planning with your ERP system.',
url: '/integrations/erp',
images: ['/images/erp-integration.png'],
},
}
metadataBase resolves relative metadata URLs against your chosen domain. The path still needs setting.
Use your real production origin. Don't let a preview deployment hostname become the canonical base for public pages because an environment variable happened to contain the wrong value.
How does dynamic metadata work?
generateMetadata reads the route's content and returns the relevant fields. Current documentation shows route params as a promise, so await it before reading the slug.
// app/integrations/[slug]/page.tsx: illustrative fragment
import type { Metadata } from 'next'
import { notFound } from 'next/navigation'
import { getPublishedIntegration } from '@/lib/content'
type Props = { params: Promise<{ slug: string }> }
export async function generateMetadata(
{ params }: Props
): Promise<Metadata> {
const { slug } = await params
const page = await getPublishedIntegration(slug)
if (!page) notFound()
return {
title: page.seoTitle,
description: page.seoDescription,
alternates: { canonical: `/integrations/${page.slug}` },
}
}
getPublishedIntegration represents your own content loader, not a Next.js function. The page component should use the same published record as its metadata, with matching checks for missing content rather than a separate interpretation of availability.
Share the data source. Otherwise, a revised integration page can describe new capabilities while its title or structured data still describes yesterday's product.
Which metadata pitfalls deserve explicit tests?
Nested metadata uses shallow merging. A page-level openGraph object can replace inherited fields you expected to keep.
File-based metadata has higher priority than metadata exports. Check the files first.
Also check title templates, route canonicals, descriptions and social previews after navigation, not only on the first page load. Small mistake, potentially every page.
Our content implementation includes titles and descriptions; the engineering work must make those editorial choices appear on the correct deployed URLs.
Does streamed metadata cause SEO problems?
Streamed metadata isn't automatically faulty. Next.js can send the initial interface first, then append resolved metadata later in the response.
The Metadata API documentation says JavaScript-capable bots, including Googlebot, can interpret those tags through the full DOM. HTML-limited bots get head metadata.
That changes your test. A checker that only examines the beginning of an HTML response can report a missing title when the completed response contains it.
Inspect the completed output. If an important crawler or sharing service gets the wrong metadata, reproduce its behaviour before changing htmlLimitedBots.
Start with the default. The official documentation warns that overriding this setting can lengthen response times.
For a marketing leader, the acceptance question is simple: does the published page expose the intended metadata to the systems that need it?
How do sitemaps, robots and canonicals fit together?
Your sitemap should list the public URLs you want indexed, while canonicals identify each page's preferred version. Robots rules control crawling; they don't replace your indexing policy or access controls.
Start with a published-page inventory. Use it to reconcile what the CMS says is public with the sitemap, internal links and routes actually available on the deployed site.
Next.js supports app/sitemap.ts and app/robots.ts. Both documentation pages describe caching behaviour, so generating them in code doesn't mean they refresh on every request.
| Control | What to specify | Mistake to catch |
|---|---|---|
| Canonical | The preferred URL for this page | Every integration pointing to the homepage |
| Sitemap | Published, canonical URLs you want indexed | Drafts, redirects or retired pages remaining listed |
lastModified | The date of a meaningful content update | Replacing every date with the build time |
robots.txt | Crawl rules and the sitemap location | Blocking public content or resources needed for rendering |
noindex | Pages that should stay out of search | A preview rule reaching production |
hreflang | Equivalent language or regional versions | Alternates pointing to missing pages or unrelated content |
Map equivalent regional pages explicitly. A regional label isn't a reason to create duplicate pages without a useful difference.
Google doesn't render blocked pages. It also warns that removing an initial noindex through JavaScript may not work as intended.
Use authentication for private information. A crawler instruction isn't a lock.
At Searchmaxxed, sitemap and canonical fixes sit alongside site structure and internal links. An orphaned product page still needs a useful path from relevant public pages, such as its category, supporting documentation or an industry use case.
What happens when a page disappears?
Decide whether the old URL has a genuine replacement or should become a not-found page. Update its discovery paths too.
Next.js has an important streaming detail. Its not-found documentation says a missing page returns 404 before streaming, but keeps 200 after streaming begins.
In both cases, Next.js injects noindex. Check the response status and rendered robots tag together, rather than treating a pretty error screen as proof.
For migrated URLs, test the redirect destination too. Arriving somewhere isn't enough if that destination is irrelevant, blocked or missing.
What should you check beyond metadata?
Check visible content, crawlable links, structured data and real page behaviour. An empty page stays empty.
Use anchors with real destinations. Don't make your integration library discoverable only through a search box or an interactive filter.
JSON-LD is a structured-data format that describes the page's entities and relationships. Next.js recommends rendering it in a native script element within a page or layout.
Use the official JSON-LD guidance, including safe serialisation of content that enters the script. Match the markup to visible facts, then validate it.
For a manufacturer, that means accurate product specifications and organisation details drawn from the published product record, not ratings invented to fill a template. For a public-sector service, it means describing the actual service and responsible organisation.
Performance belongs here too. Review large images, font loading, third-party scripts and unnecessary client-side code, then test the affected templates on mobile.
| Core Web Vital | What it measures | Where to investigate |
|---|---|---|
| Largest Contentful Paint, or LCP | Loading of the largest visible content element | Main image, server response and rendering delays |
| Interaction to Next Paint, or INP | Responsiveness to user interaction | Heavy scripts and work on the browser's main thread |
| Cumulative Layout Shift, or CLS | Unexpected movement of visible elements | Missing image dimensions and late-loading content |
Use Lighthouse to investigate problems, then compare with real-user performance data where available. A local test and a visitor's experience aren't interchangeable.
Use next/image, next/font and script-loading controls where appropriate, but measure the result rather than treating a component import as proof of speed.
Searchmaxxed's scope includes Core Web Vitals and mobile rendering. The practical outcome is a page people can read and use on their phone, with an enquiry form that works when they need it.
What should you check before a Vercel deployment goes live?
Check the intended environment, canonical host, access rules and indexing headers on the actual deployment. Repeat them after release.
Vercel separates Preview and Production environments, each with its own configuration. The production values may differ.
Its preview-indexing guidance describes a particularly useful exception: previews normally receive X-Robots-Tag: noindex, but custom branch domains don't automatically receive it.
Check the headers. Don't assume staging.example.com is excluded because the generated preview URL was.
Retain headers and HTML with GET.
curl -sS -D headers.txt -o page.html https://example.com/integrations/erp
Inspect the status, any redirect location, indexing headers and completed HTML. Next, inspect the browser output.
For your release checklist:
- Production domain resolves to the intended release.
- Public pages work without authentication or a browser challenge.
- Production canonicals and sitemap URLs use the production host.
- Preview indexing controls haven't leaked into public pages.
- Redirects, missing pages and regional variants behave as intended.
- The main content and enquiry path survive mobile rendering.
- Search Console inspection agrees with the intended public output where checked.
A passing build is useful. It proves a different thing.
How do you test enterprise Next.js SEO without checking every page manually?
Test shared templates automatically, then inspect representative public URLs and high-value exceptions. Include content changes, not just code deployments.
For a B2B SaaS team launching an integration library, use this proposed acceptance checklist. It illustrates the tests; it isn't a client result.
| Change to test | Expected public result | Evidence to retain |
|---|---|---|
| Publish an integration | Page, title, canonical, internal link and sitemap entry agree | URL, content revision, rendered output and sitemap entry |
| Edit its supported features | Visible copy, metadata and JSON-LD use the intended revision | Before-and-after content plus cache refresh result |
| Rename its URL | Old URL redirects to the relevant new page | Redirect response and destination checks |
| Retire an integration | Removal policy is applied; obsolete discovery links disappear | Response, robots tag, sitemap and internal-link checks |
| Add an Australian variant | Regional pages and alternates match the approved market content | Canonicals, alternate links and visible regional differences |
| Promote the release | Production is accessible and indexable where intended | Production headers and rendered page, not preview evidence alone |
The edit row deserves attention. It's possible for the body to refresh while metadata, schema or the sitemap still comes from another cache.
Ask engineering to record the content revision behind each output during testing. That makes a stale-data disagreement something you can reproduce, rather than an argument about screenshots.
The same method suits a manufacturing catalogue or public-sector service directory, with checks tied to what happens when content is published, changed or removed.
Our headless CMS SEO guide covers the content model behind this. Next.js must deliver those decisions.
Searchmaxxed's managed work includes implementation and weekly releases, with the website, repository, content and data owned by the client. This checklist makes that ownership practical: your team can inspect what changed and what went live.
Is Searchmaxxed right for your Next.js site?
Searchmaxxed fits teams that need technical SEO connected to page production and implementation, rather than recommendations that sit outside the development queue. We build the supporting content too.
Growth System covers ongoing page work alongside technical SEO, schema and measurement. Agentic Search Engineering extends that work with comparison, industry and integration page families for buyers who need different questions answered before they enquire. Custom & Enterprise can include dedicated engineering and custom reporting, with scope across multiple markets rather than a single set of pages for everyone.
For a Next.js site, the scope should name the affected templates, content sources, release access and checks before work starts. The package name doesn't settle those details.
You may not need us. An established in-house search team with engineering capacity can implement and maintain this checklist itself.
| Searchmaxxed is a good fit if | Look elsewhere if |
|---|---|
| You need technical SEO and page implementation together | You want strategy advice with no changes to your site |
| You need support building public product, integration and industry pages | Your in-house search and engineering teams can handle the work |
| You need ongoing search work across multiple markets | You only need changes to private application screens |
Private dashboards aren't the brief. Start by identifying the public pages customers should find and the questions those pages should answer, rather than buying SEO for an inaccessible dashboard.
Frequently asked questions
Does Next.js handle SEO automatically?
No. Next.js provides rendering, metadata and discovery-file features, but you still need to configure them and build useful, connected pages.
Do I need next-seo with the App Router?
Not for basic metadata. The App Router has a built-in Metadata API; add another library only when it solves a specific requirement your implementation lacks.
Should I use next/head in the App Router?
Use the Metadata API for App Router page metadata. Keep Pages Router examples separate, because their head-management patterns aren't interchangeable with App Router exports.
Can a page use Client Components and still have SEO metadata?
Yes. Keep the page-level metadata export in a Server Component and move interactive logic into separate Client Components. The official metadata reference demonstrates this arrangement.
Is server-side rendering always better than static generation for SEO?
No. Both can expose public content in HTML. Choose according to freshness, performance and publishing needs, then verify the output your crawlers receive.
Why is a new CMS page missing from my sitemap?
Check publication filters, generated paths and sitemap caching first. Next.js supports cached sitemap handlers, so a live page doesn't prove its discovery file has refreshed.
Can a Vercel preview appear in search?
Custom-domain previews need particular attention. Vercel's default preview noindex header is omitted when a custom domain is assigned to a non-production branch.
What should you do next?
Start with a valuable public page and test its full publishing cycle: create it, change it, rename it and remove it. Keep the evidence.
If you want Searchmaxxed to handle the technical SEO and page implementation, bring your site, stack and search priorities to the conversation. Let's talk pricing.