diff --git a/next-server-actions/app/layout.jsx b/next-server-actions/app/layout.jsx
new file mode 100644
index 00000000..ada19939
--- /dev/null
+++ b/next-server-actions/app/layout.jsx
@@ -0,0 +1,9 @@
+// app/layout.tsx
+export const metadata = {
+    title: 'Your App',
+    description: '…',
+};
+export default function RootLayout({ children, }) {
+    return (<html lang="en"><body>{children}</body>
+    </html>);
+}
diff --git a/next-server-actions/app/layout.js b/next-server-actions/app/layout.tsx
similarity index 85%
rename from next-server-actions/app/layout.js
rename to next-server-actions/app/layout.tsx
index 8d9e6f39..84f3e8d7 100644
--- a/next-server-actions/app/layout.js
+++ b/next-server-actions/app/layout.tsx
@@ -6,7 +6,7 @@ export const metadata = {
 
 export default function RootLayout({
   children,
-}) {
+}: { children: React.ReactNode }) {
   return (
     <html lang="en"><body>{children}</body>
     </html>
diff --git a/next-server-actions/app/page.jsx b/next-server-actions/app/page.jsx
new file mode 100644
index 00000000..3fe905fd
--- /dev/null
+++ b/next-server-actions/app/page.jsx
@@ -0,0 +1,35 @@
+import mongoose from 'mongoose';
+import { revalidatePath } from 'next/cache';
+mongoose.connect('mongodb://127.0.0.1:27017/mongoose_test');
+const userSchema = new mongoose.Schema({
+    name: { type: String, required: true, trim: true, minLength: 6 }
+}, { timestamps: true });
+const User = mongoose.model('User', userSchema, 'users', { overwriteModels: true });
+// --- Server Action ---
+async function addUser(formData) {
+    'use server';
+    const name = String(formData.get('name') || '').trim();
+    await User.create({ name });
+    revalidatePath('/');
+}
+// --- Page ---
+export default async function Page() {
+    const users = await User.find().sort({ _id: -1 }).lean();
+    return (<main style={{ fontFamily: 'sans-serif', maxWidth: 480, margin: '2rem auto' }}>
+      <h1 style={{ marginBottom: '0.75rem' }}>Users</h1>
+
+      <form action={addUser} style={{ marginBottom: '1rem', display: 'flex', gap: '0.5rem' }}>
+        <input name="name" placeholder="Enter name" required style={{ flex: 1, padding: '0.5rem' }}/>
+        <button type="submit" style={{ padding: '0.5rem 0.9rem' }}>Add</button>
+      </form>
+
+      <ul style={{ paddingLeft: '1rem' }}>
+        {users.map((u) => {
+            var _a, _b;
+            return (<li key={(_b = (_a = u._id) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : ''} style={{ margin: '0.25rem 0' }}>
+            {u.name}
+          </li>);
+        })}
+      </ul>
+    </main>);
+}
diff --git a/next-server-actions/app/page.js b/next-server-actions/app/page.tsx
similarity index 87%
rename from next-server-actions/app/page.js
rename to next-server-actions/app/page.tsx
index 73da5d2b..e028a02d 100644
--- a/next-server-actions/app/page.js
+++ b/next-server-actions/app/page.tsx
@@ -1,7 +1,7 @@
 import mongoose from 'mongoose';
 import { revalidatePath } from 'next/cache';
 
-await mongoose.connect('mongodb://127.0.0.1:27017/mongoose_test');
+mongoose.connect('mongodb://127.0.0.1:27017/mongoose_test');
 
 const userSchema = new mongoose.Schema(
   {
@@ -13,7 +13,7 @@ const userSchema = new mongoose.Schema(
 const User = mongoose.model('User', userSchema, 'users', { overwriteModels: true });
 
 // --- Server Action ---
-async function addUser(formData) {
+async function addUser(formData: FormData) {
   'use server';
   const name = String(formData.get('name') || '').trim();
   await User.create({ name });
@@ -40,7 +40,7 @@ export default async function Page() {
 
       <ul style={{ paddingLeft: '1rem' }}>
         {users.map((u) => (
-          <li key={u._id} style={{ margin: '0.25rem 0' }}>
+          <li key={u._id?.toString() ?? ''} style={{ margin: '0.25rem 0' }}>
             {u.name}
           </li>
         ))}
diff --git a/next-server-actions/next-env.d.ts b/next-server-actions/next-env.d.ts
new file mode 100644
index 00000000..0c7fad71
--- /dev/null
+++ b/next-server-actions/next-env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/next-server-actions/package.json b/next-server-actions/package.json
index bead1d97..ed6f16b4 100644
--- a/next-server-actions/package.json
+++ b/next-server-actions/package.json
@@ -1,10 +1,15 @@
 {
   "dependencies": {
     "@mongoosejs/studio": "^0.1.4",
-    "mongoose": "^9.0.0-0",
-    "next": "^16.0.2"
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "mongoose": "^8.19.0",
+    "next": "^16.0.2",
+    "typescript": "^5.9.3"
   },
   "scripts": {
+    "build": "tsc",
     "start": "next dev"
   }
 }
diff --git a/next-server-actions/tsconfig.json b/next-server-actions/tsconfig.json
new file mode 100644
index 00000000..0757d96b
--- /dev/null
+++ b/next-server-actions/tsconfig.json
@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "strict": true,
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
