بناء تطبيق Full-Stack باستخدام Strapi 5 و Next.js 15 App Router

npx create-strapi@latest my-blog-cms

cd my-blog-cms
npm run develop

# جلب كل المقالات المنشورة
curl http://localhost:1337/api/articles?populate=*
 
# جلب مقال محدد
curl http://localhost:1337/api/articles/1?populate=*
 
# جلب المقالات مع الفئة والمؤلف
curl "http://localhost:1337/api/articles?populate[author][fields][0]=name&populate[category][fields][0]=name&populate[cover][fields][0]=url"

npx create-next-app@latest my-blog-frontend \
  --typescript \
  --tailwind \
  --app \
  --src-dir \
  --import-alias "@/*"
 
cd my-blog-frontend

npm install qs
npm install -D @types/qs

NEXT_PUBLIC_STRAPI_URL=http://localhost:1337
STRAPI_API_TOKEN=your_api_token_here

import qs from "qs";
 
const STRAPI_URL = process.env.NEXT_PUBLIC_STRAPI_URL || "http://localhost:1337";
const STRAPI_TOKEN = process.env.STRAPI_API_TOKEN;
 
// أنواع البيانات الأساسية من Strapi
export interface StrapiImage {
  id: number;
  url: string;
  alternativeText: string | null;
  width: number;
  height: number;
  formats?: {
    thumbnail?: { url: string; width: number; height: number };
    small?: { url: string; width: number; height: number };
    medium?: { url: string; width: number; height: number };
    large?: { url: string; width: number; height: number };
  };
}
 
export interface StrapiAuthor {
  id: number;
  name: string;
  bio: string | null;
  email: string;
  avatar: StrapiImage | null;
}
 
export interface StrapiCategory {
  id: number;
  name: string;
  slug: string;
  description: string | null;
}
 
export interface StrapiBlock {
  type: string;
  children?: Array<{ type: string; text?: string; bold?: boolean; italic?: boolean }>;
  level?: number;
  image?: StrapiImage;
  url?: string;
}
 
export interface StrapiArticle {
  id: number;
  title: string;
  slug: string;
  content: StrapiBlock[];
  excerpt: string | null;
  cover: StrapiImage | null;
  publishedAt: string | null;
  createdAt: string;
  updatedAt: string;
  author: StrapiAuthor | null;
  category: StrapiCategory | null;
}
 
export interface StrapiResponse<T> {
  data: T;
  meta: {
    pagination?: {
      page: number;
      pageSize: number;
      pageCount: number;
      total: number;
    };
  };
}
 
// دالة الجلب الأساسية
async function strapiRequest<T>(
  endpoint: string,
  params?: Record<string, unknown>,
  options?: RequestInit
): Promise<StrapiResponse<T>> {
  const queryString = params ? `?${qs.stringify(params, { encodeValuesOnly: true })}` : "";
  const url = `${STRAPI_URL}/api${endpoint}${queryString}`;
 
  const headers: HeadersInit = {
    "Content-Type": "application/json",
  };
 
  if (STRAPI_TOKEN) {
    headers["Authorization"] = `Bearer ${STRAPI_TOKEN}`;
  }
 
  const response = await fetch(url, {
    headers,
    ...options,
  });
 
  if (!response.ok) {
    throw new Error(`Strapi API Error: ${response.status} ${response.statusText}`);
  }
 
  return response.json();
}
 
// خيارات populate الافتراضية للمقالات
const ARTICLE_POPULATE = {
  populate: {
    cover: {
      fields: ["url", "alternativeText", "width", "height", "formats"],
    },
    author: {
      fields: ["name", "email"],
      populate: {
        avatar: { fields: ["url", "alternativeText"] },
      },
    },
    category: {
      fields: ["name", "slug"],
    },
  },
};
 
// جلب كل المقالات
export async function getArticles(params?: {
  page?: number;
  pageSize?: number;
  categorySlug?: string;
  locale?: string;
}): Promise<StrapiResponse<StrapiArticle[]>> {
  const queryParams: Record<string, unknown> = {
    ...ARTICLE_POPULATE,
    sort: ["publishedAt:desc"],
    pagination: {
      page: params?.page || 1,
      pageSize: params?.pageSize || 10,
    },
  };
 
  if (params?.categorySlug) {
    queryParams.filters = {
      category: { slug: { $eq: params.categorySlug } },
    };
  }
 
  if (params?.locale) {
    queryParams.locale = params.locale;
  }
 
  return strapiRequest<StrapiArticle[]>("/articles", queryParams);
}
 
