كيفية إنشاء تطبيق Full-Stack باستخدام Next.js 15 وPostgreSQL في عام 2026

npx create-next-app@latest taskapp \
  --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd taskapp

npm install prisma @prisma/client
npx prisma init

DATABASE_URL="postgresql://user:pass@ep-xxx.us-east-2.aws.neon.tech/neondb?sslmode=require"
NEXTAUTH_SECRET="your-random-secret-here"
GITHUB_CLIENT_ID="your-github-oauth-app-id"
GITHUB_CLIENT_SECRET="your-github-oauth-app-secret"

// prisma/schema.prisma
model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  createdAt DateTime @default(now())
  tasks     Task[]
}

model Task {
  id        String     @id @default(cuid())
  title     String
  status    TaskStatus @default(PENDING)
  priority  Priority   @default(MEDIUM)
  userId    String
  user      User       @relation(fields: [userId], references: [id], onDelete: Cascade)
  createdAt DateTime   @default(now())
  updatedAt DateTime   @updatedAt

  @@index([userId])
}

enum TaskStatus { PENDING IN_PROGRESS COMPLETED CANCELLED }
enum Priority  { LOW MEDIUM HIGH URGENT }

npx prisma migrate dev --name init
npx prisma generate

// src/lib/db.ts
import { PrismaClient } from '@prisma/client';
const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
export const db = globalForPrisma.prisma ?? new PrismaClient();
if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = db;

// src/app/dashboard/page.tsx (Server Component)
import { db } from '@/lib/db';
import { auth } from '@/lib/auth';
import { redirect } from 'next/navigation';

export default async function DashboardPage() {
  const session = await auth();
  if (!session?.user) redirect('/');

  const tasks = await db.task.findMany({
    where: { userId: session.user.id, status: { not: 'CANCELLED' } },
    orderBy: [{ priority: 'desc' }, { createdAt: 'desc' }],
    take: 50,
  });

  return (
    <main className="container mx-auto p-6">
      <h1>My Tasks</h1>
      {tasks.map(task => <TaskCard key={task.id} task={task} />)}
    </main>
  );
}

// src/actions/tasks.ts
'use server';
import { db } from '@/lib/db';
import { auth } from '@/lib/auth';
import { revalidatePath } from 'next/cache';
import { z } from 'zod';

const Schema = z.object({
  title:    z.string().min(1).max(200),
  priority: z.enum(['LOW','MEDIUM','HIGH','URGENT']).default('MEDIUM'),
});

export async function createTask(formData: FormData) {
  const session = await auth();
  if (!session?.user?.id) throw new Error('Unauthorized');

  const parsed = Schema.safeParse({
    title:    formData.get('title'),
    priority: formData.get('priority') || 'MEDIUM',
  });
  if (!parsed.success) return { error: parsed.error.flatten().fieldErrors };

  await db.task.create({ data: { ...parsed.data, userId: session.user.id } });
  revalidatePath('/dashboard');
  return { success: true };
}

npm install next-auth@beta @auth/prisma-adapter

// src/lib/auth.ts
import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';
import { PrismaAdapter } from '@auth/prisma-adapter';
import { db } from './db';

export const { auth, handlers, signIn, signOut } = NextAuth({
  adapter: PrismaAdapter(db),
  providers: [GitHub({ clientId: process.env.GITHUB_CLIENT_ID!, clientSecret: process.env.GITHUB_CLIENT_SECRET! })],
  session: { strategy: 'database' },
  callbacks: { session: ({ session, user }) => ({ ...session, user: { ...session.user, id: user.id } }) }
});

# Install Vercel CLI and deploy
npm install -g vercel
vercel

# Set environment variables
vercel env add DATABASE_URL
vercel env add NEXTAUTH_SECRET
vercel env add GITHUB_CLIENT_ID
vercel env add GITHUB_CLIENT_SECRET

vercel --prod