آموزش ساخت یک Headless CMS سبک و Full-Stack با استفاده از Next.js، Contentful و GraphQL - آخرین آپدیت

مقدمه Introduction

• ساختار این دوره آموزشی How this course is structured

• پیش‌نیازهای مورد نیاز What you should know

• معرفی سایت Headless CMS فول‌استک شما Introducing your full-stack headless CMS site

1. اصلا Headless CMS چیست؟ 1. What's a Headless CMS Anyway?

• راه‌اندازی حساب رایگان در Contentful Set up your free tier Contentful account

• سیستم مدیریت محتوا (CMS) چیست؟ What is a CMS?

• مزایای استفاده از CMS Benefits of using a CMS

• توضیح معماری Headless Headless architecture explained

2. Next.js و رندرینگ سمت سرور (SSR) 2. Next.js and Server-Side Rendering

• ترکیب Next.js و معماری Headless برای توسعه بهینه Next.js and headless architecture for full-stack happiness

• راه‌اندازی اپلیکیشن Next.js و استقرار در Vercel Set up the Next.js app and deploying to Vercel

• تست اتصال API Test your API connection

3. ایجاد و کوئری محتوا در Contentful برای فرانت-اند 3. Creating and Querying Contentful Content for Your Front End

• چالش: درخواست محتوا از API سرویس Contentful Challenge: Request content entry from the Contentful API

• راه‌اندازی سایت پیش‌نمایش (Preview) در Contentful Set up a Contentful preview site

• ایجاد اولین ورودی محتوا Create your first content entry

• راه‌حل: درخواست محتوا از API سرویس Contentful Solution: Request content entry from the Contentful API

• آشنایی با مفاهیم GraphQL Familiarize yourself with GraphQL

4. اتصال سریع: متصل کردن API به فرانت-اند 4. Plug 'n Play: Plug API into Your Front End

• راه‌حل: افزودن استایل به بخش فرانت-اند Solution: Add styling to your front end

• ترفندهای استایل‌دهی: تبدیل داده‌های JSON به محتوای استایل شده Styling hacks: JSON payloads to styled content

• چالش: افزودن استایل به بخش فرانت-اند Challenge: Add styling to your front end

5. معرفی پروژه نهایی 5. Final Project Introduction

• هدف از پروژه نهایی Purpose of the final project

• دستورالعمل‌های ساخت MVP برای پروژه نهایی Final project MVP guidelines

جمع‌بندی Conclusion

• گام‌های بعدی: اجرای پروژه نهایی Next steps: Final project