I’ll show you how to serve raw Markdown files in a Next.js blog using middleware and API routes, enabling Agent Experience SEO (AX-SEO). raw Markdown files Next.js blog middleware and API routes Agent Experience SEO (AX-SEO) AX-SEO focuses on optimizing content for AI agents, LLM-powered search engines, and automated crawlers that now play a major role in content discovery. AI agents, LLM-powered search engines, and automated crawlers By the end of this post, you’ll be able to: ✅ Implement Next.js middleware for .md URL rewriting. Next.js middleware .md ✅ Set up API routes to fetch and serve Markdown content. API routes ✅ Optimize your blog for Agent Experience SEO (AI-driven search). Agent Experience SEO ✅ Provide clean, structured data for AI-powered search engines. clean, structured data Traditional SEO is no longer enough. AI search engines, LLM-powered assistants (ChatGPT, Perplexity, Google’s AI Overviews, etc.), and autonomous agents are now indexing and ranking content differently. LLM-powered assistants (ChatGPT, Perplexity, Google’s AI Overviews, etc.), and autonomous agents indexing ranking Why does AX-SEO matter? Why does AX-SEO matter? AI agents prefer structured content – Raw Markdown is easier to parse than HTML.
LLMs use Markdown for training & retrieval – AI search engines extract structured text more efficiently.
AX-SEO improves discoverability – AI-driven platforms rank content based on how well agents can process it. AI agents prefer structured content – Raw Markdown is easier to parse than HTML. AI agents prefer structured content easier to parse LLMs use Markdown for training & retrieval – AI search engines extract structured text more efficiently. LLMs use Markdown for training & retrieval more efficiently AX-SEO improves discoverability – AI-driven platforms rank content based on how well agents can process it. AX-SEO improves discoverability based on how well agents can process it If you want your blog optimized for AI-driven search, this guide is for you! optimized for AI-driven search Most blogs serve only HTML, making extracting structured information hard for AI tools. Common mistakes include: HTML ❌ Not offering raw text formats – AI agents struggle with unnecessary markup.❌ Ignoring structured data for LLMs – AI search engines prioritize clean content. Not offering raw text formats Ignoring structured data for LLMs clean content This guide avoids these mistakes and ensures a future-proof content strategy for AI indexing. avoids these mistakes future-proof How I Did It How I Did It Step 1: Middleware for .md Routing Step 1: Middleware for .md I used Next.js Middleware to detect .md URLs and redirect them to an API route: Next.js Middleware .md import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export function middleware(req: NextRequest) {
  const url = req.nextUrl.clone();

  if (url.pathname.endsWith(".md")) {
    url.pathname = `/api${url.pathname}`;
    return NextResponse.rewrite(url);
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/blog/:path*.md", "/projects/:path*.md"],
}; import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export function middleware(req: NextRequest) {
  const url = req.nextUrl.clone();

  if (url.pathname.endsWith(".md")) {
    url.pathname = `/api${url.pathname}`;
    return NextResponse.rewrite(url);
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/blog/:path*.md", "/projects/:path*.md"],
}; Step 2: API Route to Serve Markdown Step 2: API Route to Serve Markdown Next, I created API endpoints to fetch Markdown content: import { readMarkdown } from "@/server/read-markdown-file";
import { NextRequest } from "next/server";

export async function GET(_req: NextRequest, { params: { slug } }: { params: { slug: string } }) {
  return readMarkdown(slug);
} import { readMarkdown } from "@/server/read-markdown-file";
import { NextRequest } from "next/server";

export async function GET(_req: NextRequest, { params: { slug } }: { params: { slug: string } }) {
  return readMarkdown(slug);
} Step 3: Fetching Markdown Content from CMS Step 3: Fetching Markdown Content from CMS The readMarkdown the function retrieves the raw Markdown content: readMarkdown import useBlogSlug from "@/features/posts/hooks/useBlogSlug";
import { NextResponse } from "next/server";

export async function readMarkdown(slug: string) {
  try {
    const {
      post: {
        content: { markdown },
      },
    } = await useBlogSlug({ params: { slug: slug.replace(".md", "") } });

    return new NextResponse(markdown, {
      headers: {
        "Content-Type": "text/plain",
      },
    });
  } catch (error) {
    console.error("Error reading markdown file:", error);
    return new NextResponse(JSON.stringify({ message: "Markdown file not found" }), { status: 404 });
  }
} import useBlogSlug from "@/features/posts/hooks/useBlogSlug";
import { NextResponse } from "next/server";

export async function readMarkdown(slug: string) {
  try {
    const {
      post: {
        content: { markdown },
      },
    } = await useBlogSlug({ params: { slug: slug.replace(".md", "") } });

    return new NextResponse(markdown, {
      headers: {
        "Content-Type": "text/plain",
      },
    });
  } catch (error) {
    console.error("Error reading markdown file:", error);
    return new NextResponse(JSON.stringify({ message: "Markdown file not found" }), { status: 404 });
  }
} Step 4: Adding a Markdown Link to the Blog Step 4: Adding a Markdown Link to the Blog To make the Markdown file accessible, I added a link on each blog page: <Link href={`/api/${params.type}/${params.slug}.md`} passHref>
  View Markdown
</Link> <Link href={`/api/${params.type}/${params.slug}.md`} passHref>
  View Markdown
</Link> Now, every post has a “View Markdown” button that links to the raw .md version. “View Markdown” .md How This Boosts Agent Experience SEO (AX-SEO) How This Boosts Agent Experience SEO (AX-SEO) ✅ AI-Optimized Content – Markdown is easier for AI bots to read than HTML.
✅ AX-SEO Ready – AI-powered search engines prefer structured text for ranking and retrieval.
✅ Faster AI Crawling – Lightweight Markdown improves indexing speed.
✅ Better Content Extraction – LLMs can fetch raw text for RAG-based applications.
✅ Scalable & Future-Proof – Works for blogs, docs, and AI knowledge bases. ✅ AI-Optimized Content – Markdown is easier for AI bots to read than HTML. AI-Optimized Content easier for AI bots to read ✅ AX-SEO Ready – AI-powered search engines prefer structured text for ranking and retrieval. AX-SEO Ready prefer structured text ✅ Faster AI Crawling – Lightweight Markdown improves indexing speed. Faster AI Crawling improves indexing speed ✅ Better Content Extraction – LLMs can fetch raw text for RAG-based applications. Better Content Extraction RAG-based applications ✅ Scalable & Future-Proof – Works for blogs, docs, and AI knowledge bases. Scalable & Future-Proof blogs, docs, and AI knowledge bases Final Thoughts Final Thoughts With this approach, I made my Next.js blog serve Markdown dynamically, benefiting both humans and AI bots. Next.js blog serve Markdown dynamically humans and AI bots 📂 Source Code: GitHub Repository🌍 Live Website: sm-y.dev Source Code: GitHub Repository Live Website: sm-y.dev I hope this guide helps you boost your blog’s AX-SEO and AI search visibility! 🚀 boost your blog’s AX-SEO and AI search visibility

This story contains new, firsthand information uncovered by the writer.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

GitHub

How I Started My Software Engineering Career (and Why)

Maximize Vercel's FREE Plan: Enable Auto Deployment for All Members

How I Made My Next.js Blog Serve Markdown Files for Agent Experience SEO (AX-SEO)

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

4 Ways to Destructure Array in JavaScript & Make Your Code Look Clean

Beep Beep Bop Bop: How to Deploy Multiple AI Agents Using Local LLMs

How Will Software Engineers Lose Their Jobs Within the Next 5 Years?

🎬 Introducing MetaGPT: Unleashing the Power of AI Agents for Complex Tasks

We Asked AI to Improve This Article

How to Build an Agent With an OpenAI Assistant in Python - Part 1: Conversational

4 Ways to Destructure Array in JavaScript & Make Your Code Look Clean

Beep Beep Bop Bop: How to Deploy Multiple AI Agents Using Local LLMs

How Will Software Engineers Lose Their Jobs Within the Next 5 Years?

🎬 Introducing MetaGPT: Unleashing the Power of AI Agents for Complex Tasks

We Asked AI to Improve This Article

How to Build an Agent With an OpenAI Assistant in Python - Part 1: Conversational

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps