فرانت اند NextJS ، بک اند ووکامرس

مقدمه

در حال حاضر اکثر وبسایت ها با وردپرس و وکاممرس راه اندازی شده، اما خب همه خوب میدونیم سرعت NextJs خیلی بالاتره، تبدیل WooCommerce به حالت Headless و ترکیب آن با یک فریمورک فرانت-اند مانند Next.js می‌تواند تجربه کاربری را سریعتر، بروزتر و مدرن‌تر کند.

در تنظیمات حالت Headless، WooCommerce فقط به عنوان بک-اند عمل می‌کند و Next.js به عنوان فرانت-اند با WooCommerce از طریق API ارتباط برقرار می‌کند. این آموزش فرض می‌کند که شما دارای دانش پایه‌ای در راه‌اندازی سایت وردپرس/ووکامرس و همچنین محیط توسعه (لوکال هاست یا سرور آنلاین) هستید.

هدف ایجاد یک برنامه Next.js است که از طریق WPGraphQL و افزونه GraphQL ووکامرس با یک فروشگاه WooCommerce ارتباط برقرار کند.

مرحله ۱: راه‌اندازی ووکامرس

نصب و راه‌اندازی وردپرس

اگر هنوز این کار را انجام نداده‌اید، وردپرس را بر روی لوکال هاست یا سرور آنلاین نصب کنید

نصب و راه اندازی ووکامرس

به بخش پلاگین‌ها > افزودن جدید در داشبورد وردپرس بروید و جستجوی “ووکامرس” را انجام داده و آن را نصب و فعال کنید.

پیوند‌های یکتا را فعال کنید.

به تنظیمات > پیوندهای یکتا بروید و هر چیزی به جز “ساده” را انتخاب کنید. این کار باعث می‌شود نقاط اتصال API به درستی کار کند.

مرحله ۲: اضافه‌کردن پشتیبانی از GraphQL

افزونه WPGraphQL را نصب کنید.

در داشبورد وردپرس به بخش پلاگین ها > افزودن جدید رفته، سپس پلاگین WPGraphQL را جستجو کنید و آن را نصب و فعال کنید.

افزونه WPGraphql Woocommerce را نصب کنید.

این افزونه با اضافه کردن داده‌های ووکامرس به طرح کلی افزونه پیوند می‌دهد.

شما می‌توانید این افزونه را در گیت‌هاب پیدا کنید: https://github.com/wp-graphql/wp-graphql-woocommerce.

گیت‌هاب را کلون کرده یا آن را دانلود کنید، سپس به همان صورتی که با هر افزونه وردپرسی کار می‌کنید آن را نصب و فعال کنید.

مرحله ۳: ایجاد برنامه Next.js

اگر هنوز Next.js و نرم‌افزار CLI آن را نصب نکرده‌اید، آنها را نصب کنید:

پروژه جدید NextJs ایجاد کنید

مرحله ۴: دریافت اطلاعات از ووکامرس

کتابخانه های GraphQL client را نصب کنید:

اتصال Next JS به ووکامرس

با استفاده از GraphQL، مشتری برای بازیابی داده از ووکامرس ایجاد کنید. این کار را در یک فایل جدید مانند apollo-client.js انجام دهید:

YOUR_WORDPRESS_URL را با آدرس وبسایت ووردپرس / ووکامرس خود جایگزین کنید.

دریافت و نمایش محصولات در صفحه NextJS

در یکی از صفحات Next.js، مانند pages/products.js، می توانید محصولات را دریافت و نمایش دهید:

مرحله ۵: توسعه و طراحی تکمیلی

پس از انجام آزمون و خطا ها میتوانید سرانجام طبق سلیقه و کارایی مورد نیازتان فرانت اند خود را با NextJs توسعه دهید و با وردپرس/ووکامرس دیگر نگران کدنویسی پایه بک اند خود نباشید.

مرحله ۶: انتشار در سرور آنلاین

شما می توانید برنامه Next.js خود را با استفاده از پلتفرم هایی مانند Vercel، Netlify یا هر محیط Node.js دیگری مانند هاست و سرور منتشر کنید.

توجه: امنیت بسیار مهم است. به خصوص در صورت مشتریانی که با داده ها یا تراکنش های مشتری ارتباط برقرار می کنند، اطمینان حاصل کنید که با اطلاعات به صورت امن برخورد می کنید. حتماً مطالعه مستندات و دستورالعمل های رسمی برای ووکامرس، WPGraphQL و Next.js را مطالعه کنید.