راه‌اندازی Headless WordPress با Next.js برای عملکرد بی‌نقص — راهنمای جامع ۲۰۲۵

---

مقدمه راه‌اندازی Headless WordPress با Next.js

در دنیای امروز، کارایی و سرعت بارگذاری سایت به یکی از مهم‌ ترین فاکتورهای تجربه کاربری و سئو تبدیل شده است. معماری Headless WordPress با جدا کردن بخش محتوا (Back-End) از بخش نمایش (Front-End) و استفاده از فریم‌ ورک‌ های مدرن جاوا اسکریپت، امکان دستیابی به عملکرد فوق‌ العاده و واکنش‌ گرا را فراهم می‌کند. در این مقاله قدم‌ به‌ قدم یاد می‌گیریم چگونه با Next.js یک رابط کاربری سریع و امن برای سایت وردپرسی خود بسازیم.

---

چرا Headless WordPress؟

• سرعت بارگذاری بالا: با رندر سمت سرور (SSR) و تولید ایستا (SSG) توسط Next.js، صفحات شما در کمتر از ثانیه به کاربر نمایش داده می‌شوند.
• امنیت بهتر: در این معماری، لایه نمایش کاملاً از وردپرس جداست و حملات معمول CMS به فریم‌ ورک فرانت‌اند نمی‌رسد.
• انعطاف‌پذیری در توسعه: هر فریم‌ورکی—وب یا موبایل—می‌تواند با استفاده از API وردپرس به محتوا دسترسی داشته باشد.

---

پیش‌نیازها

۱. وردپرس ۵٫۵+ با دسترسی به REST API (به‌طور پیش‌فرض فعال است).
۲. Node.js 14+ و npm یا Yarn روی سیستم.
۳. حساب کاربری در پلتفرم میزبانی (Vercel، Netlify، یا هر سرور Node.js).

---

قدم ۱: آماده‌سازی وردپرس به‌عنوان یک Headless CMS

1. ویژگی “Permalink” را روی ساختار دلخواه (مثلاً /%postname%/) تنظیم کنید.
2. افزونه‌ های مفید:
   • WPGraphQL (اگر می‌خواهید از GraphQL استفاده کنید)
   • Advanced Custom Fields (ACF) برای فیلدهای سفارشی
3. تست API:
   • بررسی endpoint REST: bashCopyEdithttps://your-domain.com/wp-json/wp/v2/posts
   • بررسی GraphQL Playground (در /graphql) اگر افزونه فعال باشد.

---

قدم ۲: ایجاد پروژه Next.js

1. از طریق ترمینال پروژه جدید بسازید: bashCopyEditnpx create-next-app@latest headless-farosia cd headless-farosia
2. بسته‌های لازم را نصب کنید: bashCopyEditnpm install axios # یا در صورت استفاده از GraphQL: npm install @apollo/client graphql
3. فایل‌ های پایه‌ی پوشه pages/ را آماده کنید:
   • index.js برای صفحه اصلی
   • [slug].js در پوشه pages/posts/ برای صفحات تک‌ نوشته

---

قدم ۳: واکشی داده‌ها با REST API

در pages/index.js:

jsCopyEditimport axios from 'axios';
import Link from 'next/link';

export async function getStaticProps() {
  const res = await axios.get('https://your-domain.com/wp-json/wp/v2/posts');
  return { props: { posts: res.data } };
}

export default function Home({ posts }) {
  return (
    <main>
      <h1>آخرین مطالب</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <Link href={`/posts/${post.slug}`}>
              <a>{post.title.rendered}</a>
            </Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

• getStaticProps به صورت ایستا محتوا را واکشی می‌کند.
• با به‌روزرسانی مداوم، می‌توانید revalidate اضافه کنید تا صفحات پس از مدت معینی بازسازی شوند.

---

قدم ۴: تنظیم صفحات تک‌نوشته

فایل pages/posts/[slug].js:

jsCopyEditimport axios from 'axios';

export async function getStaticPaths() {
  const res = await axios.get('https://your-domain.com/wp-json/wp/v2/posts');
  const paths = res.data.map(post => ({ params: { slug: post.slug } }));
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const res = await axios.get(`https://your-domain.com/wp-json/wp/v2/posts?slug=${params.slug}`);
  const post = res.data[0];
  return { props: { post } };
}

export default function Post({ post }) {
  return (
    <article>
      <h1 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
    </article>
  );
}

• getStaticPaths مسیر های ممکن را از وردپرس دریافت می‌کند.
• dangerouslySetInnerHTML برای رندر HTML تولیدشده در وردپرس استفاده می‌شود.

---

قدم ۵: بهینه‌سازی و استقرار

1. Image Optimization: از تگ <Image> خود Next.js برای لود بهینه تصاویر استفاده کنید.
2. Cache Headers: در صورت استقرار روی Vercel/Netlify، تنظیمات کش را برای فایل‌ های استاتیک انجام دهید.
3. استقرار نهایی:
   • روی Vercel تنها با یک git push پروژه شما آنلاین می‌شود.
   • روی Netlify با اتصال مخزن GitHub فعال می‌شود.

---

نتیجه‌گیری

با معماری Headless WordPress و Next.js شما می‌توانید یک سایت فوق‌ العاده سریع، ایمن و مقیاس‌ پذیر داشته باشید. این ترکیب نه‌ تنها تجربه کاربری را بهبود می‌دهد، بلکه به‌ راحتی در برابر تغییرات آینده و نیازهای تیم توسعه سازگار است.
اکنون زمان آن رسیده که این الگو را در پروژه‌ی خود پیاده کنید و از عملکرد بی‌نقص آن لذت ببرید!