SEO for Next.js: what to set up and what breaks

Start with the rendering mode, not the plugin list

Search engines can run JavaScript, but they do it in a second pass that can lag behind the first crawl. Content that exists in the HTML response is seen at once. Content that appears only after a browser fetch may be seen late, or in a thin form. In Next.js the choice is made per route, so make it deliberately.

A quick test: open the page, use view-source, and search for the sentence you want to rank for. If it is not there, it depends on JavaScript, and that is the first thing to fix.

Set up the pieces that every route needs

1. Metadata per routeUse the Metadata API in the App Router: a static metadata export for fixed pages, generateMetadata for dynamic ones. Every route gets a unique title, a description written for a click, and an Open Graph image.
2. Self-referencing canonicalSet alternates.canonical on each page to the clean, final URL. This stops tracking parameters, preview domains and trailing-slash variants from competing with the real page.
3. One URL formatDecide on trailing slash or none in next.config and keep it. Add redirects there for old paths, using permanent redirects for pages that moved for good.
4. Sitemap and robotsGenerate sitemap.xml and robots.txt from the app itself so they never drift from the routes. Include only URLs that return 200 and are meant to be indexed.
5. Structured dataAdd JSON-LD in the page component for Organization, Article, Product or FAQ where the content really matches. Validate it before release.
6. Images and fontsUse the Image component with real alt text and set width and height to prevent layout shift. Load fonts through the built-in font loader to avoid late swaps.

A worked example: one product route

Take an online store with a dynamic route at /products/[slug]. This is an illustration of the method, not client data. The route should pre-build its most visited products with generateStaticParams, then serve the rest on demand and revalidate every few hours.

• generateMetadata reads the product and returns a title such as the product name plus category, a description from the first useful sentence, and the canonical.
• The page component renders price, availability and description on the server, so they are in the HTML.
• Product JSON-LD is built from the same data object as the visible text, so the two cannot disagree.
• If the slug does not exist, the route calls notFound() so the response is a real 404, not a blank page with a 200.
• Variant selectors such as size or color change the page with client code, but each variant that needs to rank gets its own crawlable link or its own URL.

The same pattern works for service areas, locations and article archives. If you are weighing Next.js against a CMS-first build, the Next.js vs WordPress comparison sets out the trade-offs.

Pitfalls we see on Next.js sites

• Content fetched in useEffect or behind a click, which is missing from the server HTML.
• Soft 404s: a custom not-found view that still returns status 200. Check with a header request, not with your eyes.
• Preview and staging deployments that are indexable. Block them with authentication or a noindex header, and confirm it.
• Redirect chains created by middleware plus config redirects plus a trailing-slash rule, sometimes three hops long.
• Infinite scroll with no paginated URLs, so deep items have no link a crawler can follow.
• Locale routes without hreflang, or with hreflang that points to redirected URLs.
• Heavy client bundles from third-party scripts that push Interaction to Next Paint up on mobile.
• A single global title template that makes every page title identical after the first word.

Shipping a rebuild? Crawl the old site before launch and map every old URL to its new one. Most ranking loss after a Next.js migration comes from missed redirects, not from the framework.

How to check your work

1. Fetch the raw HTMLUse a header and body request, or view-source, and confirm the title, canonical, headings and main text are present.
2. Inspect in Search ConsoleRun URL Inspection on a sample of each template, then open the crawled HTML and the rendered screenshot.
3. Test structured dataPaste the URL into Google's Rich Results Test and fix errors before warnings.
4. Watch Core Web VitalsCompare lab results with the field data in Search Console, since real devices differ from your laptop.
5. Monitor after releaseCheck Pages indexing weekly for the first month and look at newly excluded URLs.

If you want an outside review, a technical SEO audit covers rendering, redirects, crawl paths and speed for a Next.js site. You get a fixed quote after a short call through the contact page.