// جلب مقال واحد بالـ slug
export async function getArticleBySlug(
  slug: string,
  options?: { preview?: boolean; locale?: string }
): Promise<StrapiArticle | null> {
  const queryParams: Record<string, unknown> = {
    ...ARTICLE_POPULATE,
    populate: {
      ...ARTICLE_POPULATE.populate,
    },
    filters: { slug: { $eq: slug } },
  };
 
  if (options?.locale) {
    queryParams.locale = options.locale;
  }
 
  // في وضع المعاينة، نجلب المسودات أيضًا
  if (options?.preview) {
    queryParams.publicationState = "preview";
  }
 
  const response = await strapiRequest<StrapiArticle[]>("/articles", queryParams);
  return response.data[0] || null;
}
 
// جلب كل الـ slugs للمقالات (لـ generateStaticParams)
export async function getAllArticleSlugs(): Promise<string[]> {
  const response = await strapiRequest<Array<{ slug: string }>>("/articles", {
    fields: ["slug"],
    pagination: { pageSize: 1000 },
  });
  return response.data.map((article) => article.slug);
}
 
// جلب كل الفئات
export async function getCategories(): Promise<StrapiCategory[]> {
  const response = await strapiRequest<StrapiCategory[]>("/categories", {
    fields: ["name", "slug", "description"],
    sort: ["name:asc"],
  });
  return response.data;
}
 
// جلب فئة واحدة بالـ slug
export async function getCategoryBySlug(slug: string): Promise<StrapiCategory | null> {
  const response = await strapiRequest<StrapiCategory[]>("/categories", {
    filters: { slug: { $eq: slug } },
    fields: ["name", "slug", "description"],
  });
  return response.data[0] || null;
}
 
// بناء URL الصورة الكاملة
export function getStrapiImageUrl(image: StrapiImage | null, size?: "thumbnail" | "small" | "medium" | "large"): string {
  if (!image) return "/images/placeholder.webp";
 
  if (size && image.formats?.[size]) {
    const format = image.formats[size]!;
    return image.url.startsWith("http") ? format.url : `${STRAPI_URL}${format.url}`;
  }
 
  return image.url.startsWith("http") ? image.url : `${STRAPI_URL}${image.url}`;
}

import Image from "next/image";
import Link from "next/link";
import { getArticles, getCategories, getStrapiImageUrl } from "@/lib/strapi";
import type { StrapiArticle } from "@/lib/strapi";
 
interface HomePageProps {
  searchParams: Promise<{ category?: string; page?: string }>;
}
 
export default async function HomePage({ searchParams }: HomePageProps) {
  const params = await searchParams;
  const currentPage = Number(params.page) || 1;
  const categorySlug = params.category;
 
  const [articlesResponse, categories] = await Promise.all([
    getArticles({
      page: currentPage,
      pageSize: 9,
      categorySlug,
    }),
    getCategories(),
  ]);
 
  const { data: articles, meta } = articlesResponse;
  const totalPages = meta.pagination?.pageCount || 1;
 
  return (
    <main className="max-w-6xl mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-2">المدونة</h1>
      <p className="text-gray-600 mb-8">آخر المقالات والأدلة التقنية</p>
 
      {/* قائمة الفئات */}
      <div className="flex flex-wrap gap-2 mb-8">
        <Link
          href="/"
          className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
            !categorySlug
              ? "bg-blue-600 text-white"
              : "bg-gray-100 text-gray-700 hover:bg-gray-200"
          }`}
        >
          الكل
        </Link>
        {categories.map((cat) => (
          <Link
            key={cat.id}
            href={`/?category=${cat.slug}`}
            className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
              categorySlug === cat.slug
                ? "bg-blue-600 text-white"
                : "bg-gray-100 text-gray-700 hover:bg-gray-200"
            }`}
          >
            {cat.name}
          </Link>
        ))}
      </div>
 
      {/* شبكة المقالات */}
      {articles.length === 0 ? (
        <div className="text-center py-16 text-gray-500">
          لا توجد مقالات في هذه الفئة
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {articles.map((article) => (
            <ArticleCard key={article.id} article={article} />
          ))}
        </div>
      )}
 
      {/* ترقيم الصفحات */}
      {totalPages > 1 && (
        <div className="flex justify-center gap-2 mt-10">
          {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
            <Link
              key={page}
              href={`/?page=${page}${categorySlug ? `&category=${categorySlug}` : ""}`}
              className={`w-10 h-10 flex items-center justify-center rounded-lg font-medium ${
                page === currentPage
                  ? "bg-blue-600 text-white"
                  : "bg-gray-100 text-gray-700 hover:bg-gray-200"
              }`}
            >
              {page}
            </Link>
          ))}
        </div>
      )}
    </main>
  );
}
 
