بناء تطبيق كامل يعمل بالوقت الحقيقي باستخدام Convex و Next.js 15

npx create-next-app@latest convex-notes --typescript --tailwind --eslint --app --src-dir --use-npm
cd convex-notes

npm install convex
npx convex init

import { defineSchema, defineTable } from "convex/server";
import { v } from "convex/values";
 
export default defineSchema({
  notes: defineTable({
    userId: v.string(),
    title: v.string(),
    content: v.string(),
    isPinned: v.boolean(),
    fileId: v.optional(v.id("_file_storage")),
    fileName: v.optional(v.string()),
  })
    .index("by_user", ["userId"])
    .index("by_user_pinned", ["userId", "isPinned"])
    .searchIndex("search_notes", {
      searchField: "content",
      filterFields: ["userId"],
    }),
});

npx convex dev

import { query, mutation } from "./_generated/server";
import { v } from "convex/values";
 
// عرض جميع ملاحظات المستخدم الحالي
export const list = query({
  args: { userId: v.string() },
  returns: v.array(
    v.object({
      _id: v.id("notes"),
      _creationTime: v.number(),
      userId: v.string(),
      title: v.string(),
      content: v.string(),
      isPinned: v.boolean(),
      fileId: v.optional(v.id("_file_storage")),
      fileName: v.optional(v.string()),
    })
  ),
  handler: async (ctx, args) => {
    const notes = await ctx.db
      .query("notes")
      .withIndex("by_user", (q) => q.eq("userId", args.userId))
      .order("desc")
      .collect();
 
    // ترتيب الملاحظات المُثبّتة في الأعلى
    return notes.sort((a, b) => {
      if (a.isPinned && !b.isPinned) return -1;
      if (!a.isPinned && b.isPinned) return 1;
      return 0;
    });
  },
});
 
// البحث في الملاحظات حسب المحتوى
export const search = query({
  args: {
    userId: v.string(),
    searchTerm: v.string(),
  },
  handler: async (ctx, args) => {
    const results = await ctx.db
      .query("notes")
      .withSearchIndex("search_notes", (q) =>
        q.search("content", args.searchTerm).eq("userId", args.userId)
      )
      .collect();
 
    return results;
  },
});

// إنشاء ملاحظة جديدة
export const create = mutation({
  args: {
    userId: v.string(),
    title: v.string(),
    content: v.string(),
  },
  handler: async (ctx, args) => {
    const noteId = await ctx.db.insert("notes", {
      userId: args.userId,
      title: args.title,
      content: args.content,
      isPinned: false,
    });
    return noteId;
  },
});
 
// تحديث ملاحظة موجودة
export const update = mutation({
  args: {
    noteId: v.id("notes"),
    title: v.optional(v.string()),
    content: v.optional(v.string()),
  },
  handler: async (ctx, args) => {
    const { noteId, ...updates } = args;
    const cleanUpdates: Record<string, string> = {};
    if (updates.title !== undefined) cleanUpdates.title = updates.title;
    if (updates.content !== undefined) cleanUpdates.content = updates.content;
 
    await ctx.db.patch(noteId, cleanUpdates);
  },
});
 
// تبديل حالة التثبيت
export const togglePin = mutation({
  args: { noteId: v.id("notes") },
  handler: async (ctx, args) => {
    const note = await ctx.db.get(args.noteId);
    if (!note) throw new Error("Note not found");
    await ctx.db.patch(args.noteId, { isPinned: !note.isPinned });
  },
});
 
// حذف ملاحظة
export const remove = mutation({
  args: { noteId: v.id("notes") },
  handler: async (ctx, args) => {
    const note = await ctx.db.get(args.noteId);
    if (!note) throw new Error("Note not found");
 
    if (note.fileId) {
      await ctx.storage.delete(note.fileId);
    }
    await ctx.db.delete(args.noteId);
  },
});

"use client";
 
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { ReactNode } from "react";
 
const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
 
export default function ConvexClientProvider({
  children,
}: {
  children: ReactNode;
}) {
  return <ConvexProvider client={convex}>{children}</ConvexProvider>;
}

import type { Metadata } from "next";
import "./globals.css";
import ConvexClientProvider from "@/components/ConvexClientProvider";
 
export const metadata: Metadata = {
  title: "Convex Notes",
  description: "ملاحظات تعاونية بالوقت الحقيقي مدعومة بـ Convex",
};
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <ConvexClientProvider>{children}</ConvexClientProvider>
      </body>
    </html>
  );
}

"use client";
 
import { useQuery, useMutation } from "convex/react";
import { api } from "../../convex/_generated/api";
import { useState } from "react";
import { Id } from "../../convex/_generated/dataModel";
 
const USER_ID = "demo-user";
 
