The Ultimate Guide to Next.js 15 SEO: Sitemaps, Metadata, and Performance

Next.js 15 has fundamentally changed the SEO landscape for React developers. With the App Router, we've moved away from the `Head` component to a powerful, server-side Metadata API. This guide dives deep into how to leverage these tools to dominate search rankings, focusing on dynamic content, automated sitemaps, and performance metrics.

#The Metadata API

Static metadata is easy, but real-world apps have dynamic content. The `generateMetadata` function is your new best friend. It allows you to fetch data server-side (deduplicated automatically) and generate titles, descriptions, and OpenGraph tags on the fly.

typescript

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'
 
export async function generateMetadata({ params }): Promise<Metadata> {
  // 1. Fetch data (Next.js automatically dedupes this request)
  const post = await getPost(params.slug)
  
  if (!post) return { title: 'Post Not Found' }
 
  // 2. Return the metadata object
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      publishedTime: post.date,
      authors: [post.author],
      images: [
        {
          url: post.coverImage, // Must be an absolute URL
          width: 1200,
          height: 630,
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      images: [post.coverImage],
    },
  }
}

#Dynamic Sitemaps (sitemap.ts)

Forget external packages. Next.js 15 supports a `sitemap.ts` file in your `app/` directory that generates a valid XML sitemap at build time (or request time for dynamic routes).

typescript

// app/sitemap.ts
import { MetadataRoute } from 'next'
import { getAllPosts } from '@/lib/data'
 
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts()
  const baseUrl = 'https://adstonix.com'
 
  // Generate URLs for every blog post
  const blogRoutes = posts.map((post) => ({
    url: `${baseUrl}/blog/${post.id}`,
    lastModified: new Date(post.date),
    changeFrequency: 'weekly' as const,
    priority: 0.8,
  }))
 
  // Return the full array
  return [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    ...blogRoutes,
  ]
}

#Structured Data (JSON-LD)

Google loves Structured Data. It helps them understand that a page is a 'Blog Post' or a 'Product'. In Next.js 15, we inject this using a simple script tag in the page body, serializing the JSON-LD object.

tsx

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug)
  
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    image: post.coverImage,
    datePublished: post.date,
    author: {
      '@type': 'Person',
      name: post.author,
    },
  }
 
  return (
    <section>
      {/* Add JSON-LD to your page */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <h1>{post.title}</h1>
      {/* ... content ... */}
    </section>
  )
}

#Core Web Vitals Mastery

Ranking isn't just about keywords; it's about experience. Google's Core Web Vitals check for loading speed, interactivity, and visual stability. Next.js gives you the tools to ace these:

• LCP (Largest Contentful Paint): Text is easy, images are hard. Use the `<Image priority />` prop for your above-the-fold hero image. This tells the browser to preload it immediately.

• CLS (Cumulative Layout Shift): Never serve an image without dimensions. The `next/image` component forces you to define width/height (or aspect ratio) to reserve space in the DOM, preventing layout jumps.

• INP (Interaction to Next Paint): Heavy JS freezes the main thread. By moving 90% of your logic to Server Components, you leave the browser's main thread idle and ready to potential user interactions instanty.