Turso و Drizzle ORM مع Next.js: قواعد بيانات جاهزة للحوسبة الطرفية في 2026

npx create-next-app@latest turso-bookmarks --typescript --tailwind --eslint --app --src-dir
cd turso-bookmarks

turso auth login

turso db create bookmarks-db --group default

turso db show bookmarks-db --url
turso db tokens create bookmarks-db

TURSO_DATABASE_URL=libsql://bookmarks-db-[your-org].turso.io
TURSO_AUTH_TOKEN=eyJhbGciOiJFZERTQSIsInR5cCI6IkpXVCJ9...

npm install drizzle-orm @libsql/client
npm install -D drizzle-kit

import { drizzle } from "drizzle-orm/libsql";
import { createClient } from "@libsql/client";
import * as schema from "./schema";
 
const client = createClient({
  url: process.env.TURSO_DATABASE_URL!,
  authToken: process.env.TURSO_AUTH_TOKEN,
});
 
export const db = drizzle(client, { schema });

import { defineConfig } from "drizzle-kit";
 
export default defineConfig({
  schema: "./src/lib/schema.ts",
  out: "./drizzle",
  dialect: "turso",
  dbCredentials: {
    url: process.env.TURSO_DATABASE_URL!,
    authToken: process.env.TURSO_AUTH_TOKEN,
  },
});

import { sqliteTable, text, integer } from "drizzle-orm/sqlite-core";
import { relations } from "drizzle-orm";
 
// جدول الإشارات المرجعية
export const bookmarks = sqliteTable("bookmarks", {
  id: integer("id").primaryKey({ autoIncrement: true }),
  title: text("title").notNull(),
  url: text("url").notNull(),
  description: text("description"),
  favicon: text("favicon"),
  createdAt: text("created_at")
    .notNull()
    .$defaultFn(() => new Date().toISOString()),
  updatedAt: text("updated_at")
    .notNull()
    .$defaultFn(() => new Date().toISOString()),
});
 
// جدول الوسوم
export const tags = sqliteTable("tags", {
  id: integer("id").primaryKey({ autoIncrement: true }),
  name: text("name").notNull().unique(),
  color: text("color").notNull().default("#6366f1"),
});
 
// جدول الربط بين الإشارات والوسوم
export const bookmarkTags = sqliteTable("bookmark_tags", {
  bookmarkId: integer("bookmark_id")
    .notNull()
    .references(() => bookmarks.id, { onDelete: "cascade" }),
  tagId: integer("tag_id")
    .notNull()
    .references(() => tags.id, { onDelete: "cascade" }),
});
 
// العلاقات
export const bookmarksRelations = relations(bookmarks, ({ many }) => ({
  bookmarkTags: many(bookmarkTags),
}));
 
export const tagsRelations = relations(tags, ({ many }) => ({
  bookmarkTags: many(bookmarkTags),
}));
 
export const bookmarkTagsRelations = relations(bookmarkTags, ({ one }) => ({
  bookmark: one(bookmarks, {
    fields: [bookmarkTags.bookmarkId],
    references: [bookmarks.id],
  }),
  tag: one(tags, {
    fields: [bookmarkTags.tagId],
    references: [tags.id],
  }),
}));

npx drizzle-kit generate

npx drizzle-kit migrate

turso db shell bookmarks-db ".tables"

import { db } from "@/lib/db";
import { bookmarks, bookmarkTags, tags } from "@/lib/schema";
import { eq, like, desc } from "drizzle-orm";
import { NextRequest, NextResponse } from "next/server";
 
export const runtime = "edge";
 
// GET /api/bookmarks?search=next&tag=dev
export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url);
  const search = searchParams.get("search");
  const tag = searchParams.get("tag");
 
  let query = db.query.bookmarks.findMany({
    with: {
      bookmarkTags: {
        with: {
          tag: true,
        },
      },
    },
    orderBy: [desc(bookmarks.createdAt)],
  });
 
  const results = await query;
 
  // تصفية في الذاكرة للبحث
  let filtered = results;
 
  if (search) {
    const term = search.toLowerCase();
    filtered = filtered.filter(
      (b) =>
        b.title.toLowerCase().includes(term) ||
        b.description?.toLowerCase().includes(term)
    );
  }
 
  if (tag) {
    filtered = filtered.filter((b) =>
      b.bookmarkTags.some((bt) => bt.tag.name === tag)
    );
  }
 
  return NextResponse.json(filtered);
}
 
