GATEOFAI
تسجيل الدخول English

دمج الذكاء الاصطناعي في Next.js لعام ٢٠٢٦: إتقان Vercel AI SDK وإجراءات الخادم

May 5, 2026 | 5 دقائق قراءة
Share:
الذكاء الاصطناعي الشامل
٥ مايو ٢٠٢٦
© بوابة الذكاء الاصطناعي
✍️ بقلم محمد ساعد | مهندس تقني

الويب الذكي: إتقان دمج الذكاء الاصطناعي في Next.js

في عام ٢٠٢٦، تجاوزنا البوتات البسيطة. يتوقع المستخدمون واجهة مستخدم توليدية—واجهات لا تتحدث فقط، بل تعيد هيكلة الكود وتحدث DOM في الوقت الفعلي. يتجاوز هذا الدليل كود “العرض” ويبني منسق كود ذكاء اصطناعي جاهز للإنتاج.

التقنيات المستخدمة في ٢٠٢٦

  • الإطار: Next.js 15+ (App Router)
  • مكتبة الذكاء الاصطناعي: ai (Vercel AI SDK)
  • المنطق: إجراءات الخادم (بدون مسارات API)
  • واجهة المستخدم: shadcn/ui & Tailwind CSS 4.0

الخطوة ١: التثبيت والمزودون

حزمة ai أصبحت الآن المعيار الصناعي للبث. سنستخدم بوابة الذكاء الاصطناعي لضمان بقاء تطبيقنا غير مرتبط بنموذج معين (التبديل بين Gemini 4 وClaude 4.7 بسطر كود واحد).

npm install ai @ai-sdk/openai @ai-sdk/google zod

الخطوة ٢: إجراء الخادم (منطق البث)

انسَ api/analyze. نحن الآن نستخدم إجراءات الخادم. يتيح لنا ذلك الحفاظ على منطقنا على الخادم أثناء بث النص مباشرة إلى مكون العميل مع ضمان الأمان الكامل للأنواع.


'use server';

import { streamText } from 'ai';
import { google } from '@ai-sdk/google'; // Or openai('gpt-5')

export async function analyzeCode(code: string) {
  const result = await streamText({
    model: google('gemini-4-pro'),
    system: 'You are a Senior Architect. Analyze code for security and performance.',
    prompt: `Refactor this snippet: ${code}`,
  });

  return result.toDataStreamResponse();
}

الخطوة ٣: مكون واجهة المستخدم “الذكي”

استخدام الخطافات useChat أو useCompletion من AI SDK يتولى إدارة حالة البث المعقدة، التمرير التلقائي، وحدود الأخطاء لك.


'use client';

import { useCompletion } from 'ai/react';

export default function CodeReviewer() {
  const { completion, input, handleInputChange, handleSubmit, isLoading } = useCompletion({
    api: '/api/completion', // Or directly link to the Server Action
  });

  return (