You built a clean React interface, but Google just will not show it. The problem is rarely your skill. It is usually the render method. Nextjs steps in right here and serves your content in a form search engines can actually read.This guide is for anyone who wants to build an SEO-friendly site with nextjs from scratch. We cover the App Router structure, the metadata API, the difference between SSR and ISR, and sitemap generation with practical examples. The goal is pages that load fast and index correctly.
Why Nextjs is a strong choice for SEO
A classic React app renders in the browser. So when the Google bot first opens the page, it often sees an empty shell. The content arrives only after JavaScript runs. That delay makes indexing harder and can drag your rankings down.Nextjs renders on the server. When the bot requests a page, it gets ready HTML. Headings, text, and links arrive in the first response. This lets search engines read your content right away. The metadata section in the official docs explains this approach in detail.
Start with the App Router and metadata API
The App Router is the file-based routing system introduced in Next.js 13. Each folder maps to a route. You define page metadata with the metadata API. This method works the same way for static and dynamic content.Here is how you set a page title and description:
export const metadata = {
title: "Cloud Server Pricing | Kritm",
description: "Turkey-based VPS plans and pricing.",
alternates: { canonical: "https://site.com/pricing" },
};When your content comes from a database, you use the generateMetadata function. It produces the correct title and description for each request. Setting the canonical tag here prevents duplicate content problems from the start.
The difference between SSR and ISR
Nextjs gives you more than one render strategy. Which one you pick depends on how often your content changes. The table below compares the three core methods.
MethodWhen it rendersBest content
SSG | Once at build time | Pages that rarely change
SSR | On every request | Personalized or live data
ISR | Refreshed at set intervals | Blogs and product lists
ISR is the most balanced option for most sites. The page is served as fast as a static one, yet it refreshes in the background after a set time. You can update a blog post hourly with a revalidate value. That gives you speed and freshness together.
Add sitemap and robots files
A sitemap is essential so search engines can find your pages. Nextjs generates it in a file-based way. You just drop a sitemap.ts into your project root. The file is automatically served at /sitemap.xml.
- Keep unpublished pages out of the sitemap.
- Add a last-modified date for each URL.
- Block private routes from crawling with robots.ts.
- Keep canonical addresses consistent with the sitemap.
The robots file decides which paths bots crawl. Your admin panel or temporary pages should not appear there. Keeping both files in version control lets you track your SEO setup alongside your team.
Rich results with structured data
Structured data tells Google clearly what a page is about. You add it in JSON-LD format, and it opens rich appearances in search results. For a blog post, you can mark up the author, date, and title.You place the script tag inside the page. Because Next.js renders this data on the server, the bot sees it on the first request. Run it through a schema validator and make sure it is error free. Well-built structured data noticeably lifts your click-through rate.
Core Web Vitals and performance
Google weighs page speed in rankings. Core Web Vitals measure three things: loading, interactivity, and visual stability. Nextjs hands you ready tools in these areas. The Image component optimizes pictures automatically and serves them at the right size.You manage font loading with next/font, which reduces layout shifts. You split unnecessary JavaScript on a per-page basis. For these gains to last in production, your site needs to sit on fast infrastructure.At Kritm Cloud Solutions we build Nextjs and SEO projects on the custom software side, and we offer VPS with NVMe disks on the cloud side. For a site that is both set up correctly and hosted fast, take a look at our services, or get in touch to plan it together.In short, nextjs takes most of the weight out of building an SEO-friendly site. Manage your metadata with the metadata API, pick the render method that fits your content, and add a sitemap and structured data. Start with a small project, measure the metrics, then scale.