مرحبًا بك في المدونة — كل ما تحتاجه عن Next.js App Router

"use client";

// app/blog/page.tsx
import type { Post } from "@/types/post";
 
async function getPosts(): Promise<Post[]> {
  const res = await fetch("https://api.example.com/posts", {
    next: { revalidate: 3600 }, // إعادة التحقق كل ساعة
  });
 
  if (!res.ok) throw new Error("فشل جلب المقالات");
  return res.json();
}
 
export default async function BlogPage() {
  const posts = await getPosts();
 
  return (
    <ul className="space-y-4">
      {posts.map((post) => (
        <li key={post.id} className="p-4 border rounded-lg">
          <h2 className="text-xl font-bold">{post.title}</h2>
          <p className="text-neutral-600">{post.description}</p>
        </li>
      ))}
    </ul>
  );
}

app/
├── layout.tsx          ← Layout الجذر (Header + Footer)
├── blog/
│   ├── layout.tsx      ← يضيف Sidebar للمقالات
│   └── [slug]/
│       └── page.tsx

// app/blog/layout.tsx
export default function BlogLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="grid grid-cols-[1fr_250px] gap-8">
      <main>{children}</main>
      <aside>
        {/* قائمة المقالات الجانبية */}
      </aside>
    </div>
  );
}

// app/blog/[slug]/page.tsx
import type { Metadata } from "next";
 
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);
 
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      images: [post.coverImage],
    },
  };
}

# إنشاء مشروع جديد
npx create-next-app@latest my-blog \
  --typescript \
  --tailwind \
  --app \
  --src-dir
 
# الدخول للمجلد والبدء
cd my-blog
npm run dev