// POST /api/bookmarks
export async function POST(request: NextRequest) {
  const body = await request.json();
  const { title, url, description, tagIds } = body;
 
  if (!title || !url) {
    return NextResponse.json(
      { error: "Title and URL are required" },
      { status: 400 }
    );
  }
 
  const [bookmark] = await db
    .insert(bookmarks)
    .values({ title, url, description })
    .returning();
 
  // ربط الوسوم
  if (tagIds && tagIds.length > 0) {
    await db.insert(bookmarkTags).values(
      tagIds.map((tagId: number) => ({
        bookmarkId: bookmark.id,
        tagId,
      }))
    );
  }
 
  return NextResponse.json(bookmark, { status: 201 });
}

import { db } from "@/lib/db";
import { bookmarks, bookmarkTags } from "@/lib/schema";
import { eq } from "drizzle-orm";
import { NextRequest, NextResponse } from "next/server";
 
export const runtime = "edge";
 
// PUT /api/bookmarks/:id
export async function PUT(
  request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
  const body = await request.json();
  const { title, url, description, tagIds } = body;
 
  const [updated] = await db
    .update(bookmarks)
    .set({
      title,
      url,
      description,
      updatedAt: new Date().toISOString(),
    })
    .where(eq(bookmarks.id, parseInt(id)))
    .returning();
 
  if (!updated) {
    return NextResponse.json(
      { error: "Bookmark not found" },
      { status: 404 }
    );
  }
 
  // تحديث الوسوم
  if (tagIds) {
    await db
      .delete(bookmarkTags)
      .where(eq(bookmarkTags.bookmarkId, updated.id));
 
    if (tagIds.length > 0) {
      await db.insert(bookmarkTags).values(
        tagIds.map((tagId: number) => ({
          bookmarkId: updated.id,
          tagId,
        }))
      );
    }
  }
 
  return NextResponse.json(updated);
}
 
// DELETE /api/bookmarks/:id
export async function DELETE(
  _request: NextRequest,
  { params }: { params: Promise<{ id: string }> }
) {
  const { id } = await params;
 
  const [deleted] = await db
    .delete(bookmarks)
    .where(eq(bookmarks.id, parseInt(id)))
    .returning();
 
  if (!deleted) {
    return NextResponse.json(
      { error: "Bookmark not found" },
      { status: 404 }
    );
  }
 
  return NextResponse.json({ success: true });
}

import { db } from "@/lib/db";
import { tags } from "@/lib/schema";
import { NextRequest, NextResponse } from "next/server";
 
export const runtime = "edge";
 
export async function GET() {
  const allTags = await db.select().from(tags);
  return NextResponse.json(allTags);
}
 
export async function POST(request: NextRequest) {
  const { name, color } = await request.json();
 
  if (!name) {
    return NextResponse.json(
      { error: "Tag name is required" },
      { status: 400 }
    );
  }
 
  const [tag] = await db
    .insert(tags)
    .values({ name, color: color || "#6366f1" })
    .returning();
 
  return NextResponse.json(tag, { status: 201 });
}

import { db } from "@/lib/db";
import { bookmarks, tags } from "@/lib/schema";
import { desc } from "drizzle-orm";
import { BookmarkList } from "@/components/bookmark-list";
 
export const runtime = "edge";
 
export default async function HomePage() {
  const allBookmarks = await db.query.bookmarks.findMany({
    with: {
      bookmarkTags: {
        with: {
          tag: true,
        },
      },
    },
    orderBy: [desc(bookmarks.createdAt)],
  });
 
  const allTags = await db.select().from(tags);
 
  return (
    <main className="mx-auto max-w-4xl px-4 py-8">
      <h1 className="mb-8 text-3xl font-bold">إشاراتي المرجعية</h1>
      <BookmarkList
        initialBookmarks={allBookmarks}
        tags={allTags}
      />
    </main>
  );
}

