content/blog/                 # Articulos en MDX
app/blog/
├── page.tsx                  # Lista de posts con filtros
├── [slug]/page.tsx           # Post individual
├── category/[category]/      # Posts por categoria
├── tag/[tag]/                # Posts por tag
└── author/[author]/          # Posts por autor
app/rss.xml/route.ts          # RSS feed
components/blog/
├── post-card.tsx             # Tarjeta de post (shadcn Card + Badge)
├── post-header.tsx           # Header del post (Avatar + Badge)
├── mdx-components.tsx        # Callout, YouTube, CodeComparison
├── table-of-contents.tsx     # TOC client-side (IntersectionObserver)
└── share-buttons.tsx         # Twitter, LinkedIn, copiar link
components/seo/json-ld.tsx    # ArticleJsonLd, BreadcrumbJsonLd
lib/blog.ts                   # Tipos, categorías y utilidades

---
title: Como integrar Stripe en Next.js
description: Guia paso a paso para cobrar en tu SaaS con Stripe Checkout
date: 2026-02-01
author: EmpiezaTuSaaS
category: tutoriales
tags: [stripe, pagos, nextjs]
image: https://images.unsplash.com/photo-example?w=800
published: true
---

# Como integrar Stripe en Next.js

Tu contenido aqui...

<div className="prose prose-zinc dark:prose-invert max-w-none">
  <MDXRemote
    source={post.content}
    components={mdxComponents}
    options={{
      mdxOptions: { rehypePlugins: [rehypeSlug] },
    }}
  />
</div>

<Callout type="info">
  Información importante para el lector.
</Callout>

<Callout type="tip">
  Un consejo practico.
</Callout>

<YouTube id="dQw4w9WgXcQ" title="Tutorial de Next.js" />

<CodeComparison
  before="const data = fetch(url).then(r => r.json())"
  after="const data = await fetch(url).then(r => r.json())"
/>

export const categories: BlogCategory[] = [
  { slug: "tutoriales", name: "Tutoriales", description: "Guias paso a paso", color: "bg-blue-500/10 text-blue-500" },
  { slug: "negocio", name: "Negocio", description: "Estrategias SaaS", color: "bg-green-500/10 text-green-500" },
  { slug: "tecnologia", name: "Tecnologia", description: "Stack tecnologico", color: "bg-purple-500/10 text-purple-500" },
  { slug: "noticias", name: "Noticias", description: "Actualizaciones", color: "bg-orange-500/10 text-orange-500" },
];

// Todas las funciones son async
await getAllPosts()              // Todos los posts, ordenados por fecha
await getPostBySlug("mi-post")  // Post individual
await getPostsByCategory("tutoriales")
await getPostsByTag("nextjs")
await getPostsByAuthor("EmpiezaTuSaaS")
await getAllTags()               // Array de tags únicos
await getAllAuthors()            // Array de autores con postCount
getCategoryBySlug("tutoriales") // Busca categoria (sync)

import { Feed } from "feed";
import { getAllPosts } from "@/lib/blog";
import { siteConfig } from "@/config/site";

export async function GET() {
  const posts = await getAllPosts();
  const publishedPosts = posts.filter((p) => p.published);

  const feed = new Feed({
    title: `${siteConfig.name} — Blog`,
    description: siteConfig.description,
    id: siteConfig.url,
    link: siteConfig.url,
    language: "es",
    copyright: `© ${new Date().getFullYear()} ${siteConfig.name}`,
    updated: publishedPosts[0] ? new Date(publishedPosts[0].date) : new Date(),
    feedLinks: {
      rss2: `${siteConfig.url}/rss.xml`,
      atom: `${siteConfig.url}/atom.xml`,
      json: `${siteConfig.url}/feed.json`,
    },
    author: {
      name: siteConfig.name,
      email: siteConfig.supportEmail,
      link: siteConfig.url,
    },
  });

  publishedPosts.forEach((post) => {
    feed.addItem({
      title: post.title,
      id: `${siteConfig.url}/blog/${post.slug}`,
      link: `${siteConfig.url}/blog/${post.slug}`,
      description: post.description,
      date: new Date(post.date),
      author: [{ name: post.author }],
      category: post.tags.map((tag) => ({ name: tag })),
      ...(post.image && { image: post.image }),
    });
  });

  return new Response(feed.rss2(), {
    headers: {
      "Content-Type": "application/rss+xml; charset=utf-8",
      "Cache-Control": "public, max-age=3600, s-maxage=3600",
    },
  });
}

alternates: {
  types: {
    "application/rss+xml": `${siteConfig.url}/rss.xml`,
  },
},

content/blog/integrar-stripe-nextjs.mdx  →  /blog/integrar-stripe-nextjs
content/blog/mejor-auth-para-saas.mdx    →  /blog/mejor-auth-para-saas