function ArticleCard({ article }: { article: StrapiArticle }) {
  const coverUrl = getStrapiImageUrl(article.cover, "medium");
  const publishDate = article.publishedAt
    ? new Date(article.publishedAt).toLocaleDateString("ar-TN", {
        year: "numeric",
        month: "long",
        day: "numeric",
      })
    : null;
 
  return (
    <Link href={`/articles/${article.slug}`} className="group block">
      <article className="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 hover:shadow-md transition-shadow h-full flex flex-col">
        {/* صورة الغلاف */}
        <div className="relative aspect-video overflow-hidden">
          <Image
            src={coverUrl}
            alt={article.cover?.alternativeText || article.title}
            fill
            className="object-cover group-hover:scale-105 transition-transform duration-300"
            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          />
        </div>
 
        {/* محتوى البطاقة */}
        <div className="p-5 flex flex-col flex-1">
          {article.category && (
            <span className="text-xs font-semibold text-blue-600 uppercase tracking-wider mb-2">
              {article.category.name}
            </span>
          )}
 
          <h2 className="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors line-clamp-2">
            {article.title}
          </h2>
 
          {article.excerpt && (
            <p className="text-gray-500 text-sm line-clamp-3 flex-1">
              {article.excerpt}
            </p>
          )}
 
          {/* معلومات المؤلف والتاريخ */}
          <div className="flex items-center gap-3 mt-4 pt-4 border-t border-gray-100">
            {article.author?.avatar && (
              <Image
                src={getStrapiImageUrl(article.author.avatar, "thumbnail")}
                alt={article.author.name}
                width={32}
                height={32}
                className="rounded-full object-cover"
              />
            )}
            <div className="flex-1 min-w-0">
              {article.author && (
                <p className="text-sm font-medium text-gray-900 truncate">
                  {article.author.name}
                </p>
              )}
              {publishDate && (
                <p className="text-xs text-gray-400">{publishDate}</p>
              )}
            </div>
          </div>
        </div>
      </article>
    </Link>
  );
}

import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "http",
        hostname: "localhost",
        port: "1337",
        pathname: "/uploads/**",
      },
      {
        protocol: "https",
        hostname: "your-strapi-domain.com",
        pathname: "/uploads/**",
      },
    ],
  },
};
 
export default nextConfig;

import Image from "next/image";
import type { StrapiBlock, StrapiImage } from "@/lib/strapi";
import { getStrapiImageUrl } from "@/lib/strapi";
 
interface BlocksRendererProps {
  blocks: StrapiBlock[];
}
 
interface TextChild {
  type: string;
  text?: string;
  bold?: boolean;
  italic?: boolean;
  underline?: boolean;
  strikethrough?: boolean;
  code?: boolean;
  url?: string;
  children?: TextChild[];
}
 
function renderTextChildren(children: TextChild[]): React.ReactNode {
  return children.map((child, index) => {
    if (child.type === "link") {
      return (
        <a
          key={index}
          href={child.url}
          className="text-blue-600 hover:underline"
          target="_blank"
          rel="noopener noreferrer"
        >
          {child.children && renderTextChildren(child.children)}
        </a>
      );
    }
 
    let text: React.ReactNode = child.text || "";
 
    if (child.bold) text = <strong key={index}>{text}</strong>;
    if (child.italic) text = <em key={index}>{text}</em>;
    if (child.underline) text = <u key={index}>{text}</u>;
    if (child.strikethrough) text = <s key={index}>{text}</s>;
    if (child.code) text = <code key={index} className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono">{text}</code>;
 
    return <span key={index}>{text}</span>;
  });
}
 
