Deine Artikel in deinem Next.js-Blog.

npm install @makeseo/blog

app/blog/
  page.tsx                  Übersicht      →  /blog
  [slug]/page.tsx           Beitrag        →  /blog/mein-beitrag
  tag/[slug]/page.tsx       Themenseite    →  /blog/tag/ki-sichtbarkeit
  sitemap.xml/route.ts      Sitemap        →  /blog/sitemap.xml
  _lib/client.ts            der eine Zugang zu makeseo
  _lib/makeseo.ts           eingebetteter Client (entfällt mit dem npm-Paket)
  _lib/article-styles.tsx   Stylesheet + Artikelkörper

import { createMakeseoClient } from "@makeseo/blog";

export const makeseo = createMakeseoClient({ revalidate: 600 });
export type { MakeseoPost, MakeseoPostSummary, MakeseoTag, MakeseoTheme } from "@makeseo/blog";

import { notFound } from "next/navigation";
import { createMakeseoClient } from "@makeseo/blog";

const makeseo = createMakeseoClient();

export const revalidate = 600;

export default async function Post({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const [post, { theme }] = await Promise.all([
    makeseo.getPost(slug),
    makeseo.getTheme(),
  ]);
  if (!post) notFound();

  return (
    <main>
      <style dangerouslySetInnerHTML={{ __html: theme.stylesheet }} />
      <h1>{post.title}</h1>
      <div
        className="ms-article"
        dangerouslySetInnerHTML={{ __html: post.contentHtml }}
      />
    </main>
  );
}

MAKESEO_BLOG_API_KEY=msk_live_dein_schluessel
NEXT_PUBLIC_SITE_URL=https://deine-domain.de

import type { NextConfig } from "next";

const config: NextConfig = {
  images: {
    remotePatterns: [
      // Stockfotos
      { protocol: "https", hostname: "images.pexels.com" },
      // Beitragsbilder und Infografiken aus makeseo
      { protocol: "https", hostname: "*.supabase.co" },
    ],
  },
};

export default config;

npm run dev

blog/sitemap.xml