Neon Serverless Postgres مع Next.js App Router: بناء تطبيق كامل مع تفريع قواعد البيانات

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

npm install @neondatabase/serverless drizzle-orm
npm install -D drizzle-kit dotenv

# قاعدة بيانات Neon
DATABASE_URL="postgres://username:password@ep-cool-name-123456-pooler.us-east-2.aws.neon.tech/neondb?sslmode=require"
DIRECT_DATABASE_URL="postgres://username:password@ep-cool-name-123456.us-east-2.aws.neon.tech/neondb?sslmode=require"

import { pgTable, serial, text, varchar, timestamp, boolean, integer } from "drizzle-orm/pg-core";
 
export const bookmarks = pgTable("bookmarks", {
  id: serial("id").primaryKey(),
  title: varchar("title", { length: 255 }).notNull(),
  url: text("url").notNull(),
  description: text("description"),
  tags: text("tags").array(),
  isFavorite: boolean("is_favorite").default(false).notNull(),
  clickCount: integer("click_count").default(0).notNull(),
  createdAt: timestamp("created_at").defaultNow().notNull(),
  updatedAt: timestamp("updated_at").defaultNow().notNull(),
});
 
export type Bookmark = typeof bookmarks.$inferSelect;
export type NewBookmark = typeof bookmarks.$inferInsert;

import { neon } from "@neondatabase/serverless";
import { drizzle } from "drizzle-orm/neon-http";
import * as schema from "./schema";
 
if (!process.env.DATABASE_URL) {
  throw new Error("DATABASE_URL environment variable is not set");
}
 
const sql = neon(process.env.DATABASE_URL);
 
export const db = drizzle(sql, { schema });

import { defineConfig } from "drizzle-kit";
import dotenv from "dotenv";
 
dotenv.config({ path: ".env.local" });
 
export default defineConfig({
  schema: "./src/db/schema.ts",
  out: "./drizzle",
  dialect: "postgresql",
  dbCredentials: {
    url: process.env.DIRECT_DATABASE_URL!,
  },
});

{
  "scripts": {
    "db:generate": "drizzle-kit generate",
    "db:migrate": "drizzle-kit migrate",
    "db:push": "drizzle-kit push",
    "db:studio": "drizzle-kit studio"
  }
}

npm run db:push

npm run db:studio

"use server";
 
import { db } from "@/db";
import { bookmarks } from "@/db/schema";
import { eq, desc, sql, ilike, or } from "drizzle-orm";
import { revalidatePath } from "next/cache";
 
export async function getBookmarks(search?: string) {
  if (search) {
    return db
      .select()
      .from(bookmarks)
      .where(
        or(
          ilike(bookmarks.title, `%${search}%`),
          ilike(bookmarks.url, `%${search}%`),
          ilike(bookmarks.description, `%${search}%`)
        )
      )
      .orderBy(desc(bookmarks.createdAt));
  }
 
  return db
    .select()
    .from(bookmarks)
    .orderBy(desc(bookmarks.createdAt));
}
 
export async function createBookmark(formData: FormData) {
  const title = formData.get("title") as string;
  const url = formData.get("url") as string;
  const description = formData.get("description") as string;
  const tags = (formData.get("tags") as string)
    ?.split(",")
    .map((t) => t.trim())
    .filter(Boolean);
 
  await db.insert(bookmarks).values({
    title,
    url,
    description: description || null,
    tags: tags?.length ? tags : null,
  });
 
  revalidatePath("/");
}
 
export async function toggleFavorite(id: number) {
  const [bookmark] = await db
    .select({ isFavorite: bookmarks.isFavorite })
    .from(bookmarks)
    .where(eq(bookmarks.id, id));
 
  if (bookmark) {
    await db
      .update(bookmarks)
      .set({ isFavorite: !bookmark.isFavorite })
      .where(eq(bookmarks.id, id));
  }
 
  revalidatePath("/");
}
 
export async function incrementClickCount(id: number) {
  await db
    .update(bookmarks)
    .set({
      clickCount: sql`${bookmarks.clickCount} + 1`,
    })
    .where(eq(bookmarks.id, id));
}
 
export async function deleteBookmark(id: number) {
  await db.delete(bookmarks).where(eq(bookmarks.id, id));
  revalidatePath("/");
}
 
export async function getStats() {
  const [result] = await db
    .select({
      total: sql<number>`count(*)`,
      favorites: sql<number>`count(*) filter (where ${bookmarks.isFavorite} = true)`,
      totalClicks: sql<number>`coalesce(sum(${bookmarks.clickCount}), 0)`,
    })
    .from(bookmarks);
 
  return result;
}

"use client";
 
import { Bookmark } from "@/db/schema";
import { toggleFavorite, deleteBookmark, incrementClickCount } from "@/app/actions";
 
