serverFunctionの例

Author: na-trium-144

app/[docs_id]/chatForm.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { hello } from "./chatServer";
+
+export function ChatForm() {
+    return <button className="btn" onClick={hello}>あああ</button>
+}

app/[docs_id]/chatServer.ts

@@ -0,0 +1,5 @@
+"use server";
+
+export async function hello() {
+    console.log("hello, world");
+}

app/[docs_id]/page.tsx

@@ -2,6 +2,7 @@ import { notFound } from "next/navigation";
 import { readFile } from "node:fs/promises";
 import { join } from "node:path";
 import Markdown, { Components } from "react-markdown";
+import { ChatForm } from "./chatForm";
 
 export default async function Page({
   params,
@@ -24,6 +25,7 @@ export default async function Page({
   return (
     <div className="p-4">
       <Markdown components={components}>{mdContent}</Markdown>
+      <ChatForm />
     </div>
   );
 }

app/page.tsx

@@ -1,3 +1,5 @@
 export default function Home() {
-  return <div className="p-4">This is root page</div>;
+  return <div className="p-4">
+    This is root page
+  </div>;
 }