Einen richtig coolen Blog bauen — in Minuten

// app/blog/[ref]/page.tsx  —  Einzelartikel mit perfektem SEO
import { notFound } from "next/navigation";
import type { Metadata } from "next";
import { publino } from "@/lib/publino";

type Props = { params: Promise<{ ref: string }> };

// 1. Meta-Tags pro Artikel — Title, Description, Canonical, Open Graph.
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { ref } = await params;
  const article = await publino.articles.get(ref, { locale: "de" });
  if (!article) return {};

  const canonical =
    article.canonicalUrl ?? `https://example.com/blog/${ref}`;

  return {
    title: article.title,
    description: article.metaDescription ?? article.excerpt ?? undefined,
    alternates: { canonical },
    openGraph: {
      title: article.title,
      description: article.metaDescription ?? undefined,
      type: "article",
      url: canonical,
      publishedTime: article.publishedAt ?? undefined,
    },
  };
}

export default async function ArticlePage({ params }: Props) {
  const { ref } = await params;
  const article = await publino.articles.get(ref, { locale: "de" });
  if (!article) notFound();

  return (
    <article className="mx-auto max-w-2xl px-6 py-16">
      {/* 2. Schema.org JSON-LD — Publino liefert fertiges BlogPosting-Markup mit. */}
      {article.jsonLd && (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(article.jsonLd) }}
        />
      )}

      <h1 className="text-4xl font-bold">{article.title}</h1>
      <p className="mt-3 text-sm text-gray-400">
        {article.publishedAt &&
          new Date(article.publishedAt).toLocaleDateString("de-DE")}
        {" · "}
        {article.readingMinutes} Min.
      </p>

      {/* 3. Body als sicheres, server-gerendertes HTML. */}
      <div
        className="prose mt-8"
        dangerouslySetInnerHTML={{ __html: article.html }}
      />
    </article>
  );
}

// app/blog/page.tsx
// ISR: Seite alle 5 Minuten im Hintergrund neu bauen — frische Inhalte ohne Redeploy.
export const revalidate = 300;

// Sofort revalidieren per Publino-Webhook (article.published / .updated):
// app/api/revalidate/route.ts
import { revalidatePath } from "next/cache";

export async function POST(req: Request) {
  const { slug, articleId } = await req.json();
  revalidatePath("/blog");
  revalidatePath(`/blog/${slug}-${articleId}`);
  return Response.json({ revalidated: true });
}