How to Optimize SEO for SaaS Boilerplate with Next.js

When building a SaaS (Software as a Service) product, writing code is only 50% of the journey. The other 50% is about how customers will find you. The most sustainable and cost-effective solution is SEO (Search Engine Optimization).

In this article, we will go through how to fully configure and optimize SEO for a Next.js App Router project using MDX as a Blog Engine.

Why choose MDX as a Blog Engine for SaaS?

MDX allows you to write JSX directly inside standard Markdown files. This brings ultimate flexibility:

• Lightning fast load speeds: Next.js compiles MDX into static HTML (SSG), making it incredibly easy to score 100/100 on Lighthouse.
• Ultimate customizability: You can embed React Components like Pricing Cards, Newsletter Forms, or Interactive Calculators directly inside your post content.
• Source control: Post content is stored along with your Git repository, making it easy to track changes.

3 Steps to Optimize SEO for your Next.js Blog

1. Configure Dynamic Metadata & Canonical URLs

Ensure that every post has a unique title and a canonical tag to prevent duplicate content issues. In the file app/blog/[slug]/page.tsx, use the generateMetadata function:

export async function generateMetadata({ params }) {
  const post = getPostBySlug(params.slug);
  if (!post) return {};

  return {
    title: post.metadata.title,
    description: post.metadata.description,
    alternates: {
      canonical: `/blog/${post.slug}`,
    },
    openGraph: {
      images: [post.metadata.coverImage],
    },
  };
}

2. Generate a Dynamic Sitemap (sitemap.ts)

Next.js has native support for automatically generating sitemap.xml via the Route Handler app/sitemap.ts. Scan all your MDX posts to generate dynamic URLs for Googlebot:

import { getAllPosts } from "@/shared/lib/mdx";

export default async function sitemap() {
  const posts = getAllPosts();
  const blogUrls = posts.map((post) => ({
    url: `https://devenfly.com/blog/${post.slug}`,
    lastModified: new Date(post.metadata.date),
  }));

  return [
    {
      url: "https://devenfly.com",
      lastModified: new Date(),
    },
    ...blogUrls,
  ];
}

3. Optimize Schema Markup (JSON-LD)

Schema helps Google understand your article's structure clearly (Data types: Article, Author, Published Date). You can directly embed a JSON-LD script inside your article detail page:

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": post.metadata.title,
  "datePublished": post.metadata.date,
  "author": {
    "@type": "Person",
    "name": post.metadata.author,
  }
};

return (
  <section>
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
    {/* Content */}
  </section>
);

Conclusion

By implementing MDX, optimizing Routing structure, automating the Sitemap, and embedding JSON-LD Schema, your SaaS landing page is fully prepared to appear at the top spots of Google's ranking boards.

Start writing high-quality content and let the search engines do the rest!