export function BlocksRenderer({ blocks }: BlocksRendererProps) {
  return (
    <div className="prose prose-lg max-w-none rtl">
      {blocks.map((block, index) => {
        switch (block.type) {
          case "paragraph":
            return (
              <p key={index}>
                {block.children && renderTextChildren(block.children as TextChild[])}
              </p>
            );
 
          case "heading":
            const level = block.level || 2;
            const HeadingTag = `h${level}` as keyof JSX.IntrinsicElements;
            return (
              <HeadingTag key={index}>
                {block.children && renderTextChildren(block.children as TextChild[])}
              </HeadingTag>
            );
 
          case "list":
            const ListTag = (block as { format?: string }).format === "ordered" ? "ol" : "ul";
            return (
              <ListTag key={index}>
                {block.children?.map((item, itemIndex) => (
                  <li key={itemIndex}>
                    {(item as TextChild).children && renderTextChildren((item as TextChild).children || [])}
                  </li>
                ))}
              </ListTag>
            );
 
          case "quote":
            return (
              <blockquote key={index} className="border-r-4 border-blue-500 pr-4 my-4 italic text-gray-700">
                {block.children && renderTextChildren(block.children as TextChild[])}
              </blockquote>
            );
 
          case "code":
            return (
              <pre key={index} className="bg-gray-900 text-gray-100 rounded-lg p-4 overflow-x-auto">
                <code className="text-sm font-mono">
                  {block.children && renderTextChildren(block.children as TextChild[])}
                </code>
              </pre>
            );
 
          case "image":
            if (!block.image) return null;
            const imgUrl = getStrapiImageUrl(block.image as StrapiImage, "large");
            return (
              <figure key={index} className="my-6">
                <div className="relative w-full aspect-video rounded-lg overflow-hidden">
                  <Image
                    src={imgUrl}
                    alt={(block.image as StrapiImage).alternativeText || ""}
                    fill
                    className="object-cover"
                    sizes="(max-width: 768px) 100vw, 800px"
                  />
                </div>
                {(block.image as StrapiImage).alternativeText && (
                  <figcaption className="text-center text-sm text-gray-500 mt-2">
                    {(block.image as StrapiImage).alternativeText}
                  </figcaption>
                )}
              </figure>
            );
 
          default:
            return null;
        }
      })}
    </div>
  );
}

import { notFound } from "next/navigation";
import Image from "next/image";
import type { Metadata } from "next";
import {
  getArticleBySlug,
  getAllArticleSlugs,
  getStrapiImageUrl,
} from "@/lib/strapi";
import { BlocksRenderer } from "@/components/BlocksRenderer";
 
interface ArticlePageProps {
  params: Promise<{ slug: string }>;
}
 
// توليد الـ metadata ديناميكيًا لكل مقال
export async function generateMetadata({ params }: ArticlePageProps): Promise<Metadata> {
  const { slug } = await params;
  const article = await getArticleBySlug(slug);
 
  if (!article) {
    return { title: "المقال غير موجود" };
  }
 
  return {
    title: article.title,
    description: article.excerpt || undefined,
    openGraph: {
      title: article.title,
      description: article.excerpt || undefined,
      images: article.cover
        ? [getStrapiImageUrl(article.cover, "large")]
        : [],
      type: "article",
      publishedTime: article.publishedAt || undefined,
    },
  };
}
 
// توليد المسارات الستاتيكية مسبقًا
export async function generateStaticParams() {
  const slugs = await getAllArticleSlugs();
  return slugs.map((slug) => ({ slug }));
}
 
