init commit

app/server/inner.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Preloaded, useMutation, usePreloadedQuery } from "convex/react";
+import { api } from "../../convex/_generated/api";
+
+export default function Home({
+  preloaded,
+}: {
+  preloaded: Preloaded<typeof api.myFunctions.listNumbers>;
+}) {
+  const data = usePreloadedQuery(preloaded);
+  const addNumber = useMutation(api.myFunctions.addNumber);
+  return (
+    <>
+      <div className="flex flex-col gap-4 bg-slate-200 dark:bg-slate-800 p-4 rounded-md">
+        <h2 className="text-xl font-bold">Reactive client-loaded data</h2>
+        <code>
+          <pre>{JSON.stringify(data, null, 2)}</pre>
+        </code>
+      </div>
+      <button
+        className="bg-foreground text-background px-4 py-2 rounded-md mx-auto"
+        onClick={() => {
+          void addNumber({ value: Math.floor(Math.random() * 10) });
+        }}
+      >
+        Add a random number
+      </button>
+    </>
+  );
+}

app/server/page.tsx

@@ -0,0 +1,24 @@
+import Home from "./inner";
+import { preloadQuery, preloadedQueryResult } from "convex/nextjs";
+import { api } from "@/convex/_generated/api";
+
+export default async function ServerPage() {
+  const preloaded = await preloadQuery(api.myFunctions.listNumbers, {
+    count: 3,
+  });
+
+  const data = preloadedQueryResult(preloaded);
+
+  return (
+    <main className="p-8 flex flex-col gap-4 mx-auto max-w-2xl">
+      <h1 className="text-4xl font-bold text-center">Convex + Next.js</h1>
+      <div className="flex flex-col gap-4 bg-slate-200 dark:bg-slate-800 p-4 rounded-md">
+        <h2 className="text-xl font-bold">Non-reactive server-loaded data</h2>
+        <code>
+          <pre>{JSON.stringify(data, null, 2)}</pre>
+        </code>
+      </div>
+      <Home preloaded={preloaded} />
+    </main>
+  );
+}