آموزش Next.JS با Sanity CMS - برنامه بلاگ بدون سرور (به همراه Vercel)

Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: برنامه وبلاگ خود را با جدیدترین Next.JS & React (بعدی 9.4+، React hooks) بسازید. یاد بگیرید که چگونه از هدلس Sanity CMS استفاده کنید. استفاده از جدیدترین ویژگی های Next/React (getStaticProps، getStaticPaths، getServerSideProps) ایجاد برنامه های وب استاتیکی ایجاد شده استقرار برنامه های بدون سرور یکپارچه سازی Sanity CMS پیش نیازها: مبانی برنامه نویسی و JS مورد نیاز است! دانش اولیه React JS

سلامت عقل چیست؟

Sanity بستری برای محتوای ساختاریافته است. با Sanity می توانید متن، تصاویر و سایر رسانه های خود را با API مدیریت کنید. همچنین می توانید از برنامه تک صفحه ای منبع باز Sanity Studio برای تنظیم یک محیط ویرایشی استفاده کنید که بتوانید به سرعت آن را سفارشی کنید. با Sanity، شما به بسیاری از API ها، کتابخانه ها و ابزارهایی دسترسی دارید که به شما کمک می کند از مزایای در دسترس داشتن تمام محتوای خود به عنوان یک منبع حقیقت استفاده کنید. این مقاله به سرعت شما را با برخی از مفاهیم اصلی آشنا می‌کند و به شما یک شروع می‌دهد.

Next JS چیست؟

بعد، JS چارچوب React است که زیرساخت و تجربه توسعه ساده را برای برنامه‌های رندر سمت سرور (SSR) فراهم می‌کند.

  • یک سیستم مسیریابی مبتنی بر صفحه (با پشتیبانی از مسیرهای پویا)

  • پیش رندر، هر دو تولید استاتیک (SSG) و رندر سمت سرور (SSR) بر اساس هر صفحه پشتیبانی می شوند

درباره پروژه اصلی

ما با یکپارچه سازی یک طرح برنامه کاربردی بی نقصی که برای شما آماده کرده ام، شروع می کنیم. ما آخرین شیوه های React و Next JS را دنبال خواهیم کرد. این بدان معنی است که ما تا حد امکان از عملکردهای قلاب استفاده خواهیم کرد.

پس از ایجاد طرح اولیه و صفحات، ما شروع به تهیه داده های واقعی در Sanity Studio می کنیم. من اصول اولیه سلامت عقل را برای شما توضیح خواهم داد و دو نوع سند - وبلاگ ها و نویسنده ها را آماده خواهیم کرد.

ما فیلدهای مختلفی را برای توصیف داده‌هایمان مشخص می‌کنیم، به عنوان مثال، "Code Blocks"، "Images"، و بسیاری دیگر.

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

بعداً در دوره آموزشی، نحوه اعمال گزینه های مختلف فیلتر کردن در نمای برنامه، صفحه بندی موارد و مدیریت مرتب سازی داده ها را خواهید آموخت. شما یاد خواهید گرفت که چگونه از ارائه دهنده و مصرف کننده/مفهوم استفاده کنید، که ما از آن برای کنترل تم روشن و تاریک برنامه خود استفاده خواهیم کرد.

بعد، در مورد ویژگی Preview صحبت خواهیم کرد. ویژگی پیش‌نمایش به آن امکان می‌دهد پیش‌نویس داده‌های وبلاگ را قبل از انتشار در مرحله تولید نمایش دهد.

ما برنامه خود را در پایان دوره در پلتفرم Vercel مستقر خواهیم کرد. برنامه به صورت ایستا بهینه و فوق العاده سریع خواهد بود.

از وقتی که گذاشتید متشکرم، و امیدوارم شما را در دوره ببینم.


سرفصل ها و درس ها

معرفی Introduction

  • معرفی Introduction

  • نکات دوره Course tips

راه اندازی پروژه Project Setup

  • بخش مقدمه Section Introduction

  • برنامه بعدی را راه اندازی کنید Init Next App

  • اپلیکیشن Sanity Studio Sanity Studio App

  • React Bootstrap Integration React Bootstrap Integration

  • جداسازی Navbar Separation of Navbar

  • مسیر مطلق به فایل ها Absolute path to files

  • صفحه آرایی Page layout

با سلامت عقل شروع کنید Starting with Sanity

  • بخش مقدمه Section Introduction

  • انواع سلامتی Sanity Types

  • مشتری سلامت Sanity client

  • وبلاگ ها را دریافت کنید Get blogs

  • فیلدهای وبلاگ و نمایش وبلاگ ها Blog fields & display blogs

  • در زیر کاپوت Under the hood

  • تاریخ و تصویر Date and image

  • نویسندگان Authors

  • نمایش نویسنده Display author

  • اعتبار سنجی سلامت Sanity validation

  • فونت ها + بهبودهای سبک جزئی Fonts + minor styling improvements

  • لینک و صفحه جزئیات Link and detail page

  • دریافت داده های وبلاگ Get blog data

  • تابع getStaticPaths getStaticPaths function

  • getStaticPaths قسمت 2 getStaticPaths part 2

  • طرح بندی صفحه جزئیات وبلاگ Blog detail page layout

ویژگی های وبلاگ Sanity Sanity Blog Features

  • بخش مقدمه Section Introduction

  • محتوای سلامت و تصویر Sanity content and Image

  • محتوای سلامت و کد Sanity content and Code

  • بسته قفل packageLock

  • مطالب وبلاگ Blog content

  • سبک های کد Code stylings

  • بهبود تصویر Image improvements

  • اطلاعات بیشتر در مورد تصاویر More about images

  • برش تصاویر Cropping of images

  • موقعیت تصویر Image position

  • اعمال موقعیت تصویر Apply image position