export default async function ArticlePage({ params }: ArticlePageProps) {
  const { slug } = await params;
  const article = await getArticleBySlug(slug);
 
  if (!article) {
    notFound();
  }
 
  const coverUrl = getStrapiImageUrl(article.cover, "large");
  const publishDate = article.publishedAt
    ? new Date(article.publishedAt).toLocaleDateString("ar-TN", {
        year: "numeric",
        month: "long",
        day: "numeric",
      })
    : null;
 
  return (
    <main className="max-w-3xl mx-auto px-4 py-8">
      {/* الفئة */}
      {article.category && (
        <div className="mb-4">
          <span className="text-sm font-semibold text-blue-600 uppercase tracking-wider">
            {article.category.name}
          </span>
        </div>
      )}
 
      {/* العنوان */}
      <h1 className="text-4xl font-bold text-gray-900 mb-4 leading-tight">
        {article.title}
      </h1>
 
      {/* المقتطف */}
      {article.excerpt && (
        <p className="text-xl text-gray-600 mb-6 leading-relaxed">
          {article.excerpt}
        </p>
      )}
 
      {/* معلومات المؤلف */}
      <div className="flex items-center gap-4 mb-8 pb-8 border-b border-gray-200">
        {article.author?.avatar && (
          <Image
            src={getStrapiImageUrl(article.author.avatar, "thumbnail")}
            alt={article.author.name}
            width={48}
            height={48}
            className="rounded-full object-cover"
          />
        )}
        <div>
          {article.author && (
            <p className="font-semibold text-gray-900">{article.author.name}</p>
          )}
          {publishDate && (
            <p className="text-sm text-gray-500">{publishDate}</p>
          )}
        </div>
      </div>
 
      {/* صورة الغلاف */}
      {article.cover && (
        <div className="relative aspect-video rounded-xl overflow-hidden mb-8">
          <Image
            src={coverUrl}
            alt={article.cover.alternativeText || article.title}
            fill
            priority
            className="object-cover"
            sizes="(max-width: 768px) 100vw, 800px"
          />
        </div>
      )}
 
      {/* محتوى المقال */}
      {article.content && (
        <BlocksRenderer blocks={article.content} />
      )}
    </main>
  );
}

import { notFound } from "next/navigation";
import type { Metadata } from "next";
import {
  getArticles,
  getCategoryBySlug,
  getCategories,
} from "@/lib/strapi";
import { ArticleCard } from "@/components/ArticleCard";
 
interface CategoryPageProps {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ page?: string }>;
}
 
export async function generateMetadata({ params }: CategoryPageProps): Promise<Metadata> {
  const { slug } = await params;
  const category = await getCategoryBySlug(slug);
 
  if (!category) return { title: "الفئة غير موجودة" };
 
  return {
    title: `${category.name} — المدونة`,
    description: category.description || `مقالات في فئة ${category.name}`,
  };
}
 
export async function generateStaticParams() {
  const categories = await getCategories();
  return categories.map((cat) => ({ slug: cat.slug }));
}
 
export default async function CategoryPage({ params, searchParams }: CategoryPageProps) {
  const { slug } = await params;
  const resolvedSearch = await searchParams;
  const page = Number(resolvedSearch.page) || 1;
 
  const [category, articlesResponse] = await Promise.all([
    getCategoryBySlug(slug),
    getArticles({ categorySlug: slug, page, pageSize: 9 }),
  ]);
 
  if (!category) notFound();
 
  const { data: articles, meta } = articlesResponse;
 
  return (
    <main className="max-w-6xl mx-auto px-4 py-8">
      <div className="mb-8">
        <h1 className="text-4xl font-bold mb-2">{category.name}</h1>
        {category.description && (
          <p className="text-gray-600">{category.description}</p>
        )}
        <p className="text-sm text-gray-400 mt-2">
          {meta.pagination?.total} مقالة
        </p>
      </div>
 
      {articles.length === 0 ? (
        <p className="text-center py-16 text-gray-500">لا توجد مقالات بعد</p>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {articles.map((article) => (
            <ArticleCard key={article.id} article={article} />
          ))}
        </div>
      )}
    </main>
  );
}

import { draftMode } from "next/headers";
import { redirect } from "next/navigation";
import type { NextRequest } from "next/server";
 
const PREVIEW_SECRET = process.env.PREVIEW_SECRET;
 
export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const secret = searchParams.get("secret");
  const slug = searchParams.get("slug");
  const type = searchParams.get("type") || "articles";
 
  // التحقق من السر
  if (!PREVIEW_SECRET || secret !== PREVIEW_SECRET) {
    return new Response("رمز معاينة خاطئ", { status: 401 });
  }
 
  if (!slug) {
    return new Response("معامل slug مفقود", { status: 400 });
  }
 
  const draft = await draftMode();
  draft.enable();
 
  // إعادة التوجيه إلى الصفحة المطلوبة
  redirect(`/${type}/${slug}`);
}
 
