Blog StarterにZenn Markdownを組み込む

npx create-next-app@latest --example blog-starter .

# Node.js 22がLTSなので、ベースイメージに指定
FROM node:22
# アプリケーション用の作業ディレクトリを作成
WORKDIR /app
# 依存関係をインストール
COPY package.json package-lock.json ./
RUN npm install
# ソースコードをコンテナ内にコピー
COPY . .
# 開発用サーバーを起動するポートを公開
EXPOSE 3000
# Next.js 開発サーバーをデフォルトで起動
CMD ["npm", "run", "dev"]

version: "3.8"
services:
  blog:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    stdin_open: true
    tty: true

node_modules
npm-debug.log
.dockerignore

docker compose build
docker compose up

"dependencies": {
    ...
+    "zenn-content-css": "^0.1.158",
+    "zenn-embed-elements": "^0.1.158",
+    "zenn-markdown-html": "^0.1.158"
}

docker compose build

- import { remark } from 'remark'
- import html from 'remark-html'
+ import m2h from "zenn-markdown-html";

export default async function markdownToHtml(markdown: string) {
- const result = await remark().use(html).process(markdown)
- return result.toString()
+ return m2h(markdown)
}

+ import 'zenn-content-css'

- <div className="max-w-2xl mx-auto">
+ <div className="max-w-2xl mx-auto znc">

"use client";

import 'zenn-content-css';
import { useEffect } from "react";

export default function ZennEmbed(props: { html: string }) {
  useEffect(() => {
    import('zenn-embed-elements');
  }, []);

  return (
    <div
      className="znc"
      dangerouslySetInnerHTML={{
        __html: props.html, 
      }}
    />
  );
}

- import markdownToHtml from "@/lib/markdownToHtml";
+ import markdownToHtml from "zenn-markdown-html";
+ import ZennEmbed from "@/app/_components/zenn-embed";
...
- const content = await markdownToHtml(post.content || '')
+ const content = await markdownToHtml(post.content || '', {
+   embedOrigin: "https://embed.zenn.studio",
+ })

  return (
    <main>
      <Container>
        <Header />
+       <script src="https://embed.zenn.studio/js/listen-embed-event.js"></script>
        <article className="mb-16">
          ...
-         <PostBody content={content} />
+         <ZennEmbed html={content} />
        </article>
      </Container>
    </main>
  );
}
...