add nextjs tutorial

app/blog/[month]/[slug]/page.js

@@ -17,6 +17,7 @@ import querystring from 'querystring';
 import Discussion from '@/app/components/Discussion';
 import { Button, Card, Tooltip, DirectoryTree } from '@/app/components/Antd';
 import { Tabs, Item } from '@/app/components/Tabs';
+import AsciinemaPlayer from '@/app/components/AsciinemaPlayer';
 
 export default async function Post({ params }) {
   let { month, slug } = params;
@@ -91,7 +92,8 @@ export default async function Post({ params }) {
           Tooltip,
           DirectoryTree,
           Tabs,
-          Item
+          Item,
+          AsciinemaPlayer
         }} />
       </main>
       <div className='container mx-auto max-w-[1200px] py-12 px-0'>

app/components/AsciinemaPlayer.jsx

@@ -0,0 +1,21 @@
+'use client'
+import React, { useEffect, useRef } from 'react';
+import 'asciinema-player/dist/bundle/asciinema-player.css';
+
+const AsciinemaPlayer = ({ src, options }) => {
+  const playerRef = useRef(null);
+  const hasInitialized = useRef(false);
+  useEffect(() => {
+    // 动态导入 asciinema-player 以确保它只在客户端加载
+    import('asciinema-player').then((asciinemaPlayer) => {
+      if (playerRef.current && !hasInitialized.current) {
+        asciinemaPlayer.create(src, playerRef.current, options);
+        hasInitialized.current = true;
+      }
+    });
+  }, []);
+
+  return <div ref={playerRef} ></div>;
+};
+
+export default AsciinemaPlayer;

app/demo/page.jsx

@@ -0,0 +1,10 @@
+import AsciinemaPlayer from '@/app/components/AsciinemaPlayer'
+export default function() {
+    return <>
+    <AsciinemaPlayer src="https://asciinema.org/a/569727.cast" options = {{
+        speed: 2,
+        theme: 'tango',
+        autoplay: true,
+      }}/>
+    </>
+}

app/globals.css

@@ -200,4 +200,9 @@ nav>ol.toc-level-1 {
 .toc-wrapper .toc a {
     font-weight: 700;
     color: var(--w-indigo-light);
+}
+
+.markdown-body .ap-player pre {
+    margin: 0;
+    padding: 0;
 }

package.json

@@ -18,6 +18,7 @@
     "@react-types/shared": "^3.23.1",
     "@types/mdx": "^2.0.13",
     "antd": "^5.18.0",
+    "asciinema-player": "^3.7.1",
     "clsx": "^2.1.1",
     "esbuild": "^0.21.4",
     "esbuild-plugin-css-modules": "^0.3.0",