// إيقاف تشغيل وضع المعاينة
export async function DELETE() {
  const draft = await draftMode();
  draft.disable();
  return new Response("تم إيقاف وضع المعاينة");
}

import { draftMode } from "next/headers";
 
export default async function ArticlePage({ params }: ArticlePageProps) {
  const { slug } = await params;
  const draft = await draftMode();
 
  // جلب المسودة إذا كنا في وضع المعاينة
  const article = await getArticleBySlug(slug, {
    preview: draft.isEnabled,
  });
 
  if (!article) notFound();
 
  return (
    <main>
      {draft.isEnabled && (
        <div className="bg-yellow-100 border border-yellow-300 text-yellow-800 px-4 py-2 text-sm text-center">
          وضع المعاينة مفعّل — هذا المحتوى غير منشور
          <a href="/api/preview" className="mr-4 underline">إيقاف المعاينة</a>
        </div>
      )}
      {/* باقي محتوى الصفحة */}
    </main>
  );
}

PREVIEW_SECRET=your_random_secret_here_change_in_production

// في src/lib/strapi.ts — تحديث دالة getArticles
export async function getArticles(params?: {
  page?: number;
  pageSize?: number;
  categorySlug?: string;
  locale?: string; // "en" | "ar" | "fr"
}): Promise<StrapiResponse<StrapiArticle[]>> {
  const queryParams: Record<string, unknown> = {
    ...ARTICLE_POPULATE,
    sort: ["publishedAt:desc"],
    pagination: {
      page: params?.page || 1,
      pageSize: params?.pageSize || 10,
    },
    locale: params?.locale || "en",
  };
 
  if (params?.categorySlug) {
    queryParams.filters = {
      category: { slug: { $eq: params.categorySlug } },
    };
  }
 
  return strapiRequest<StrapiArticle[]>("/articles", queryParams);
}

// src/app/[locale]/page.tsx
interface LocalizedHomeProps {
  params: Promise<{ locale: string }>;
}
 
export default async function LocalizedHome({ params }: LocalizedHomeProps) {
  const { locale } = await params;
  const articlesResponse = await getArticles({ locale });
  // ...
}
 
// src/app/[locale]/layout.tsx
export default async function LocaleLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const dir = locale === "ar" ? "rtl" : "ltr";
 
  return (
    <html lang={locale} dir={dir}>
      <body>{children}</body>
    </html>
  );
}

import type { ImageLoaderProps } from "next/image";
 
const STRAPI_URL = process.env.NEXT_PUBLIC_STRAPI_URL || "http://localhost:1337";
 
export default function strapiLoader({ src, width, quality }: ImageLoaderProps): string {
  // إذا كان الـ URL مطلقًا بالفعل، أعده كما هو
  if (src.startsWith("http")) return src;
 
  // أضف الـ base URL لـ Strapi
  return `${STRAPI_URL}${src}`;
}

import Image from "next/image";
import strapiLoader from "@/lib/image-loader";
 
// في المكوّن
<Image
  loader={strapiLoader}
  src={article.cover.url}
  alt={article.cover.alternativeText || article.title}
  width={article.cover.width}
  height={article.cover.height}
  className="object-cover rounded-lg"
  priority={false}
  placeholder="blur"
  blurDataURL="data:image/svg+xml;base64,..."
/>

