طبق W3Techs، وردپرس بیش از 20 سال است که وجود دارد و 42.7٪ از تمام وب سایت های موجود در اینترنت را تامین می کند. همچنین 62.5 درصد از سهم بازار سیستم های مدیریت محتوا (CMS) در پشت وب سایت ها را در اختیار دارد.
امروزه، زبان‌ها و چارچوب‌های برنامه‌نویسی زیادی برای ساخت وب‌سایت‌های کاربرپسند و با کارایی بالا که بسیار سریع‌تر از وردپرس هستند، بدون توجه به بهینه‌سازی در داشبورد وردپرس خود در دسترس هستند. یک مثال Next.js است، یک فریم ورک محبوب React.
این راهنما نحوه استفاده از وردپرس را به عنوان یک CMS بدون هد، نشان می دهد که داده ها را برای برنامه Next.js شما فراهم می کند. همچنین توضیح می دهد که کد Next.js شما را به عنوان یک سایت ثابت در سرویس میزبانی سایت استاتیک رایگان Kinsta است.
آشنایی با وردپرس بدون سر
وردپرس Headless به استفاده از وردپرس صرفاً برای قابلیت های Backend آن – مدیریت و ذخیره محتوا – و استفاده از یک سیستم جداگانه مانند Next.js برای ارائه frontend اشاره دارد.
این جداسازی به توسعه‌دهندگان اجازه می‌دهد تا از ابزارهای مدیریت محتوای قوی وردپرس استفاده کنند و در عین حال از ویژگی‌های توسعه frontend مدرن، مانند رندر سمت سرور و تولید سایت استاتیک در Next.js بهره‌مند شوند.
آماده سازی سایت وردپرسی شما
قبل از غواصی در توسعه Next.js، سایت وردپرس شما نیاز به کمی آمادگی دارد تا به عنوان یک CMS بدون هد عمل کند.
اگر قبلاً یک سایت وردپرس ندارید، می توانید به راحتی با Kinsta ایجاد کنید. سه روش برای ساخت یک سایت وردپرس با استفاده از Kinsta وجود دارد:
- قبل از انتقال سایت به سرورهای ما، یک سایت در دستگاه محلی خود ایجاد کنید (شاید با استفاده از ابزار DevKinsta ما)
- یک سایت از راه دور با استفاده از داشبورد MyKinsta ایجاد کنید
- یک سایت از راه دور با استفاده از Kinsta API ایجاد کنید
هنگامی که یک سایت وردپرس دارید، دو روش برای واکشی داده‌ها از CMS وردپرس به فریمورک frontend شما وجود دارد: WPGraphQL و REST API.
REST API بازیابی داده ها را در قالب JSON با استفاده از رویکردهای جاوا اسکریپت مانند Fetch API یا کتابخانه Axios تسهیل می کند. REST API از نسخه 4.7 در وردپرس ساخته شده است، به این معنی که برای کار کردن به هیچ افزونه ای نیاز ندارد. اما برای استفاده از WPGraphQL که به شما امکان می دهد با استفاده از Query GraphQL با داده های وردپرس خود تعامل داشته باشید، باید افزونه WPGraphQL را نصب کنید.
بیایید از REST API برای این راهنما استفاده کنیم. برای دریافت اطلاعات وردپرس خود در قالب JSON، ضمیمه کنید /wp-json/wp/v2 به آدرس سایت وردپرس شما:
http://yoursite.com/wp-json/wp/v2اگر JSON API هنگام بازدید فعال نباشد http://yoursite.com/wp-json به طور پیش فرض، می توانید با باز کردن آن را فعال کنید پیوندهای ثابت زیر تنظیمات در داشبورد وردپرس و انتخاب نام پست یا هر مورد دیگری به انتخاب شما به جز جلگه:
این برای سایت‌های وردپرس محلی و عمومی کار می‌کند و برای محتوایی که شامل پست‌ها، صفحات، نظرات و رسانه‌ها می‌شود، نقاط پایانی ارائه می‌دهد. راهنمای کامل ما برای REST API را بخوانید تا بیشتر بدانید.
تنظیم محیط Next.js
Next.js به توسعه‌دهندگان کمک می‌کند تا برنامه‌های تحت وب را به آسانی بسازند، عملکرد را افزایش داده و تجربه توسعه را بهینه کنند. یکی از ویژگی های کلیدی آن، مسیریابی مبتنی بر فایل است که ایجاد مسیرها را ساده می کند.
Next.js همچنین به شدت بر عملکرد تمرکز می کند و ویژگی هایی مانند تقسیم خودکار کد را ارائه می دهد که فقط جاوا اسکریپت لازم را برای هر صفحه بارگیری می کند و زمان بارگذاری را به میزان قابل توجهی کاهش می دهد.
برای راه اندازی یک پروژه Next.js، می توانید دستور زیر را اجرا کنید و از پاسخ های پیش فرض آن استفاده کنید:
npx create-next-app@latest nextjs-wp-demoبرای این راهنما، می توانید با دنبال کردن این مراحل، الگوی Git starter ما را بگیرید:
- از مخزن GitHub این پروژه دیدن کنید.
- انتخاب کنید از این قالب استفاده کنید > یک مخزن جدید ایجاد کنید برای کپی کردن کد شروع در یک مخزن در حساب GitHub خود (باکس را علامت بزنید تا شامل تمامی شعب).
- مخزن را به رایانه محلی خود بکشید و با استفاده از دستور به شاخه starter-files بروید:
git checkout starter-files.
- با اجرای دستور، وابستگی های لازم را نصب کنید
npm install.
پس از اتمام نصب، پروژه را بر روی رایانه محلی خود اجرا کنید npm run dev. این باعث می شود که پروژه در http://localhost:3000/ در دسترس باشد.
درک پروژه
App Router در Next.js 13 معرفی شد و جایگزین روتر موجود شد صفحات دایرکتوری برای مسیریابی مسیریابی با App Router همچنین شامل ایجاد پوشه ها در داخل است برنامه فهرست راهنما. سپس، شما یک لانه کنید page.js فایل را در پوشه مناسب برای تعریف مسیر خود قرار دهید.
در این پروژه، برنامه دایرکتوری اصلی است که با آن در تعامل هستید و ساختار فایل زیر را خواهید یافت.
/
|-- /app
|-- /blog
|-- /(postId)
|-- page.js
|-- page.js
|-- globals.css
|-- layout.js
|-- navbar.js
|-- page.jsسه صفحه ایجاد می شود: صفحه اصلی برای نمایش اطلاعات اولیه، صفحه وبلاگ برای نمایش همه پست ها از CMS وردپرس و صفحه پویا ((postId)/page.js) برای ارائه پست های فردی.
شما همچنین متوجه خواهید شد navbar.js جزء، که وارد شده است layout.js فایل برای ایجاد یک طرح برای پروژه.
واکشی داده ها از وردپرس به Next.js
با WordPress REST API، می‌توانید پست‌ها، صفحات و انواع پست سفارشی را با ارسال درخواست‌های HTTP به نقاط پایانی خاص واکشی کنید.
بیایید یک درخواست واکشی در blog/page.js فایلی برای واکشی همه پست ها در CMS وردپرس خود و سپس در نهایت درخواست واکشی هر پست به صورت پویا در blog/(postId)/page.js بر اساس id پارامتر پاس شد
قبل از اینکه این درخواست ها را انجام دهیم، تمرین خوبی است که آدرس API JSON خود را به یک متغیر محیطی اضافه کنید. این رویکرد تضمین می کند که URL پایه API شما به راحتی قابل تنظیم است و در چندین فایل کدگذاری نمی شود.
ایجاد یک env در ریشه پروژه Next.js خود فایل کنید و موارد زیر را اضافه کنید:
NEXT_PUBLIC_WORDPRESS_API_URL=https://yoursite.kinsta.cloud/wp-json/wp/v2اطمینان حاصل کنید که URL را با JSON API سایت خود جایگزین کرده اید. همچنین، اضافه کنید .env به شما .gitignore بنابراین فایل را به ارائه دهنده Git شما ارسال نمی کند.
همه پست ها را از وردپرس به Next.js واکشی کنید
برای واکشی همه پست ها از سایت وردپرس خود، یک تابع ناهمزمان به نام ایجاد کنید getPosts در شما blog/page.js فایل. این تابع از Fetch API برای ارسال درخواست GET به /posts نقطه پایانی وردپرس REST API شما.
async function getPosts() {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
);
const posts = await response.json();
return posts;
}پس از دریافت پاسخ، پاسخ را به JSON تبدیل می کند و آرایه ای از اشیاء پست را می سازد. اینها posts می تواند در برنامه Next.js شما ارائه شود، و فهرستی پویا از پست های وبلاگ که مستقیماً از وردپرس واکشی شده اند را ارائه می دهد.
const BlogPage = async () => {
const posts = await getPosts();
return (
<div className="blog-page">
<h2>All Blog Posts</h2>
<p>All blog posts are fetched from WordPress via the WP REST API.</p>
<div className="posts">
{posts.map((post) => {
return (
<Link href={`/blog/${post.id}`} className="post" key={post.id}>
<h3>{post.title.rendered}</h3>
<p
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
></p>
</Link>
);
})}
</div>
</div>
);
};در جزء صفحه Next.js، تماس بگیرید getPosts به صورت ناهمزمان برای واکشی پست ها. سپس، map بیش از آرایه از posts، رندر کردن هر پست title و excerpt در یک <Link> جزء.
این نه تنها پست‌ها را نمایش می‌دهد، بلکه هر یک را در پیوندی قرار می‌دهد که به نمای دقیق پست هدایت می‌شود. این با استفاده از مسیریابی مبتنی بر فایل Next.js به دست می آید، جایی که شناسه پست برای تولید مسیر URL به صورت پویا استفاده می شود.
واکشی پست های پویا از وردپرس به Next.js
در کد بالا، هر پست در یک پیوند پیچیده شده است که انتظار می رود به کاربران کمک کند تا به یک نمای دقیق از پست حرکت کنند.
برای صفحات پست جداگانه، از مسیریابی پویا در Next.js برای ایجاد صفحه ای استفاده می کنید که یک پست را بر اساس شناسه آن واکشی و نمایش می دهد. یک صفحه پویا (postID)/page.js قبلاً در کد Stater-Files ایجاد شده است.
ایجاد یک getSinglePost تابع، شبیه به getPosts، برای واکشی یک پست با استفاده از شناسه پست ارسال شده به عنوان پارامتر.
async function getSinglePost(postId) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts/${postId}`
);
const post = await response.json();
return post;
}در کامپوننت صفحه پویا، شناسه پست را از پارامترهای URL استخراج می کنید، تماس بگیرید getSinglePost با این شناسه، و محتوای پست را رندر کنید.
const page = async ({ params }) => {
const post = await getSinglePost(params.postId);
// ... the rest of the page code
};سپس می توانید صفحه را با داده های واکشی شده پر کنید:
const page = async ({ params }) => {
const post = await getSinglePost(params.postId);
if (!post) {
return <div>Loading...</div>;
}
return (
<div className="single-blog-page">
<h2>{post.title.rendered}</h2>
<div className="blog-post">
<p> dangerouslySetInnerHTML={{ __html: post.content.rendered }}></p>
</div>
</div>
);
};می توانید به کد کامل در مخزن GitHub ما دسترسی داشته باشید.
استقرار برنامه Next.js خود در Kinsta به صورت رایگان
سرویس میزبانی سایت استاتیک Kinsta امکان میزبانی تا 100 سایت ثابت را برای رایگان.
این سرویس فقط فایل های ثابت را میزبانی می کند. اگر از یک مولد سایت ایستا مانند Next.js استفاده می کنید، می توانید گزینه هایی را پیکربندی کنید که پروژه شما را از GitHub بسازند و فایل های استاتیک را در Kinsta مستقر کنند.
رندر استاتیک در Next.js
برای فعال کردن صادرات استاتیک در Next.js نسخه 13 بالا، آن را تغییر دهید output حالت داخل next.config.js:
const nextConfig = {
output: 'export',
};اکنون، زمانی که پروژه خود را می‌سازید، انتظار می‌رود که Next.js یک تصویر را تولید کند بیرون پوشه ای که حاوی دارایی های HTML، CSS و جاوا اسکریپت برای برنامه شما است.
از نسخه 13، Next.js از شروع به‌عنوان یک سایت ثابت پشتیبانی می‌کند، سپس به‌صورت اختیاری برای استفاده از ویژگی‌هایی که به سرور نیاز دارند، ارتقا می‌یابد. وقتی از ویژگی های سرور استفاده می کنید، ساخت صفحات شما صفحات ایستا تولید نمی کند.
به عنوان مثال، در مسیر پویا، شما این داده ها را به صورت پویا واکشی می کنید. شما باید بتوانید تمام پست ها را به صورت ایستا تولید کنید. این را می توان با استفاده از generateStaticParams تابع.
این تابع در ترکیب با بخش های مسیر پویا برای تولید مسیرها در زمان ساخت به جای درخواست در زمان درخواست استفاده می شود. وقتی می سازی، generateStaticParams قبل از ایجاد طرح‌بندی یا صفحات مربوطه اجرا می‌شود.
که در (postID)/page.js، استفاده کنید generateStaticParams تابع برای دریافت مسیر همه پست ها:
export async function generateStaticParams() {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
);
const posts = await response.json();
return posts.map((post) => ({
postId: post.id.toString(),
}));
}هنگامی که دستور ساخت را اجرا می کنید، پروژه Next.js شما اکنون یک عدد ایجاد می کند بیرون دایرکتوری با فایل های استاتیک
Next.js را در میزبانی استاتیک سایت Kinsta مستقر کنید
کدهای خود را به ارائه دهنده گیت دلخواه خود (Bitbucket، GitHub یا GitLab) فشار دهید. در مرحله بعد، این مراحل را برای استقرار سایت استاتیک Next.js خود در Kinsta دنبال کنید:
- برای مشاهده داشبورد MyKinsta خود وارد شوید یا یک حساب ایجاد کنید.
- Kinsta را با ارائه دهنده Git خود مجاز کنید.
- کلیک سایت های استاتیک در نوار کناری سمت چپ، سپس کلیک کنید اضافه کردن سایت.
- مخزن و شاخه ای که می خواهید از آن مستقر شوید را انتخاب کنید.
- یک نام منحصر به فرد به سایت خود اختصاص دهید.
- تنظیمات ساخت را در قالب زیر اضافه کنید:
- دستور ساخت:
npm run build - نسخه Node:
18.16.0 - دایرکتوری انتشار:
out
- دستور ساخت:
- در نهایت کلیک کنید سایت ایجاد کنید.
و بس! اکنون در عرض چند ثانیه یک سایت مستقر دارید. پیوندی برای دسترسی به نسخه مستقر سایت شما ارائه شده است. در صورت تمایل می توانید بعداً دامنه سفارشی و گواهی SSL خود را اضافه کنید.
به عنوان جایگزینی برای میزبانی سایت استاتیک، می‌توانید سایت استاتیک خود را با سرویس میزبانی برنامه Kinsta گسترش دهید، که انعطاف پذیری میزبانی بیشتر، طیف وسیع‌تری از مزایا، و دسترسی به ویژگی‌های قوی‌تر را فراهم می‌کند – مانند مقیاس‌پذیری، استقرار سفارشی با استفاده از Dockerfile، و تجزیه و تحلیل جامع شامل داده های زمان واقعی و تاریخی. همچنین نیازی به پیکربندی پروژه Next.js برای رندر استاتیک ندارید.
خلاصه
در این مقاله، نحوه استفاده از وردپرس بدون headless را در پروژه Next.js برای واکشی و نمایش پویا پست ها یاد گرفته اید. این رویکرد ادغام یکپارچه محتوای وردپرس را در برنامه های Next.js امکان پذیر می کند و یک تجربه وب مدرن و پویا را ارائه می دهد.
پتانسیل API CMS بدون هد فراتر از فقط پست ها است. امکان بازیابی و مدیریت صفحات، نظرات، رسانه ها و موارد دیگر را فراهم می کند.
علاوه بر این، میزبانی CMS وردپرس خود در کنار فریم ورک‌های فرانت‌اندتان نیازی به دردسر ندارد. با داشبورد MyKinsta Kinsta، به شما یک پلتفرم یکپارچه برای مدیریت آسان وب‌سایت‌ها، برنامه‌ها، پایگاه‌های داده و سایت‌های استاتیک وردپرس ارائه می‌شود.
کینستا
جوئل یک توسعه دهنده Frontend است که در Kinsta به عنوان یک ویرایشگر فنی کار می کند. او یک معلم پرشور با عشق به منبع باز است و بیش از 200 مقاله فنی عمدتاً در مورد جاوا اسکریپت و فریمورک های آن نوشته است.