بناء أول مدونة لك باستخدام Next.js 16 و App Router و MDX

أولاً، تأكد من أن لديك Node.js 18.18 أو أحدث. افتح الطرفية:

npx create-next-app@latest neowhisper-blog

اختر هذه الخيارات عند المطالبة:

• TypeScript? Yes (دائماً)
• Tailwind CSS? Yes (معياري في 2026)
• App Router? Yes
• Import Alias? Yes (@/*)

نريد بساطة Markdown مع قوة React. ثبّت حزم MDX:

npm install @next/mdx @mdx-js/loader @mdx-js/react gray-matter date-fns
npm install -D @types/mdx

ثم قم بتهيئة next.config.js:

import createMDX from "@next/mdx";

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
};

const withMDX = createMDX({
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
});

export default withMDX(nextConfig);

وأنشئ mdx-components.tsx في المجلد الرئيسي:

import type { MDXComponents } from "mdx/types";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    h1: ({ children }) => (
      <h1 className="text-4xl font-bold mb-4">{children}</h1>
    ),
    h2: ({ children }) => (
      <h2 =>{children}
    ),
    :  (
      
    ),
    ...components,
  };
}

حافظ على نظافة الكود. خزن تدويناتك في src/content/posts.

src/
├── app/              # المسارات
├── components/       # مكونات الواجهة
├── content/          # ملفات MDX
│   └── posts/
│       └── first-post.mdx
└── lib/              # الأدوات المساعدة
    └── posts.ts

أنشئ تدوينتك الأولى: src/content/posts/first-post.mdx:

---
title: "تدوينتي الأولى"
date: "2026-01-13"
excerpt: "أهلاً بالعالم!"
coverImage: "/images/first-post.png"
---

# أهلاً بالعالم

هذه تدوينتي الأولى.

أنشئ src/lib/posts.ts لقراءة ملفاتك. في App Router، يمكنك جلب البيانات مباشرة—لا حاجة لحالة معقدة.

import fs from "fs";
import path from "path";
import matter from "gray-matter";

const postsDirectory = path.join(process.cwd(), "src/content/posts");

export type Post = {
  slug: string;
  title: string;
  date: string;
  excerpt: string;
  coverImage: string;
  content: string;
};

export async function getAllPosts(): Promise<Post[]> {
  const fileNames = fs.readdirSync(postsDirectory);
  const allPostsData = fileNames
    .filter((fileName) => fileName.endsWith(".mdx"))
    .map((fileName) => {
      const slug = fileName.replace(, );
       fullPath = path.(postsDirectory, fileName);
       fileContents = fs.(fullPath, );
       { data, content } = (fileContents);

       {
        slug,
        content,
        : data.,
        : data.,
        : data.,
        : data.,
      }  ;
    });

   allPostsData.( (a. < b. ?  : -));
}

   (): < | > {
   {
     fullPath = path.(postsDirectory, );
     fileContents = fs.(fullPath, );
     { data, content } = (fileContents);

     {
      slug,
      content,
      : data.,
      : data.,
      : data.,
      : data.,
    }  ;
  }  {
     ;
  }
}

في src/app/page.tsx، اجلب تدويناتك واعرضها:

import { getAllPosts } from "@/lib/posts";
import ArticleCard from "@/components/ArticleCard";

export default async function Home() {
  const posts = await getAllPosts();

  return (
    <main className="container mx-auto px-4 py-12">
      <h1 className="text-4xl font-bold mb-8">آخر الأفكار</h1>
      <div className="grid md:grid-cols-2 gap-8">
        {posts.map((post) => (
          <ArticleCard key={post.slug} post={post} />
        ))}
      </div>
    </main>
  );
}

للتدوينات الفردية (src/app/blog/[slug]/page.tsx)، استخدم generateStaticParams لتوليدها بشكل ثابت عند البناء:

import { getPostBySlug, getAllPosts } from "@/lib/posts";
import { notFound } from ;
 {  }  ;

   () {
   posts =  ();
   posts.( ({ : post. }));
}

   () {
   post =  (params.);
   (!post)  { :  };
   { : post., : post. };
}

    () {
   post =  (params.);
   (!post) ();

   (
    
  );
}