Next.js 14: Server Actions وTurbopack والميزات الجديدة

// app/actions.ts
'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title') as string;
  const content = formData.get('content') as string;
  
  // تحقق على مستوى الخادم
  if (!title || !content) {
    throw new Error('العنوان والمحتوى مطلوبان');
  }
  
  // إدخال في قاعدة البيانات
  await db.post.create({
    data: { title, content }
  });
  
  revalidatePath('/posts');
}

// app/create-post/page.tsx
import { createPost } from '../actions';

export default function CreatePost() {
  return (
    <form action={createPost}>
      <input name="title" placeholder="العنوان" required />
      <textarea name="content" placeholder="المحتوى" required />
      <button type="submit">إنشاء</button>
    </form>
  );
}

// صفحة مرندرة جزئيا
export default function ProductPage({ params }: { params: { id: string } }) {
  return (
    <div>
      {/* محتوى ثابت - مسبق الرندر */}
      <Header />
      <Navigation />
      
      {/* محتوى ديناميكي - عند الطلب */}
      <Suspense fallback={<ProductSkeleton />}>
        <ProductDetails id={params.id} />
      </Suspense>
    </div>
  );
}

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'مقالي',
  description: 'وصف المقال',
  openGraph: {
    images: ['./opengraph-image.jpg'],
  },
}