// في src/lib/strapi.ts
export function getBlurDataUrl(width = 8, height = 5): string {
  // placeholder بسيط بتدرج رمادي
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">
    <filter id="b"><feGaussianBlur stdDeviation="1"/></filter>
    <rect width="${width}" height="${height}" fill="#e5e7eb" filter="url(#b)"/>
  </svg>`;
 
  const base64 = Buffer.from(svg).toString("base64");
  return `data:image/svg+xml;base64,${base64}`;
}

# تثبيت Railway CLI
npm install -g @railway/cli
 
# تسجيل الدخول
railway login
 
# إنشاء مشروع جديد في مجلد Strapi
cd my-blog-cms
railway init
 
# إضافة قاعدة بيانات PostgreSQL
railway add postgresql
 
# النشر
railway up

NODE_ENV=production
DATABASE_URL=${{PostgreSQL.DATABASE_URL}}
APP_KEYS=your_app_key_1,your_app_key_2
API_TOKEN_SALT=your_api_token_salt
ADMIN_JWT_SECRET=your_admin_jwt_secret
TRANSFER_TOKEN_SALT=your_transfer_token_salt
JWT_SECRET=your_jwt_secret

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

# تثبيت Vercel CLI
npm install -g vercel
 
# في مجلد Next.js
cd my-blog-frontend
vercel
 
# أجب على الأسئلة وانشر

NEXT_PUBLIC_STRAPI_URL=https://your-strapi-app.railway.app
STRAPI_API_TOKEN=your_production_api_token
PREVIEW_SECRET=your_secure_preview_secret

export default [
  "strapi::logger",
  "strapi::errors",
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": ["'self'", "data:", "blob:", "https:"],
          "media-src": ["'self'", "data:", "blob:", "https:"],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  {
    name: "strapi::cors",
    config: {
      origin: [
        "http://localhost:3000",
        "https://your-nextjs-app.vercel.app",
      ],
      methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"],
      headers: ["Content-Type", "Authorization", "Origin", "Accept"],
    },
  },
  "strapi::poweredBy",
  "strapi::query",
  "strapi::body",
  "strapi::session",
  "strapi::favicon",
  "strapi::public",
];

# تأكد أن Strapi يعمل
curl http://localhost:1337/api/articles
 
# تأكد من وجود الملف
cat .env.local

// خاطئ — يُعيد البيانات بدون العلاقات
const response = await strapiRequest("/articles");
 
// صحيح
const response = await strapiRequest("/articles", {
  populate: { author: true, category: true, cover: true },
});

// في page.tsx أو route.ts
export const revalidate = 3600; // إعادة التحقق كل ساعة
 
// أو للطلبات الفردية
const response = await fetch(url, {
  next: { revalidate: 3600 },
});

cd my-blog-cms
npm install @strapi/plugin-graphql

export default {
  graphql: {
    config: {
      endpoint: "/graphql",
      shadowCRUD: true,
      playgroundAlways: false,
    },
  },
};

// src/app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from "next/cache";
import type { NextRequest } from "next/server";
 
export async function POST(request: NextRequest) {
  const secret = request.headers.get("x-revalidate-secret");
 
  if (secret !== process.env.REVALIDATE_SECRET) {
    return new Response("غير مصرح", { status: 401 });
  }
 
  const body = await request.json();
 
  // إعادة التحقق بناءً على نوع المحتوى
  if (body.model === "article") {
    revalidatePath("/");
    revalidatePath("/articles/[slug]", "page");
  }
 
  if (body.model === "category") {
    revalidatePath("/categories/[slug]", "page");
  }
 
  return new Response("تم التحديث بنجاح");
}

// في src/lib/strapi.ts
export async function searchArticles(query: string): Promise<StrapiArticle[]> {
  const response = await strapiRequest<StrapiArticle[]>("/articles", {
    ...ARTICLE_POPULATE,
    filters: {
      $or: [
        { title: { $containsi: query } },
        { excerpt: { $containsi: query } },
      ],
    },
    pagination: { pageSize: 10 },
  });
  return response.data;
}

// src/app/feed.xml/route.ts
import { getArticles } from "@/lib/strapi";
 
export async function GET() {
  const { data: articles } = await getArticles({ pageSize: 20 });
  const SITE_URL = "https://your-domain.com";
 
  const rss = `<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>مدونتي</title>
    <link>${SITE_URL}</link>
    <description>آخر المقالات التقنية</description>
    ${articles
      .map(
        (article) => `
    <item>
      <title>${article.title}</title>
      <link>${SITE_URL}/articles/${article.slug}</link>
      <description>${article.excerpt || ""}</description>
      <pubDate>${new Date(article.publishedAt || article.createdAt).toUTCString()}</pubDate>
    </item>`
      )
      .join("")}
  </channel>
</rss>`;
 
  return new Response(rss, {
    headers: { "Content-Type": "application/rss+xml; charset=utf-8" },
  });
}