export default function NotesApp() {
  const notes = useQuery(api.notes.list, { userId: USER_ID });
  const createNote = useMutation(api.notes.create);
  const updateNote = useMutation(api.notes.update);
  const togglePin = useMutation(api.notes.togglePin);
  const removeNote = useMutation(api.notes.remove);
 
  const [editingId, setEditingId] = useState<Id<"notes"> | null>(null);
  const [searchTerm, setSearchTerm] = useState("");
 
  const searchResults = useQuery(
    api.notes.search,
    searchTerm.length > 0 ? { userId: USER_ID, searchTerm } : "skip"
  );
 
  const displayNotes = searchTerm.length > 0 ? searchResults : notes;
 
  const handleCreate = async () => {
    await createNote({
      userId: USER_ID,
      title: "ملاحظة بدون عنوان",
      content: "",
    });
  };
 
  if (notes === undefined) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
      </div>
    );
  }
 
  return (
    <main className="max-w-4xl mx-auto p-6">
      <header className="flex items-center justify-between mb-8">
        <h1 className="text-3xl font-bold">ملاحظات Convex</h1>
        <button
          onClick={handleCreate}
          className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition"
        >
          + ملاحظة جديدة
        </button>
      </header>
 
      <input
        type="text"
        placeholder="ابحث في الملاحظات..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        className="w-full p-3 border rounded-lg mb-6 focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
 
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {displayNotes?.map((note) => (
          <div
            key={note._id}
            className={`border rounded-lg p-4 hover:shadow-md transition ${
              note.isPinned ? "border-yellow-400 bg-yellow-50" : ""
            }`}
          >
            <div className="flex items-start justify-between mb-2">
              <h2 className="font-semibold text-lg">{note.title}</h2>
              <button
                onClick={() => togglePin({ noteId: note._id })}
                className="text-xl"
              >
                {note.isPinned ? "📌" : "📍"}
              </button>
            </div>
            <p className="text-gray-600 mb-4 line-clamp-3">
              {note.content || "ملاحظة فارغة..."}
            </p>
            <div className="flex gap-2">
              <button
                onClick={() => setEditingId(note._id)}
                className="text-sm text-blue-600 hover:underline"
              >
                تعديل
              </button>
              <button
                onClick={() => removeNote({ noteId: note._id })}
                className="text-sm text-red-600 hover:underline"
              >
                حذف
              </button>
            </div>
          </div>
        ))}
      </div>
 
      {displayNotes?.length === 0 && (
        <p className="text-center text-gray-400 mt-12">
          لا توجد ملاحظات بعد. انقر على &quot;+ ملاحظة جديدة&quot; للبدء.
        </p>
      )}
    </main>
  );
}

// توليد رابط رفع للعميل
export const generateUploadUrl = mutation({
  handler: async (ctx) => {
    return await ctx.storage.generateUploadUrl();
  },
});
 
// إرفاق ملف بملاحظة
export const attachFile = mutation({
  args: {
    noteId: v.id("notes"),
    fileId: v.id("_file_storage"),
    fileName: v.string(),
  },
  handler: async (ctx, args) => {
    await ctx.db.patch(args.noteId, {
      fileId: args.fileId,
      fileName: args.fileName,
    });
  },
});

"use client";
 
import { useMutation } from "convex/react";
import { api } from "../../convex/_generated/api";
import { Id } from "../../convex/_generated/dataModel";
import { useRef } from "react";
 
export default function FileUpload({ noteId }: { noteId: Id<"notes"> }) {
  const generateUploadUrl = useMutation(api.notes.generateUploadUrl);
  const attachFile = useMutation(api.notes.attachFile);
  const fileInputRef = useRef<HTMLInputElement>(null);
 
  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
 
    // الخطوة 1: الحصول على رابط رفع مؤقت من Convex
    const uploadUrl = await generateUploadUrl();
 
    // الخطوة 2: إرسال الملف إلى رابط الرفع
    const response = await fetch(uploadUrl, {
      method: "POST",
      headers: { "Content-Type": file.type },
      body: file,
    });
 
    const { storageId } = await response.json();
 
    // الخطوة 3: حفظ مرجع الملف في الملاحظة
    await attachFile({
      noteId,
      fileId: storageId,
      fileName: file.name,
    });
  };
 
  return (
    <div>
      <input
        type="file"
        ref={fileInputRef}
        onChange={handleUpload}
        className="hidden"
      />
      <button
        onClick={() => fileInputRef.current?.click()}
        className="text-sm text-gray-500 hover:text-gray-700"
      >
        📎 إرفاق ملف
      </button>
    </div>
  );
}

npm install @clerk/nextjs

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
NEXT_PUBLIC_CONVEX_URL=https://your-project.convex.cloud

"use client";
 
import { ConvexProviderWithClerk } from "convex/react-clerk";
import { ConvexReactClient } from "convex/react";
import { ClerkProvider, useAuth } from "@clerk/nextjs";
import { ReactNode } from "react";
 
const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
 
export default function ConvexClientProvider({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <ClerkProvider>
      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
        {children}
      </ConvexProviderWithClerk>
    </ClerkProvider>
  );
}

export default {
  providers: [
    {
      domain: process.env.CLERK_JWT_ISSUER_DOMAIN,
      applicationID: "convex",
    },
  ],
};

export const list = query({
  args: {},
  handler: async (ctx) => {
    const identity = await ctx.auth.getUserIdentity();
    if (!identity) return [];
 
    const userId = identity.subject;
    const notes = await ctx.db
      .query("notes")
      .withIndex("by_user", (q) => q.eq("userId", userId))
      .order("desc")
      .collect();
 
    return notes.sort((a, b) => {
      if (a.isPinned && !b.isPinned) return -1;
      if (!a.isPinned && b.isPinned) return 1;
      return 0;
    });
  },
});

const createNote = useMutation(api.notes.create).withOptimisticUpdate(
  (localStore, args) => {
    const existingNotes = localStore.getQuery(api.notes.list, {});
    if (existingNotes === undefined) return;
 
    localStore.setQuery(api.notes.list, {}, [
      {
        _id: crypto.randomUUID() as any,
        _creationTime: Date.now(),
        userId: args.userId,
        title: args.title,
        content: args.content,
        isPinned: false,
      },
      ...existingNotes,
    ]);
  }
);

# نشر الخلفية للإنتاج
npx convex deploy
 
# بناء ونشر واجهة Next.js
npm run build