"use client";
 
import { useState, useTransition } from "react";
 
type Tag = {
  id: number;
  name: string;
  color: string;
};
 
type BookmarkTag = {
  bookmarkId: number;
  tagId: number;
  tag: Tag;
};
 
type Bookmark = {
  id: number;
  title: string;
  url: string;
  description: string | null;
  favicon: string | null;
  createdAt: string;
  updatedAt: string;
  bookmarkTags: BookmarkTag[];
};
 
export function BookmarkList({
  initialBookmarks,
  tags,
}: {
  initialBookmarks: Bookmark[];
  tags: Tag[];
}) {
  const [bookmarksList, setBookmarks] = useState(initialBookmarks);
  const [search, setSearch] = useState("");
  const [selectedTag, setSelectedTag] = useState<string | null>(null);
  const [isPending, startTransition] = useTransition();
 
  const filteredBookmarks = bookmarksList.filter((b) => {
    const matchesSearch =
      !search ||
      b.title.toLowerCase().includes(search.toLowerCase()) ||
      b.description?.toLowerCase().includes(search.toLowerCase());
 
    const matchesTag =
      !selectedTag ||
      b.bookmarkTags.some((bt) => bt.tag.name === selectedTag);
 
    return matchesSearch && matchesTag;
  });
 
  async function handleDelete(id: number) {
    startTransition(async () => {
      const res = await fetch(`/api/bookmarks/${id}`, {
        method: "DELETE",
      });
      if (res.ok) {
        setBookmarks((prev) => prev.filter((b) => b.id !== id));
      }
    });
  }
 
  return (
    <div>
      {/* شريط البحث */}
      <div className="mb-6 flex gap-4">
        <input
          type="text"
          placeholder="بحث..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="flex-1 rounded-lg border px-4 py-2"
        />
        <select
          value={selectedTag || ""}
          onChange={(e) => setSelectedTag(e.target.value || null)}
          className="rounded-lg border px-4 py-2"
        >
          <option value="">جميع الوسوم</option>
          {tags.map((tag) => (
            <option key={tag.id} value={tag.name}>
              {tag.name}
            </option>
          ))}
        </select>
      </div>
 
      {/* قائمة الإشارات المرجعية */}
      <div className="space-y-4">
        {filteredBookmarks.map((bookmark) => (
          <div
            key={bookmark.id}
            className="rounded-lg border p-4 transition-shadow hover:shadow-md"
          >
            <div className="flex items-start justify-between">
              <div>
                <a
                  href={bookmark.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-lg font-semibold text-blue-600 hover:underline"
                >
                  {bookmark.title}
                </a>
                {bookmark.description && (
                  <p className="mt-1 text-gray-600">
                    {bookmark.description}
                  </p>
                )}
                <div className="mt-2 flex gap-2">
                  {bookmark.bookmarkTags.map((bt) => (
                    <span
                      key={bt.tagId}
                      className="rounded-full px-2 py-1 text-xs text-white"
                      style={{
                        backgroundColor: bt.tag.color,
                      }}
                    >
                      {bt.tag.name}
                    </span>
                  ))}
                </div>
              </div>
              <button
                onClick={() => handleDelete(bookmark.id)}
                disabled={isPending}
                className="text-red-500 hover:text-red-700"
              >
                حذف
              </button>
            </div>
          </div>
        ))}
      </div>
 
      {filteredBookmarks.length === 0 && (
        <p className="text-center text-gray-500">
          لم يتم العثور على إشارات مرجعية.
        </p>
      )}
    </div>
  );
}

import { db } from "./db";
import { bookmarks, tags, bookmarkTags } from "./schema";
 
async function seed() {
  console.log("Seeding database...");
 
  // إنشاء الوسوم
  const [devTag] = await db
    .insert(tags)
    .values({ name: "dev", color: "#6366f1" })
    .returning();
 
  const [designTag] = await db
    .insert(tags)
    .values({ name: "design", color: "#ec4899" })
    .returning();
 
  const [toolsTag] = await db
    .insert(tags)
    .values({ name: "tools", color: "#14b8a6" })
    .returning();
 
  // إنشاء الإشارات المرجعية
  const [bm1] = await db
    .insert(bookmarks)
    .values({
      title: "Next.js Documentation",
      url: "https://nextjs.org/docs",
      description: "التوثيق الرسمي لـ Next.js",
    })
    .returning();
 
  const [bm2] = await db
    .insert(bookmarks)
    .values({
      title: "Turso Documentation",
      url: "https://docs.turso.tech",
      description: "الدليل الشامل لـ Turso و LibSQL",
    })
    .returning();
 
  const [bm3] = await db
    .insert(bookmarks)
    .values({
      title: "Drizzle ORM",
      url: "https://orm.drizzle.team",
      description: "ORM بدون واجهة لـ TypeScript لـ SQL",
    })
    .returning();
 
  // ربط الوسوم بالإشارات المرجعية
  await db.insert(bookmarkTags).values([
    { bookmarkId: bm1.id, tagId: devTag.id },
    { bookmarkId: bm2.id, tagId: devTag.id },
    { bookmarkId: bm2.id, tagId: toolsTag.id },
    { bookmarkId: bm3.id, tagId: devTag.id },
    { bookmarkId: bm3.id, tagId: toolsTag.id },
  ]);
 
  console.log("Seed completed!");
}
 
seed().catch(console.error);

npx tsx src/lib/seed.ts

import { unstable_cache } from "next/cache";
 
export const getCachedTags = unstable_cache(
  async () => {
    return db.select().from(tags);
  },
  ["all-tags"],
  {
    revalidate: 3600, // ساعة واحدة
    tags: ["tags"],
  }
);

import { createClient } from "@libsql/client";
 
const client = createClient({
  url: "file:local-replica.db",
  syncUrl: process.env.TURSO_DATABASE_URL!,
  authToken: process.env.TURSO_AUTH_TOKEN,
  syncInterval: 60, // مزامنة كل 60 ثانية
});

npx vercel deploy --prod

curl -o /dev/null -s -w "Time: %{time_total}s\n" \
  https://your-app.vercel.app/api/bookmarks

CREATE VIRTUAL TABLE IF NOT EXISTS bookmarks_fts USING fts5(
  title,
  description,
  content='bookmarks',
  content_rowid='id'
);
 
-- مشغلات لإبقاء FTS متزامنًا
CREATE TRIGGER IF NOT EXISTS bookmarks_ai AFTER INSERT ON bookmarks BEGIN
  INSERT INTO bookmarks_fts(rowid, title, description)
  VALUES (new.id, new.title, new.description);
END;
 
CREATE TRIGGER IF NOT EXISTS bookmarks_ad AFTER DELETE ON bookmarks BEGIN
  INSERT INTO bookmarks_fts(bookmarks_fts, rowid, title, description)
  VALUES('delete', old.id, old.title, old.description);
END;
 
CREATE TRIGGER IF NOT EXISTS bookmarks_au AFTER UPDATE ON bookmarks BEGIN
  INSERT INTO bookmarks_fts(bookmarks_fts, rowid, title, description)
  VALUES('delete', old.id, old.title, old.description);
  INSERT INTO bookmarks_fts(rowid, title, description)
  VALUES (new.id, new.title, new.description);
END;

turso db shell bookmarks-db < drizzle/fts-setup.sql

import { db } from "@/lib/db";
import { sql } from "drizzle-orm";
import { NextRequest, NextResponse } from "next/server";
 
export const runtime = "edge";
 
export async function GET(request: NextRequest) {
  const query = new URL(request.url).searchParams.get("q");
 
  if (!query) {
    return NextResponse.json([]);
  }
 
  const results = await db.all(
    sql`SELECT b.*, bm.rank
        FROM bookmarks_fts bm
        JOIN bookmarks b ON b.id = bm.rowid
        WHERE bookmarks_fts MATCH ${query}
        ORDER BY bm.rank
        LIMIT 20`
  );
 
  return NextResponse.json(results);
}

turso db tokens create bookmarks-db --expiration none

turso db shell bookmarks-db "DROP TABLE IF EXISTS bookmark_tags; DROP TABLE IF EXISTS bookmarks; DROP TABLE IF EXISTS tags;"
npx drizzle-kit migrate