export function BookmarkCard({ bookmark }: { bookmark: Bookmark }) {
  const handleClick = async () => {
    await incrementClickCount(bookmark.id);
  };
 
  return (
    <div className="border rounded-lg p-4 hover:shadow-md transition-shadow bg-white">
      <div className="flex items-start justify-between">
        <div className="flex-1 min-w-0">
          <a
            href={bookmark.url}
            target="_blank"
            rel="noopener noreferrer"
            onClick={handleClick}
            className="text-lg font-semibold text-blue-600 hover:text-blue-800 hover:underline truncate block"
          >
            {bookmark.title}
          </a>
          <p className="text-sm text-gray-500 truncate mt-1">{bookmark.url}</p>
        </div>
        <div className="flex gap-2 ml-4">
          <button
            onClick={() => toggleFavorite(bookmark.id)}
            className="text-xl hover:scale-110 transition-transform"
            title={bookmark.isFavorite ? "إزالة من المفضلة" : "إضافة للمفضلة"}
          >
            {bookmark.isFavorite ? "\u2605" : "\u2606"}
          </button>
          <button
            onClick={() => deleteBookmark(bookmark.id)}
            className="text-red-400 hover:text-red-600 text-sm"
            title="حذف الإشارة المرجعية"
          >
            حذف
          </button>
        </div>
      </div>
 
      {bookmark.description && (
        <p className="text-gray-600 mt-2 text-sm line-clamp-2">
          {bookmark.description}
        </p>
      )}
 
      <div className="flex items-center justify-between mt-3">
        <div className="flex gap-1 flex-wrap">
          {bookmark.tags?.map((tag) => (
            <span
              key={tag}
              className="px-2 py-0.5 bg-gray-100 text-gray-600 rounded-full text-xs"
            >
              {tag}
            </span>
          ))}
        </div>
        <span className="text-xs text-gray-400">
          {bookmark.clickCount} نقرة
        </span>
      </div>
    </div>
  );
}

"use client";
 
import { createBookmark } from "@/app/actions";
import { useRef } from "react";
 
export function AddBookmarkForm() {
  const formRef = useRef<HTMLFormElement>(null);
 
  const handleSubmit = async (formData: FormData) => {
    await createBookmark(formData);
    formRef.current?.reset();
  };
 
  return (
    <form ref={formRef} action={handleSubmit} className="space-y-4 bg-white p-6 rounded-lg border">
      <h2 className="text-lg font-semibold">إضافة إشارة مرجعية جديدة</h2>
 
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
            العنوان *
          </label>
          <input
            type="text"
            id="title"
            name="title"
            required
            className="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            placeholder="إشارتي المرجعية"
          />
        </div>
 
        <div>
          <label htmlFor="url" className="block text-sm font-medium text-gray-700 mb-1">
            الرابط *
          </label>
          <input
            type="url"
            id="url"
            name="url"
            required
            className="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            placeholder="https://example.com"
          />
        </div>
      </div>
 
      <div>
        <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
          الوصف
        </label>
        <textarea
          id="description"
          name="description"
          rows={2}
          className="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          placeholder="وصف مختصر..."
        />
      </div>
 
      <div>
        <label htmlFor="tags" className="block text-sm font-medium text-gray-700 mb-1">
          الوسوم (مفصولة بفواصل)
        </label>
        <input
          type="text"
          id="tags"
          name="tags"
          className="w-full px-3 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
          placeholder="react, tutorial, database"
        />
      </div>
 
      <button
        type="submit"
        className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
      >
        إضافة إشارة مرجعية
      </button>
    </form>
  );
}

import { getBookmarks, getStats } from "./actions";
import { BookmarkCard } from "@/components/bookmark-card";
import { AddBookmarkForm } from "@/components/add-bookmark-form";
 
export default async function Home({
  searchParams,
}: {
  searchParams: Promise<{ search?: string }>;
}) {
  const { search } = await searchParams;
  const [allBookmarks, stats] = await Promise.all([
    getBookmarks(search),
    getStats(),
  ]);
 
  return (
    <main className="max-w-4xl mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-2">مدير الإشارات المرجعية</h1>
      <p className="text-gray-500 mb-8">
        مدعوم بـ Neon Serverless Postgres
      </p>
 
      {/* الإحصائيات */}
      <div className="grid grid-cols-3 gap-4 mb-8">
        <div className="bg-blue-50 rounded-lg p-4 text-center">
          <div className="text-2xl font-bold text-blue-600">{stats.total}</div>
          <div className="text-sm text-gray-600">إجمالي الإشارات</div>
        </div>
        <div className="bg-yellow-50 rounded-lg p-4 text-center">
          <div className="text-2xl font-bold text-yellow-600">{stats.favorites}</div>
          <div className="text-sm text-gray-600">المفضلة</div>
        </div>
        <div className="bg-green-50 rounded-lg p-4 text-center">
          <div className="text-2xl font-bold text-green-600">{stats.totalClicks}</div>
          <div className="text-sm text-gray-600">إجمالي النقرات</div>
        </div>
      </div>
 
      {/* نموذج الإضافة */}
      <div className="mb-8">
        <AddBookmarkForm />
      </div>
 
      {/* البحث */}
      <form className="mb-6">
        <input
          type="text"
          name="search"
          defaultValue={search}
          placeholder="بحث في الإشارات المرجعية..."
          className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
        />
      </form>
 
      {/* قائمة الإشارات المرجعية */}
      <div className="space-y-4">
        {allBookmarks.length === 0 ? (
          <div className="text-center py-12 text-gray-400">
            <p className="text-lg">لا توجد إشارات مرجعية بعد</p>
            <p className="text-sm mt-1">أضف إشارتك المرجعية الأولى أعلاه</p>
          </div>
        ) : (
          allBookmarks.map((bookmark) => (
            <BookmarkCard key={bookmark.id} bookmark={bookmark} />
          ))
        )}
      </div>
    </main>
  );
}

