Metadata API, canonical URLs, Open Graph tags, sitemap.ts, robots.ts, JSON-LD structured data, and Core Web Vitals — everything you need to rank in Google with a Next.js App Router SaaS.
Next.js App Router has excellent built-in SEO support, but getting it right requires understanding how the Metadata API works, which pages should be statically rendered, and how to handle the details that actually move rankings: structured data, canonical URLs, and Open Graph tags.
This is the complete setup for a production SaaS — not just the basics.
Next.js App Router supports two ways to set metadata: the static export const metadata object for pages with fixed titles, and the async generateMetadata function for pages where the title depends on dynamic data (like a blog post slug).
// Static: app/(marketing)/about/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "About | GetLaunchpad",
description: "GetLaunchpad is a production-ready Next.js SaaS boilerplate.",
alternates: {
canonical: "https://getlaunchpad.net/about",
},
};// Dynamic: app/blog/[slug]/page.tsx
import type { Metadata } from "next";
export async function generateMetadata({
params,
}: {
params: Promise<{ slug: string }>;
}): Promise<Metadata> {
const { slug } = await params;
const post = posts.find((p) => p.slug === slug);
if (!post) return {};
return {
title: `${post.title} | GetLaunchpad Blog`,
description: post.excerpt,
alternates: {
canonical: `https://getlaunchpad.net/blog/${post.slug}`,
},
openGraph: {
title: post.title,
description: post.excerpt,
type: "article",
publishedTime: post.date,
},
};
}Set sitewide defaults in your root layout. Child pages can override individual fields.
// app/layout.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: {
default: "GetLaunchpad — Next.js SaaS Boilerplate",
template: "%s | GetLaunchpad",
},
description: "Production-ready Next.js 16 SaaS starter with Clerk, Stripe, and Supabase.",
metadataBase: new URL("https://getlaunchpad.net"),
openGraph: {
siteName: "GetLaunchpad",
locale: "en_US",
type: "website",
},
robots: {
index: true,
follow: true,
},
};The metadataBaseis required for Next.js to resolve relative URLs in Open Graph and Twitter card tags correctly. Without it, image URLs will be relative paths that social crawlers can't fetch.
Every public page should have a canonical URL. Duplicate content across http:// and https://, with and without www, or with query parameters can split your ranking signals.
alternates: {
canonical: "https://getlaunchpad.net/blog/nextjs-seo-guide",
}Next.js renders this as <link rel="canonical" href="..." /> in the page head. Make sure the canonical always uses your production domain with HTTPS.
When your page is shared on LinkedIn, Slack, X, or iMessage, the preview is built from Open Graph tags. Without them, you get a generic link with no image or description.
openGraph: {
title: "How to add dark mode to Next.js App Router",
description: "Without the flash: the correct setup with next-themes and Tailwind v4.",
url: "https://getlaunchpad.net/blog/nextjs-dark-mode",
siteName: "GetLaunchpad",
type: "article",
publishedTime: "2026-04-11",
images: [
{
url: "https://getlaunchpad.net/og-blog.png",
width: 1200,
height: 630,
alt: "GetLaunchpad Blog",
},
],
},
twitter: {
card: "summary_large_image",
title: "How to add dark mode to Next.js App Router",
description: "Without the flash.",
},Next.js can generate Open Graph images at build time using the opengraph-image.tsx file convention:
// app/opengraph-image.tsx
import { ImageResponse } from "next/og";
export const runtime = "edge";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";
export default function Image() {
return new ImageResponse(
(
<div
style={{
background: "#18181b",
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
color: "white",
fontFamily: "sans-serif",
}}
>
<div style={{ fontSize: 72, fontWeight: 700 }}>GetLaunchpad</div>
<div style={{ fontSize: 28, color: "#a1a1aa", marginTop: 16 }}>
Next.js SaaS Boilerplate
</div>
</div>
),
{ width: 1200, height: 630 }
);
}A sitemap tells search engines which pages to crawl and index. Create it as a route handler using Next.js's sitemap.ts file convention:
// app/sitemap.ts
import type { MetadataRoute } from "next";
import { posts } from "./(marketing)/blog/posts";
export default function sitemap(): MetadataRoute.Sitemap {
const blogUrls = posts.map((p) => ({
url: `https://getlaunchpad.net/blog/${p.slug}`,
lastModified: new Date(p.date),
changeFrequency: "monthly" as const,
priority: 0.7,
}));
return [
{
url: "https://getlaunchpad.net",
lastModified: new Date(),
changeFrequency: "weekly",
priority: 1,
},
{
url: "https://getlaunchpad.net/blog",
lastModified: new Date(),
changeFrequency: "daily",
priority: 0.9,
},
...blogUrls,
];
}Submit this URL (https://yourapp.com/sitemap.xml) to Google Search Console after deploying.
// app/robots.ts
import type { MetadataRoute } from "next";
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: "*",
allow: "/",
disallow: ["/dashboard/", "/api/"],
},
sitemap: "https://getlaunchpad.net/sitemap.xml",
};
}JSON-LD gives search engines structured context about your page. For a SaaS landing page, include SoftwareApplication and FAQPage schemas:
// In your page component
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify({
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "GetLaunchpad",
"applicationCategory": "DeveloperApplication",
"offers": {
"@type": "Offer",
"price": "29",
"priceCurrency": "USD"
}
})
}}
/>For blog posts, use BlogPosting schema with the published date, author, and article URL. Google may use this to display rich results in search.
Google uses Core Web Vitals (LCP, FID, CLS) as ranking signals. Next.js App Router helps by default — server components reduce JavaScript bundle size, and the Image component prevents layout shift. The biggest things to fix:
Ready to ship faster?
GetLaunchpad gives you everything covered in this guide — pre-configured, tested, and production-ready. Skip the setup and focus on your product.
Get the boilerplate →Dashboard clicks don't cut it for production. Here's how to use Supabase CLI migrations, safe patterns for adding columns to live tables, seeding test data, and generating TypeScript types from your schema.
Read article →Server Actions let you call server-side code directly from client components without writing API routes. Here's how they work, the security requirements, useActionState, revalidatePath, and when to use API routes instead.
Read article →We use analytics cookies to understand how people use this product. See our Privacy Policy.