مشاهده فهرست وبلاگ و واکشی مشتری Blog List View & Client fetching

  • بخش مقدمه Section Introduction

  • شروع نمای فیلتر Filtering view start

  • فیلتر کردن کار می کند Filtering working

  • فونت عالی Font awesome

  • داده های مورد فهرست List item data

  • استفاده ازSWR useSWR

  • مسیر Api برای دریافت وبلاگ ها Api route to get blogs

  • به روز رسانی Update

  • وبلاگ ها را از api دریافت کنید Get blogs from api

  • مرتب سازی Ordering

صفحه بندی و مرتب سازی تاریخ Pagination & Date Sorting

  • بخش مقدمه Section Introduction

  • swr صفحه بندی swr Pagination

  • دکمه برای بارگذاری Button to load

  • پاس افست Passing offset

  • وبلاگ های بیشتری را واکشی کنید Fetch more blogs

  • واکشی وبلاگ های بیشتر را رفع کنید Fix fetching more blogs

  • نماد فیلتر کردن تاریخ Date filtering icon

  • مرتب سازی بر اساس تاریخ Sorting by date

  • مرتب سازی بر اساس تاریخ را برطرف کنید Fix sorting by date

  • تصویر خالی Blank image

  • آیتم لیست خالی Blank list item

  • لحظه و تصویر جلد Moment and cover image

بازگشت و پیش نمایش + ویژگی تم Fallback & Preview + Theme Feature

  • بخش مقدمه Section Introduction

  • بازگشت به عقب Fallback

  • ارائه دهنده تم Theme provider

  • تم را اعمال کنید Apply theme

  • تعویض کننده Toggler

  • پیش نمایش سلامتی Sanity preview

  • پیش نمایش مسیر api Preview api route

  • دریافت پیش نمایش به صفحه Get preview to page

  • داده های پیش نمایش را دریافت کنید Get preview data

  • خروج از پیش نمایش Exit preview

  • رفع مشکل برای نمایش داده های پیش نمایش Fix issue to display preview data

گسترش Deployment

  • بخش مقدمه Section Introduction

  • استودیو Sanity به Github Sanity studio to Github

  • استقرار سلامت Sanity deployment

  • تست استودیو سلامت عقل Sanity studio testing

  • استقرار وبلاگ Deployment of Blog

  • رفع پیش نمایش در تولید Fixing preview in production

  • تأیید مجدد تغییرات Revalidate Changes

  • اعتبار مجدد ناپایدار Unstable revalidate

  • بهبود استایل Styling Improvements

  • بهبود صفحه بندی Pagination improvements

  • رفع پیش نمایش Preview fix

  • آزمایش کردن Testing

  • پایان دوره End of the course

به روز رسانی ها Updates

  • توجه داشته باشید Note

  • صفحه بندی Pagination

نمایش نظرات

Udemy (یودمی)

یودمی یکی از بزرگ‌ترین پلتفرم‌های آموزشی آنلاین است که به میلیون‌ها کاربر در سراسر جهان امکان دسترسی به دوره‌های متنوع و کاربردی را فراهم می‌کند. این پلتفرم امکان آموزش در زمینه‌های مختلف از فناوری اطلاعات و برنامه‌نویسی گرفته تا زبان‌های خارجی، مدیریت، و هنر را به کاربران ارائه می‌دهد. با استفاده از یودمی، کاربران می‌توانند به صورت انعطاف‌پذیر و بهینه، مهارت‌های جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.

آموزش Next.JS با Sanity CMS - برنامه بلاگ بدون سرور (به همراه Vercel)
جزییات دوره
13 hours
84
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
2,237
4.2 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Eincode by Filip Jerga Eincode by Filip Jerga

آموزش آنلاین Eincode تضمین می کند که بهترین تجربه یادگیری آنلاین را برای مخاطبان خود فراهم می کند. محتوای با کیفیت بالا و مفاهیم برنامه نویسی که در پروژه های واقعی توضیح داده شده اند، زمینه هایی هستند که Eincode در آنها می درخشد! Eincode عمدتا دوره هایی را پوشش می دهد که بر راهنمای برنامه نویسی برای توسعه وب و موبایل تمرکز دارند. اگر به دنبال راهنماهای کامل و جامع هستید، Eincode انتخاب مناسبی برای شماست. دوره ها نیز توسط مربی فیلیپ جرگا منتشر می شود. به سلامتی و به کدنویسی ادامه دهید!

Filip Jerga Filip Jerga

مهندس نرم افزار نام من فیلیپ جرگا است و من یک مهندس نرم افزار با تجربه و توسعه دهنده آزاد هستم. من دارای مدرک کارشناسی ارشد در هوش مصنوعی و چندین سال تجربه کار بر روی طیف گسترده ای از فناوری ها و پروژه ها از توسعه ++C برای دستگاه های اولتراسوند گرفته تا برنامه های موبایل و وب مدرن در React و Angular هستم. در طول زندگی حرفه‌ای‌ام، دانش فنی پیشرفته و توانایی توضیح موضوعات برنامه‌نویسی را به وضوح و با جزئیات برای مخاطبان گسترده کسب کرده‌ام. از شما دعوت می‌کنم دوره آموزشی خود را بگذرانید، جایی که من تلاش زیادی کرده‌ام تا مفاهیم مهندسی وب و نرم‌افزار را به صورت مفصل، عملی و قابل درک توضیح دهم.