npm run dev

// scripts/create-neon-branch.ts
const NEON_API_KEY = process.env.NEON_API_KEY!;
const NEON_PROJECT_ID = process.env.NEON_PROJECT_ID!;
 
async function createBranch(branchName: string) {
  const response = await fetch(
    `https://console.neon.tech/api/v2/projects/${NEON_PROJECT_ID}/branches`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${NEON_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        branch: {
          name: branchName,
          parent_id: undefined,
        },
        endpoints: [
          {
            type: "read_write",
          },
        ],
      }),
    }
  );
 
  const data = await response.json();
 
  const endpoint = data.endpoints[0];
  const host = endpoint.host;
  const dbName = "neondb";
  const role = data.roles?.[0]?.name || "neondb_owner";
 
  console.log(`تم إنشاء الفرع: ${data.branch.name}`);
  console.log(`الاتصال: postgres://${role}@${host}/${dbName}?sslmode=require`);
 
  return data;
}
 
const prNumber = process.argv[2];
if (prNumber) {
  createBranch(`preview/pr-${prNumber}`);
}

# .github/workflows/preview-branch.yml
name: Create Preview Database
 
on:
  pull_request:
    types: [opened, synchronize]
 
jobs:
  create-branch:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - name: Create Neon Branch
        uses: neondatabase/create-branch-action@v5
        id: create-branch
        with:
          project_id: ${{ secrets.NEON_PROJECT_ID }}
          api_key: ${{ secrets.NEON_API_KEY }}
          branch_name: preview/pr-${{ github.event.pull_request.number }}
 
      - name: Set DATABASE_URL
        run: |
          echo "Preview database URL: ${{ steps.create-branch.outputs.db_url_with_pooler }}"

# .github/workflows/cleanup-branch.yml
name: Cleanup Preview Database
 
on:
  pull_request:
    types: [closed]
 
jobs:
  delete-branch:
    runs-on: ubuntu-latest
    steps:
      - name: Delete Neon Branch
        uses: neondatabase/delete-branch-action@v3
        with:
          project_id: ${{ secrets.NEON_PROJECT_ID }}
          api_key: ${{ secrets.NEON_API_KEY }}
          branch: preview/pr-${{ github.event.pull_request.number }}

import { neon } from "@neondatabase/serverless";
const sql = neon(process.env.DATABASE_URL);
 
const result = await sql`SELECT * FROM bookmarks`;

import { Pool } from "@neondatabase/serverless";
const pool = new Pool({ connectionString: process.env.DATABASE_URL });
 
const { rows } = await pool.query("SELECT * FROM bookmarks");

import { Client } from "pg";
const client = new Client(process.env.DIRECT_DATABASE_URL);
await client.connect();

// سيئ: استعلامات متتالية (بطيء)
const bookmarks = await db.select().from(bookmarksTable);
const stats = await db.select().from(statsTable);
 
// جيد: استعلامات متوازية (سريع)
const [bookmarks, stats] = await Promise.all([
  db.select().from(bookmarksTable),
  db.select().from(statsTable),
]);

// سيئ: يجلب كل الأعمدة
const result = await db.select().from(bookmarks);
 
// جيد: يجلب فقط ما تحتاجه
const result = await db
  .select({
    id: bookmarks.id,
    title: bookmarks.title,
    url: bookmarks.url,
  })
  .from(bookmarks);

const sql = neon(process.env.DATABASE_URL, {
  fetchConnectionCache: true,
});

-- drizzle/0001_add_search_index.sql
CREATE INDEX idx_bookmarks_search ON bookmarks
USING GIN (to_tsvector('english', coalesce(title, '') || ' ' || coalesce(description, '')));

export async function searchBookmarks(query: string) {
  const results = await db.execute(
    sql`SELECT *, ts_rank(
      to_tsvector('english', coalesce(title, '') || ' ' || coalesce(description, '')),
      plainto_tsquery('english', ${query})
    ) as rank
    FROM bookmarks
    WHERE to_tsvector('english', coalesce(title, '') || ' ' || coalesce(description, ''))
      @@ plainto_tsquery('english', ${query})
    ORDER BY rank DESC`
  );
 
  return results.rows;
}