بناء تطبيق فوري باستخدام InstantDB و Next.js 15

npx create-next-app@latest instant-board --typescript --app --tailwind
cd instant-board

npm install @instantdb/react
npm install -D instant-cli

npx instant-cli@latest init

# .env.local
NEXT_PUBLIC_INSTANT_APP_ID=your-app-id-here

// instant.schema.ts
import { i } from "@instantdb/react";
 
const _schema = i.schema({
  entities: {
    $users: i.entity({
      email: i.string().unique().indexed(),
    }),
    tasks: i.entity({
      text: i.string(),
      done: i.boolean(),
      createdAt: i.date().indexed(),
    }),
  },
  links: {
    taskOwner: {
      forward: { on: "tasks", has: "one", label: "owner" },
      reverse: { on: "$users", has: "many", label: "tasks" },
    },
  },
});
 
// مساعِدات TypeScript لأمان الأنواع من الطرف إلى الطرف
type _AppSchema = typeof _schema;
interface AppSchema extends _AppSchema {}
const schema: AppSchema = _schema;
 
export type { AppSchema };
export default schema;

npx instant-cli@latest push schema

// lib/db.ts
import { init } from "@instantdb/react";
import schema from "../instant.schema";
 
export const db = init({
  appId: process.env.NEXT_PUBLIC_INSTANT_APP_ID!,
  schema,
});

// components/Login.tsx
"use client";
 
import { useState } from "react";
import { db } from "@/lib/db";
 
export function Login() {
  const [sentEmail, setSentEmail] = useState("");
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
 
  const sendCode = (e: React.FormEvent) => {
    e.preventDefault();
    setSentEmail(email);
    db.auth.sendMagicCode({ email }).catch((err) => {
      alert("Error: " + err.body?.message);
      setSentEmail("");
    });
  };
 
  const verifyCode = (e: React.FormEvent) => {
    e.preventDefault();
    db.auth.signInWithMagicCode({ email: sentEmail, code }).catch((err) => {
      alert("Error: " + err.body?.message);
      setCode("");
    });
  };
 
  if (!sentEmail) {
    return (
      <form onSubmit={sendCode} className="flex flex-col gap-3 max-w-sm">
        <h2 className="text-xl font-bold">Sign in</h2>
        <input
          type="email"
          placeholder="you@example.com"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          className="border px-3 py-2 rounded"
          required
        />
        <button className="bg-blue-600 text-white px-3 py-2 rounded">
          Send code
        </button>
      </form>
    );
  }
 
  return (
    <form onSubmit={verifyCode} className="flex flex-col gap-3 max-w-sm">
      <h2 className="text-xl font-bold">Enter your code</h2>
      <p>We emailed a code to {sentEmail}.</p>
      <input
        type="text"
        placeholder="123456"
        value={code}
        onChange={(e) => setCode(e.target.value)}
        className="border px-3 py-2 rounded"
        required
      />
      <button className="bg-blue-600 text-white px-3 py-2 rounded">
        Verify
      </button>
    </form>
  );
}

// app/page.tsx
"use client";
 
import { db } from "@/lib/db";
import { Login } from "@/components/Login";
import { Board } from "@/components/Board";
 
export default function Home() {
  const { isLoading, user, error } = db.useAuth();
 
  if (isLoading) return <div className="p-8">Loading...</div>;
  if (error) return <div className="p-8">Auth error: {error.message}</div>;
 
  return (
    <main className="p-8 max-w-2xl mx-auto">
      {user ? <Board user={user} /> : <Login />}
    </main>
  );
}

// components/Board.tsx
"use client";
 
import { useState } from "react";
import { id, type User } from "@instantdb/react";
import { db } from "@/lib/db";
 
export function Board({ user }: { user: User }) {
  const [text, setText] = useState("");
 
  // InstaQL: اقرأ مهام المستخدم الحالي مرتبة حسب وقت الإنشاء
  const { isLoading, error, data } = db.useQuery({
    tasks: {
      $: {
        where: { "owner.id": user.id },
        order: { createdAt: "desc" },
      },
    },
  });
 
  const addTask = (e: React.FormEvent) => {
    e.preventDefault();
    if (!text.trim()) return;
    const taskId = id();
    // InstaML: أنشئ المهمة واربطها بالمستخدم في معاملة واحدة
    db.transact(
      db.tx.tasks[taskId]
        .update({ text, done: false, createdAt: Date.now() })
        .link({ owner: user.id }),
    );
    setText("");
  };
 
  const toggle = (taskId: string, done: boolean) => {
    db.transact(db.tx.tasks[taskId].update({ done: !done }));
  };
 
  const remove = (taskId: string) => {
    db.transact(db.tx.tasks[taskId].delete());
  };
 
  if (isLoading) return <div>Loading tasks...</div>;
  if (error) return <div>Error: {error.message}</div>;
 
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">Task Board</h1>
        <button onClick={() => db.auth.signOut()} className="text-sm underline">
          Sign out
        </button>
      </div>
 
      <form onSubmit={addTask} className="flex gap-2">
        <input
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="What needs doing?"
          className="border px-3 py-2 rounded flex-1"
        />
        <button className="bg-blue-600 text-white px-4 rounded">Add</button>
      </form>
 
      <ul className="flex flex-col gap-2">
        {data.tasks.map((task) => (
          <li
            key={task.id}
            className="flex items-center gap-3 border rounded px-3 py-2"
          >
            <input
              type="checkbox"
              checked={task.done}
              onChange={() => toggle(task.id, task.done)}
            />
            <span className={task.done ? "line-through opacity-60" : ""}>
              {task.text}
            </span>
            <button
              onClick={() => remove(task.id)}
              className="ml-auto text-red-600 text-sm"
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

// instant.perms.ts
import type { InstantRules } from "@instantdb/react";
 
const rules = {
  tasks: {
    allow: {
      view: "auth.id != null && auth.id == data.ref('owner.id')",
      create: "auth.id != null && auth.id == newData.ref('owner.id')",
      update: "auth.id != null && auth.id == data.ref('owner.id')",
      delete: "auth.id != null && auth.id == data.ref('owner.id')",
    },
  },
} satisfies InstantRules;
 
export default rules;

npx instant-cli@latest push perms

// components/PresenceBar.tsx
"use client";
 
import { db } from "@/lib/db";
import type { User } from "@instantdb/react";
 
const room = db.room("board", "main");
 
export function PresenceBar({ user }: { user: User }) {
  const { peers } = db.rooms.usePresence(room);
 
  db.rooms.useSyncPresence(room, { email: user.email });
 
  const others = Object.values(peers);
 
  return (
    <div className="text-sm text-gray-600">
      {others.length === 0
        ? "You're the only one here"
        : `${others.length} other ${others.length === 1 ? "person" : "people"} online: ` +
          others.map((p) => p.email).join(", ")}
    </div>
  );
}