Next.js SEO Best Practices: From Metadata to Structured Data

Next.js has built-in SEO tools that, when used correctly, give you a significant edge over client-rendered React apps. This guide covers everything you need for a production-grade SEO setup.

Metadata API

In the App Router, export a metadata object from any page.tsx:

export const metadata: Metadata = {
  title: { default: "FullStack", template: "%s | FullStack" },
  description: "Learn without limits.",
  openGraph: {
    type: "website",
    siteName: "FullStack",
  },
};

For dynamic pages, use generateMetadata:

export async function generateMetadata({ params }) {
  const course = await getCourse(params.slug);
  return {
    title: course.title,
    description: course.short_description,
    openGraph: {
      title: course.title,
      images: [course.thumbnail],
    },
  };
}

Sitemap

Create src/app/sitemap.ts:

export default async function sitemap(): Promise {
  const courses = await getCourses();
  return [
    { url: "https://fullstack.lk", lastModified: new Date() },
    { url: "https://fullstack.lk/courses", lastModified: new Date() },
    ...courses.map(c => ({
      url: https://fullstack.lk/courses/${c.slug},
      lastModified: new Date(c.updated_at),
    })),
  ];
}

Robots.txt

// src/app/robots.ts
export default function robots(): MetadataRoute.Robots {
  return {
    rules: { userAgent: "*", allow: "/", disallow: "/api/" },
    sitemap: "https://fullstack.lk/sitemap.xml",
  };
}

JSON-LD Structured Data

Add a