Technical SEO with the Next.js App Router: A Practical Playbook

Most "SEO advice" stops at meta tags. Real ranking gains come from the rendering model, the speed of the page, and how clearly you describe your content to crawlers. The Next.js App Router gives you all three — if you wire it up deliberately.

Here's the playbook I use on production sites.

Start with the right rendering strategy

Search engines reward pages that return meaningful HTML quickly. The App Router defaults to server rendering, which means crawlers get fully-formed markup without waiting on client JavaScript.

• Use static generation (generateStaticParams) for content that rarely changes — blog posts, marketing pages, docs.
• Use server components for everything that doesn't need interactivity. Ship less JavaScript, render faster.
• Reserve "use client" for the genuinely interactive bits: forms, toggles, animations.

If a crawler has to execute your JavaScript to see your content, you've already lost time you can't get back.

Own your metadata with the Metadata API

The App Router's Metadata API generates correct, per-route tags at build time. Set a sensible default in the root layout, then override per page:

export const metadata: Metadata = {
  metadataBase: new URL("https://ajinthan.com"),
  title: { default: "Ajinthan — Software Engineer", template: "%s — Ajinthan" },
  description: "Building scalable web & mobile platforms.",
  alternates: { canonical: "/" },
  openGraph: { type: "website", images: ["/og.png"] },
};

metadataBase is the unsung hero here — it turns every relative canonical and Open Graph URL into an absolute one, which is exactly what crawlers and social scrapers expect.

Describe your content with structured data

Structured data (JSON-LD) is how you tell Google what a page is, not just what it says. For a portfolio and blog, three schemas do most of the work:

1. Person / ProfilePage — sitewide identity and social profiles.
2. BlogPosting — headline, author, dates and section for each article.
3. BreadcrumbList — the navigational path, which can earn breadcrumb rich results.

Generate it server-side from trusted data and inject it as a script tag. Never hand-build JSON-LD from user input.

Make Core Web Vitals a build-time concern

You can't out-optimize a slow page with keywords. The three metrics that matter:

• LCP — keep your largest element fast. Use next/image, preload hero assets, avoid render-blocking work.
• CLS — reserve space for images and embeds so nothing jumps.
• INP — ship less client JavaScript; server components help enormously here.

Don't forget the plumbing

A few files quietly do a lot of SEO work:

• sitemap.ts — a generated, always-current sitemap.
• robots.ts — crawl rules plus a pointer to the sitemap.
• An RSS feed — still one of the best ways to syndicate a blog.

Get these right and you've built a site that's fast, legible to crawlers, and honest about its content. That's 90% of technical SEO — the rest is writing things people actually want to read.