Meta tags, sitemaps, and server-side rendering: here's how to get Next.js SEO right without over-engineering your stack.
Next.js SEO is a solved problem if you understand what the framework actually renders. Most developers either obsess over metadata or ignore it entirely. The truth is simpler: Next.js gives you the tools, but you need to know when they matter. I've audited dozens of Next.js apps, and the same three mistakes keep showing up.
Why Next.js SEO Matters (and When to Skip It)
Next.js SEO matters because it ships HTML to the browser before JavaScript loads. That's the entire advantage over a client-side React app. Google's crawler executes JavaScript these days, but it does so with a budget. If your app takes four seconds to hydrate, your critical content gets indexed later — or not at all.
Skip the SEO work when you're building an authenticated app behind a login. Dashboards, admin panels, internal tools: none of these need meta tags or sitemaps. Don't waste time on SEO for pages that search engines will never see.
For anything public-facing — marketing pages, blogs, e-commerce — Next.js SEO is non-negotiable. The framework's server-side rendering makes it the best choice for content-heavy React apps.
Getting Started with Next.js SEO
Start with the built-in Metadata API. In Next.js 13+, you export metadata from your layout or page components. No external libraries needed for the basics.
// app/layout.tsx
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'Suhail Roushan — Full-Stack Developer',
description: 'Full-stack developer in Hyderabad building production React and Node.js applications.',
openGraph: {
title: 'Suhail Roushan — Full-Stack Developer',
description: 'Full-stack developer in Hyderabad building production React and Node.js applications.',
type: 'website',
url: 'https://suhailroushan.com',
},
}
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
That's your baseline. Every page gets a default title and description. Now add page-specific metadata:
// app/blog/[slug]/page.tsx
import { getPost } from '@/lib/posts'
interface PageProps {
params: { slug: string }
}
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
const post = await getPost(params.slug)
return {
title: post.title,
description: post.excerpt,
alternates: {
canonical: `/blog/${post.slug}`,
},
}
}
This is the entire foundation. You now have unique titles, descriptions, and canonical URLs for every blog post.
Core Next.js SEO Concepts Every Developer Should Know
Server Components vs. Client Components
This is the biggest mental shift. Server Components render on the server and send HTML to the client. Client Components hydrate in the browser. For SEO, you want your content in Server Components.
// app/blog/page.tsx — Server Component (default)
import { getAllPosts } from '@/lib/posts'
export default async function BlogPage() {
const posts = await getAllPosts()
return (
<div>
{posts.map(post => (
<article key={post.slug}>
<h2>{post.title}</h2>
<p>{post.excerpt}</p>
</article>
))}
</div>
)
}
If you need interactivity, add a Client Component inside the Server Component. The HTML still ships server-rendered with your content intact.
Dynamic Metadata with generateMetadata
Static metadata works for fixed pages. For dynamic routes — blog posts, product pages, user profiles — you need generateMetadata. This function runs on the server and populates the <head> before the HTML ships.
// app/products/[id]/page.tsx
export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
const product = await fetch(`https://api.example.com/products/${params.id}`).then(r => r.json())
return {
title: `${product.name} | Shop`,
description: product.description,
openGraph: {
images: [{ url: product.image, width: 1200, height: 630 }],
},
}
}
This gives you unique meta tags for every product without a single client-side effect.
Structured Data with JSON-LD
Search engines love structured data. It tells them exactly what your content means — product, article, FAQ, breadcrumb. Next.js lets you inject JSON-LD directly into your server-rendered HTML.
// app/faq/page.tsx
export default function FAQPage() {
const faqData = {
'@context': 'https://schema.org',
'@type': 'FAQPage',
mainEntity: [
{
'@type': 'Question',
name: 'What is Next.js SEO?',
acceptedAnswer: {
'@type': 'Answer',
text: 'Next.js SEO refers to the practices of optimizing Next.js applications for search engines, leveraging server-side rendering and metadata APIs.',
},
},
],
}
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqData) }}
/>
<h1>FAQ</h1>
</>
)
}
This is the difference between showing up in a regular result and showing up in a rich snippet with an expandable FAQ.
Common Next.js SEO Mistakes and How to Fix Them
1. Using Client Components for Everything
The 'use client' directive is not a default. If you have a page with no interactive elements, it should be a Server Component. I've seen entire marketing sites wrapped in Client Components because developers didn't understand the difference. Your HTML ships empty, and Google has to execute JavaScript to see anything.
Fix: Audit your pages. Remove 'use client' where it's not needed. Move interactive islands into isolated Client Components.
2. Ignoring the Metadata API for Next.js SEO
Some developers still reach for next/head from the Pages Router days. In the App Router, next/head doesn't work the same way. You'll get duplicated meta tags or none at all.
Fix: Use the Metadata API exclusively. It handles deduplication, merging, and proper rendering.
3. Missing Canonical URLs
Duplicate content kills your rankings. If your blog post is accessible at /blog/my-post and /blog/my-post?ref=newsletter, search engines see two pages. Canonical URLs tell them which one to index.
Fix: Always set canonical URLs in your metadata. Use the alternates field or a separate canonical property.
When Should You Use Next.js SEO?
Use Next.js SEO when your site depends on organic traffic. This includes blogs, e-commerce stores, SaaS marketing pages, documentation sites, and portfolio sites. If you have content you want people to find through Google, you need the server-side rendering and metadata that Next.js provides.
Skip it for internal tools, authenticated dashboards, and anything behind a login wall. Search engines can't access those pages anyway, so the extra effort is wasted.
Next.js SEO in Production
Generate a Sitemap
Next.js App Router supports sitemap.ts out of the box:
// app/sitemap.ts
import { getAllPosts } from '@/lib/posts'
export default async function sitemap() {
const baseUrl = 'https://suhailroushan.com'
const posts = await getAllPosts()
const postUrls = posts.map(post => ({
url: `${baseUrl}/blog/${post.slug}`,
lastModified: post.updatedAt,
}))
return [
{ url: baseUrl, lastModified: new Date() },
{ url: `${baseUrl}/blog`, lastModified: new Date() },
...postUrls,
]
}
Monitor Core Web Vitals
Next.js gives you a built-in analytics panel in dev mode. In production, use Vercel Analytics or a third-party tool. Watch for LCP (largest contentful paint) and INP (interaction to next paint). If your LCP is over 2.5 seconds, your SEO will suffer.
Cache Strategically
Use revalidate for static content that changes infrequently:
export const revalidate = 3600 // revalidate every hour
This keeps your pages static and fast while ensuring fresh content when it matters.
The takeaway: start with the Metadata API, keep your pages as Server Components, and set canonical URLs. That covers 80% of Next.js SEO — the rest is content quality and backlinks.