نوشته های سهیل جعفری

نگاهی به وب سایت های چندفروشندگی ( market place ها ) از منظر برنامه نویسی

سهیل جعفری — Tue, 15 Oct 2024 07:57:42 +0330

مارکت پلیس ها در واقع بزرگترین نوع وب اپلیکیشن ها هستند. وب سایت هایی که در آنها، کاربران هم میتوانند محصول بخرند و هم میتوانند محصول بفروشند. آمازون، والمارت و ای بِی، از بزرگترین وب سایت های چند فروشندگی در سطح جهان هستند که سالانه، میلیون ها دلار از طریق متصل کردن خریدارها به فروشنده ها، کسب درآمد می کنند. در ایران هم میتوان مارکت پلیس های بزرگی وجود دارند که از بین آنها میتوان به دیجی کالا، دیوار و باسلام اشاره کرد.مارکت پلیس مرن فامارکت پلیس ( merketplace ) چیست؟مارکت پلیس در واقع وب سایتی است که دارای دو ویژگی است.1. امکان خرید و فروش محصول2. ثبت نام کاربران به صورت لایه بندی شدهدر واقع نکته جذاب در مورد وب سایت های چند فروشندگی، این است که صاحبان این وب سایت ها، خود هیچگونه محصولی نمی فروشند. بلکه محصولات افراد دیگر را می فروشند. در واقع این وب سایت ها، خریداران و فروشندگان را به هم وصل می کنند.اگر بخواهیم که بیشتر از نظر برنامه نویسی به این دسته از وب سایت ها نگاه کنیم، باید گفت که وب سایت های چند فروشندگی، دارای چندین لایه کاربر هستند.1. کاربر عادی که فقط توانایی خرید محصول دارند. این کاربرها فقط میتوانند محصولاتی را به سبد خرید خود اضافه کنند. مبلغ مورد نظر را پرداخت کنند و در نهایت کالا را از طریق پست تحویل بگیرند.2. کاربر فروشنده که علاوه بر اینکه کل توانایی های کاربر عادی را دارد، اجازه فروش محصول هم دارد. یعنی این کاربر میتواند در پنل خود، محصول اضافه کند. این محصولات با تایید مدیریت وب سایت، روی سایت قرار میگیرند و کاربران وب سایت، میتوانند این محصولات را خریداری کنند.3. کاربر ادمین که مدیریت وب سایت، به عهده آن است. این کاربر کل توانایی های کاربر فروشنده را دارد. علاوه بر موارد بالا، توانایی مدیریت کل وب سایت را هم دارد.انواع مارکت پلیسمارکت پلیس ها به صورت کلی به دو دسته تقسیم میشوند.وب سایت هایی که مستقیم خریدار و فروشنده را به هم وصل میکنند. در واقع در این نوع از مارکت پلیس ها، مدیر سایت فقط 2 وظیفه دارد. وظیفه اول این فرد، انتشار محصولات و آگهی های جدید است. وظیفه دوم این فرد هم، مدیریت مشکلات و دعواهای احتمالی می باشد. مثلا وب سایت دیوار و یا شیپور از این دسته وب سایت ها هستند. در این سایت ها، خریدار، مستقیم با فروشنده در تماس هست و باید مستقیم به خریدار مراجعه کند و پس از دریافت کالا، مبلغ را پرداخت کند. درآمد اینگونه از وب سایتها، از تبلیغات است.نوع دوم، وب سایت های انبار محور هست. در واقع در این نوع از وب سایت ها، خریدار و فروشنده مستقیم به هم وصل نمی شوند. بلکه خریدار، پس از انتخاب کالا، سفارش خودش را ثبت میکند و مبلغ را حساب وب سایت واریز میکند.سپس فروشنده، کالا را برای انبار مرکزی وب سایت ارسال میکند. در مرحله بعد، کالا بسته بندی میشود و برای خریدار ارسال میشود. پس از تحویل کالا و برداشتن کمیسیون وب سایت، مبلغ به فروشنده داده میشود.برای طراحی یک marketplace باید چه مواردی را مدنظر قرار داد1. احراز هویت چند لایه:در واقع ما در برنامه نویسی مرن استک، معمولا از پکیج Jwtبرای احراز هویت استفاده میکنیم. در پروژه مارکت پلیس، باید به این موضوع هم دقت داشت که احراز هویت در این نوع از وب سایت ها، باید چند لایه باشد. یعنی در مدل بک اندی user، آیتم role هم در نظر گرفته بشه. علاوه بر این موضوع، در فرانت اند هم، باید سطح دسترسی و نقش کاربر به صورت متغیر در لوکال استورج یا استیت منجرهایی مثل زاستند ذخیره شود.2. فروشگاه:در این نوع وب سایت، فروشگاه بسیار موضوع مهمی هست. فروشگاه شامل بخش های مختلفی هست مانند صفحه محصول، مقایسه محصول ها، جستجوی محصول، دیدگاه و پرسش، سبد خرید، پرداخت، ارسال محصول از فروشنده به انبار و از انبار به کاربر و...3. پنل های کاربری :در این وب سایت ها، پنل های کاربری اهمیت به سزایی دارند. این گونه وب سایت ها حداقل دارای سه پنل کاربری هستند.1. پنل ادمین که از طریق این صفحه، کاربر ادمین وب سایت را مدیریت می کند.2. پنل فروشنده که از این طریق، کاربر فروشنده میتواند محصول اضافه کند، به پرسش های کاربران پاسخ دهد، به ادمین تیکت بزند، تخفیف ایجاد کند، درخواست برداشت وجه ثبت کند و...3. پنل کاربری که در واقع صفحه پروفایل هر کدام از کاربرهای وب سایت است. در این صفحه، اطلاعات کاربری، پرسش ها، دیدگاه ها و سفارش های کاربر نمایش داده می شوند.مزایای مارکت پلیس های موفق :طراحی رابط کاربری و تجربه کاربری حرفه ایجست و جوی هوشمندانه و سریع در سایتعضویت سریع و بی دردسر هنگام سفارش محصولارائه تخفیف ها و پیشنهادهای ویژه روزانهپیدا کردن سریع محصولات تخفیف دارپیشنهاد خرید محصولات مرتبطتضمین بهترین قیمت و کیفیت کالامشخص بودن زمان تستگارانتی مرجوعی و بازگشت وجهامکان مطلع شدن از موجود شدن محصولاتدارای اپلیکیشن موبایلی برای اندروید و آیفونارائه مشخصات دقیق کالادرج تصاویر محصول از زوایای مختلفتحویل فوری و ارزان سفارش مشتریانچگونه یک وب سایت مارکت پلیس طراحی کنیم؟اگر شما میخواید طراحی این نوع از وب سایت ها را به صورت فول استک یاد بگیرید، لطفا این مقاله را تا انتها بخوانید.در این پروژه، یک وب سایت چند فروشندگی با تکنولوژی های زیر طراحی می شود.فرانت اند : Next js – Tailwind.css - Typescript - Zustandبک اند : Express js – Mongo db - JWTمزایای وب سایت های مارکت پلیسیوجود وب سایت های چندفروشندگی، از هر نظر مفید است.برای فروشندگان مفید است چون با فروش در این وب سایت ها، می توانند بازار چند میلیونی را مخاطب قرار دهند و فروش خود رو به صورت نمایی افزایش دهند.برای خریداران مفید است چون در این گونه وب سایت ها، میتوانند انواع محصولات را با هم مقایسه کنند. نظرات کاربرانی که این محصولات را خریداری کرده اند را هم بخوانند و سپس بهترین محصول را خریداری کنند.برای مدیران وب سایت هم مفید است. چون بدون دادن هزینه انبار، محصولات را می فروشند و کمیسیون خود را برداشت می کنند.5 ‌ایده برتر و به‌روز مارکت‌پلیساگر می‌خواهید مارکت‌پلیس خود را راه‌اندازی کنید، پیشنهاد می شود یکی از موارد زیر را برای کار انتخاب کنید.مارکت‌پلیس عمومی تجارت الکترونیک که شامل خرید و فروش انواع محصولات می شود.مارکت‌پلیس خدمات که در آن میتوان انواع خدمات کاری، فریلنسری، استخدامی و... را به اشتراک گذاشتمارکت‌پلیس آموزش و یادگیری که در آن، مدرسان و دانشجویان ثبت نام میکنند و با ارائه دوره های ضبط شده و یا آنلاین، محصولات را ایجاد میکنند.مارکت‌پلیس سفارش غذا که در آن، رستوران های مختلف به عنوان فروشنده ثبت نام میکنند و غذاهای آنها در سایت مارکت پلیس به فروش می رسد.جمع بندیامروزه مارکت پلیس ها بزرگترین نوع کسب و کارها هستند که بدون تامین کالا، کالای دیگران را به فروش می رسانند. شما هم برای شروع، میتوانید با سرچ پروژه طراحی مارکت پلیس با next js در گوگل، به ما در مرن فا بپیوندید و استارت آپی در این حوزه را بنیان گذاری کنید.

تمپلیت های آماده برای پروژه های Next js

سهیل جعفری — Sun, 10 Sep 2023 19:51:04 +0330

تمپلیت های آماده نکست جی اسسلام. امیدوارم حالتون عالی باشه.من سهیل جعفری هستم و توی این پست نسبتا کوتاه، میخوام در مورد یه سری تمپلیت آماده برای وب سایت های Next js ای صحبت کنم.ببینید پیشنهاد اول من برای اینکه بهترین سرعت رو در وب سایتهاتون تجربه کنید، پکیج Next js و Tailwind.css هست. واقعا بهترین هستن. فریمورک Next js به تنهایی خودش سرعت سایت هاتون رو میبره بالا. یعنی اگه شما وب سایت رو با نکست جی اس طراحی کنید، به خاطر مبحث SSR و SSG، همچنین توربوپک، به صورت پیشفرض سرعت وب سایتهاتون بالا هست.بررسی Tailwind cssاگه برای استایل دهی هم از تیلویند استفاده کنید، هم( مثل CSS خام) نیاز نیست تایم زیادی برای استایل دهی بزارید، هم سنگینی بوت استرپ رو ندارید. علاوه بر اینا، توی نسخه پروداکشن وب اپلیکیشن، کدهای استفاده نشده تیلویند هم حذف میشه. یعنی باز سرعتتون میره بالاتر. خلاصه best practice، میشه نکست جی اس در کنار تیلویند سی اس اس.آموزش رایگان اینا هم توی سایت هست: آموزش Next js 13 در کنار Tailwind.css اما خیلی اوقات هست که ما زمان کافی نداریم تا تک تک کامپوننت های پروژهمون رو بزنیم یا مثلا توی یه شرکتی کار میکنیم و اون شرکت، ما رو مجبور میکنه که از تیلویند استفاده نکنیم. خلاصه توی این شرایط، همیشه یه سری پکیج و کد آماده به دادمون میرسن. با استفاده از این پکیج ها یا کدهای آماده، شما میتونید بخش خوبی از زمانتون رو ذخیره کنید و پروژه رو راحت تر جلو ببرید.بررسی کدهای آماده Next jsتمپلیت های آماده سایت Nextjsتمپلیت آماده از سایت Next jsمیتونید برید توی این لینکیه سری کد آماده براتون اینجا گذاشته شده. بعضیاش با Next js 13 و پوشه APP هست. بعضیاش هم با Next.js 12 و پوشه Pages اما در کل میتونه براتون مفید باشه. عکسی که بالاتر میبینید رو هم همین الان از یکی از تمپلیت هاش اسکرین شات گرفتم. دموی آنلاین داره و همچنین سورس پروژهش هم، توی گیت هاب هست که لینک داده بهش...تمپلیت های آماده Tailwind UIتمپلیت های آماده از سایت Tailwind UIمیتونید برید توی این لینکتیلویند یو آی هم یه سری قالب آماده داره. سورس کدهاش هم هست. البته یه بخشیش رایگان و یه بخشیش هم پولیه اما به صورت کلی مفیده. تمپلیت های آماده ANT Dتمپلیت آماده نکست جی اسی از سایت انت دیزاینمیتونید برید توی این لینکانت دیزاین هم که معرف حضور همه هست. یکی دیگه از پکیج هایی هست که اگه روی پروژهتون نصبش کنید، خیلی ساده میتونید از کامپوننت های آمادهش استفاده کنید.تمپلیت های آماده از Next UIتمپلیت های آماده از نکست یو آی میتونید برید توی این لینکآخرین مورد هم که میخوام بگم، نکست یو آی هست. ایشون هم کلی تمپلیت آماده قابل استفاده در پروژه های next.js ای داره که قطعا کمک کننده هست. خلاصه موارد زیادی هست. اما من همین چند تا رو دیدم که مفید هستن. گفتم اینجا هم بگم شاید برای شما هم مفید باشه. در ضمن، در آینده نزدیک، یه دوره در مورد آموزش استفاده از همه‌ی این چند مورد در پروژه های Next js ای، به علاوه چند تا دیگه که از اینا هم بهتر هستن رو توی مرن فا خواهیم داشت. در نتیجه پیشنهاد میکنم که پیگیر صفحه همه دوره های ما هم باشید. زمانی که منتشر شد، اونجا میتونید پیداش کنید.لینک صفحه همه دوره های آموزش نکست جی اسو اینکه سوالی هم بود، ممنون میشم پایین همین پست، کامنت کنید. هستیم در خدمتتون

چرا مهاجرت به Next JS مهم است؟

سهیل جعفری — Mon, 20 Mar 2023 10:08:59 +0330

آموزش next js - سئو در نکست جی اس - seo next jsسلام. امیدوارم حالتون عالی باشه. توی این مقاله کوتاه، میخوام در مورد دلیل اینکه باید هر چه سریعتر سایتمون رو ببریم روی نکست جی اس صحبت کنم.سئو یا SEO چیست؟ببینید، یکی از اشتباهات بزرگ در مورد کسب و کارهای اینترنتی ای که شکست میخورن، اینه که نمیدونن سئو چیه.سئو یا SEO مهمترین نکته در فروش وب سایت شماست. سئو یعنی این که سایت شما، توی کلمه های کلیدی مورد نظرتون رتبه یک تا سه گوگل باشه. مثلا شما میخواید توی وب سایتتون موبایل بفروشید. خوب... برای اینکه بفروشید باید سایتتون رو کاربر ببینه. وقتی سایتتون صفحه 2 گوگل باشه یعنی از رتبه 10 بالاتر باشه، از هر 10 تا کاربر، شاید 1 نفر سایت شما رو میبینن. در نتیجه شما قبل از اینکه سایتتون رو طراحی کنید، 1.باید به فکر سئو کردنش باشید و 2.استراتژی سئوی وب سایتتون رو بچینید و 3. سایت رو با ابزاری طراحی کنید که هم سرعت بالایی رو بهتون بده و هم کیفیت بالایی داشته باشه و ...سئو در Next js و React jsحالا که اهمیت سئو رو فهمیدیم، میتونم بهتون بگم که امروز، بهترین سئو رو، نکست جی اس بهتون میده. یه فریمورکی که بر مبنای React.js نوشته شده و هم ازش سریعتره و هم سئو درجه یکی داره و هم خیلی چیزای دیگه.اگه دوست داشتید نکست جی اس یاد بگیرید، بیاید توی این لینک(( آموزش next js رایگان و پروژه محور ))، همه چی رو بهتون گفتم اینجا. سئوی درجه یک نکست جی اس، باعث شده که امروز، بهترین کسب و کارهای اینترنتی ایران مثل دیجی کالا، فرادرس، ژاکت، ترب و خیلی جاهای دیگه سایتشون رو از هر تکنولوژی ای که بوده، بیارن روی نکست جی اس.زمان در سایت Next jsیکی از مهمترین مشکلاتی که عزیزانی که با وردپرس کار میکنن، زمان هست. یه سایت معمولی وردپرسی، 5 ثانیه لودش طول میکشه به نظر من. اگه همون سایت وردپرسی کد نویسی بشه، میشه اطراف 3 ثانیه. یه سایتی که با نکست جی اس هست، علاوه بر اینکه تموم ویژگی های خوب ریکت مثل رفرش نشدن صفحه و... رو داره، زمان لود صفحهاتش کمتر از 3 ثانیه هست. البته در بدترین حالت 3 ثانیه. معمولا اطراف 1 ثانیه هست. میتونید سایت خود من رو هم ببینید. در واقع شما یه رتبه خوب سئویی، به خاطر ذخیره زمان از گوگل میگیرید.اگر وب سایت نکست جی اس رو دنبال کرده باشید، میبینید که جدیدا آپدیت 13 نکست جی اس منتشر شده. که من هم در موردش توی ویرگول نوشتم. میتونید در موردش بخونید. با این آپدیت 13، سئوی سایت شما بسیار بهتر هم میشه. علت این موضوع، روی کار آوردن کلاینت کامپوننت ها در کنار سرور کامپوننت ها هست. این موضوع باعث میشه که تعداد فایل هایی که از سمت سرور وب سایتتون میاد بسیار کاهش پیدا کنه در نتیجه باز هم رتبه سئوی بهتری میگیرید...اگر برنامه نویس هستید، واقعا پیشنهاد میکنم که هرچه سریعتر به نکست جی نقل مکان کنید:) با توجه به سرعت پیشرفت بالای نکست جی اس، این تکنولوژی جزو فراگیرترین تکنولوژی های طراحی وب سایت خواهد شد. کار با Big Dataیکی دیگه از موضوعات مهم در مورد نکست جی اس، بحث کار با بیگ دیتا ها هست. در واقع next js به خاطر توانایی کار کردن با مونگو دی بی، امکان کار با بیگ دیتا ها رو داره. البته همراه با سرعت زیاد و.... همین موضوع باعث شده که یک سری از وب سایتهایی که به شدت براشون مهمه که اطلاعات با حجم بسیار زیاد، به صورت لحظه ای محاسبه و نمایش داده بشه، وب سایتشون رو با نکست جی اس میزنن. وب سایت هایی مثل بازارهای رمز ارز و فضای بورس و...امیدوارم این مقاله براتون مفید بوده باشه. اگه سوالی بود، در بخش کامنت ها در خدمتیم...

آموزش tailwind.css در Next js

سهیل جعفری — Thu, 02 Feb 2023 10:59:23 +0330

آموزش next js و tailwind cssسلام. امیدوارم حالتون عالی باشه. من سهیل جعفری هستم، برنامه نویس next js و node js. توی این مقاله، میخوایم در مورد این صحبت کنیم که 1. تفاوت تیلویند سی اس اس با بقیه چیه و چرا باید بیایم سراغ تیلویند. 2. چرا توی نکست جی اس، تیلویند بسیار مهمه. 3. آموزش tailwind css مقایسه Bootstrap و Tailwind cssکلا اگه بخوایم css بزنیم، معمولا از یکی از این روش ها استفاده میکنیم. 1. زدن CSS خام.خوبیش چیه؟ خیلی دستتون بازه و هر کاری عشقتون بکشه میتونید انجام بدید. حجم فایل های cssتون هم معمولا به حداقل میرسه. بدیش چیه؟ خلاصه مفید بگم. برای زدن یه وب سایت کامل، اطراف یه قرن باید زمان بزارید. ?2. راه دوم استفاده از Scss هست.خوبیش چیه؟ حجم فایل هاتون کم هست. دستتون بازه و هر استایلی بخواید میتونید به وب سایت بدید. اگه بخوایم با خود سی اس اس خام مقایسهش کنیم، برای زدن دو سه صفحه، نرید سراغ scss. یه مقدار گیج کننده میشه ولی اگه پروژهتون بزرگ هست، برید. نسبت سی اس اس خام، کد کمتری میزنید. بدیش چیه؟ زمانی که نیازه صرف کنید 1 قرن نیست. نیم قرن هست، چون کلی کد باید بزنید براش. علاوه بر این موضوع، توی یه پروژه واقعی، همیشه تمرکز روی جاوااسکریپت هست و سی اس اس، یه کاری جانبی بی اهمیت حساب میشه اما اگه از scss استفاده کنید، باید یه حجمی از توجه رو هم بزارید روی استایل دهی. چون در واقع دارید سی اس اس عادی نمی نویسید بلکه سی اس اس برنامه نویسی میکنید. اینا متفاوتن. توضیحش هم در این مقال نمیگنجد...?بگذریم... 3. راه سوم استفاده از بوت استرپ هست. بوت استرپ استفاده نکنید. خوبیش چیه؟ نسبت به سی اس اس، کار رو ساده تر میکنه.بدی هاش:الف) حجمش فوق العاده بالاست. یعنی قشنگ 2 ثانیه زمان لود صفحه هاتون رو میبره بالا. یعنی به صورت عمومی اینجوریه. کلا ساختارش اینجوریه. علاوه بر این یه سری کامپوننت در اختیار شما میزاره. باید از همونا استفاده کنید. اگر بخواید از این کامپوننت ها استفاده کنید و استایل دلخواهتون رو بهشون بدید، استایل قبلیا حذف نمیشن. بلکه این استایل جدیدا، اضافه میشن به استایل قبلی ها. یعنی همین موضوع هم حجم کدتون رو بالاتر میبره. ?ب) خیلی از وب سایت هایی که با بوت استرپ زده شدن، شبیه هم هستن. چرا؟ چون عموما از همین کامپوننت ها استفاده میکنن.4. راه چهارم نوشتن CSS، استفاده از Tailwind.css هست.پیشنهاد من استفاده از راه چهارم هست. بدی؟ من ندیدم.خوبی؟ الف) حجم فوق العاده کم. یعنی توی حالت DEV، حجمش کم هست. وقتی میبریمش روی حالت نهایی یا پروداکشن، باز حجمش کمتر میشه. چیزی کمتر از 20 کیلوبایت معمولا. این موضوع باعث میشه که اون 2 ثانیه افزایش زمان لود بوت استرپی رو نداشته باشین.ب) استفاده ازش بسیار ساده هست.پ) کامپوننت از پیش طراحی شده ندارید، بلکه خودتون باید کامپوننت بسازید و این موضوع باعث میشه که همون آزادی عمل css خام رو، اینجا هم دارید.ت) برای یه سری چیزها، پلاگین جدا داره. که اگه نیاز داشتید اضافهشون کنید، اگه نه، حجم css الکی زیاد نیشه. البته خیلی به ندرت پیش میاد که از این پلاگین ها استفاده کنیم. ث) بسیار سریع میتونید باهاش کد بزنید و اصلا نیازی به تمرکز روی بخش سی اس اس مثل scss رو نداره. خیلی ساده و روون.ج) یکی از نکات بسیار مهم در مورد سی اس اس نویسی، اینه که اگه شما حجم cssتون کم باشه، سایت بسیار سریع خواهد بود و در نتیجه رتبه سئوی بسیار بهتری خواهید داشت. یعنی اگه دو تا سایت شبیه هم باشن ولی یکی با بوت استرپ باشه و اون یکی تیلویندی، سایت تیلویند هم سرعت بالاتری داره و هم سئوی بهتر...نکست جی اس و تیلویند سی اس استوی next js، ما میتونیم از همه این روش ها استفاده کنیم، اما همونطور که بالاتر توضیح داده شد، به دلیل برتری Tailwind نسبت به باقی روش ها، همیشه از تیلویند استفاده میکنیم. مثلا اگه به مرن فا، اولین مرجع تخصصی نکست جی اس ایران مراجعه کنید، همه پروژه هایی که میزنیم، با نکست جی اس و تیلویند هستن. آموزش tailwind cssخوب اگه بخوایم الان تیلویند رو یاد بگیریم چی کار کنیم؟تیلویند، مستندات( doc) بسیار کاملی داره. من خودم هم خیلی اوقات مراجعه میکنم به اونجا و اگه مشکلی داشتم رو بررسی میکنم. از این لینک میتونید برید به داکیومنت تیلویند سی اس اسمن توی این مقاله واقعا سخته که بخوام تک تک بخشای تیلویند رو بنویسم و توضیح بدم. توی مرن فا، ما یه دوره رایگان نکست جی اس و تیلویند داریم. میتونید برید اونجا و آموزش Next js و Tailwind css رو در کنار هم کاملا رایگان ببینید. علاوه بر اون، یه مقاله آموزش تیلویند هم دارم. فقط به این موضوع لطفا دقت داشته باشید که یاد گرفتن تیلویند، واقعا نیاز به زدن پروژه داره و توی دل کدنویسی هست که شما خیلی چیزا رو یاد میگیرید. خسته نباشید. امیدوارم این مقاله براتون مفید بوده باشه.

مقایسه client و server کامپوننت ها در Next.js 13

سهیل جعفری — Sat, 21 Jan 2023 10:36:27 +0330

سرور کامپوننت یا کلاینت کامپوننتسلام. امیدوارم حالتون عالی باشه. توی مقاله، می خوایم به تفاوت های client components و server components در Next.js بپردازیم. یکی از مهم ترین موضوعاتی که هر Next js Developerای باید بدونه. فقط همین اول بگم خدمتتون. این موضوع شاید یکم فهمیدنش گیج کنده باشه. به صورت ویدئویی هم اینا رو گفتم. میتونید از طریق لینک هایی که انتهای مقاله میزارم، برید و ببینیدشون...چرا کامپوننت ها دو دسته میشنببینید اگر شما با نکست جی اس کار بکنید و یه وب سایت واقعی بسازید و آنلاینش کنید و روی سئوش کار بکنید، میبینید که Next js فوق العادهست. همه آیتم های سئوییش رتبه یک رو میاره به جز یدونه. اون یدونه هم مشکلی نیست که فقط نکست داشته باشتش. همه وب سایت ها این مشکل رو دارن. حالا مشکل چیه؟مشکل اینه که تعداد فایل هایی که از سرور میفرسته به فرانت اند زیاده. این موضوع باعث میشه که سرعت اولیه وب سایت یه مقدار بیاد پایین. البته نه 2 - 3 ثانیه. مثلا 0.2 ثانیه. این موضوع از نظر سئو پارامتر منفی حساب میشه. این موضوع توی نکست جی اس 12، به شدت دیده میشه. اما توی نکست جی اس سیزده، تیم نکست تلاش کردن تا این مشکل رو حلش کنن. چطور؟ با دو دسته کردن کامپوننت ها.ببینید ما توی نکست 12، باید توی پوشه Pages همه صفحاتمون رو بسازیم اما توی نکست سیزده، یه پوشه جدید معرفی شده با اسم پوشه App. کامپوننت هایی که توی پوشه پیجز فراخوانی میشن میتونن هر نوع کامپوننتی باشن و شما آزادی عمل زیادی دارید ولی کامپوننت هایی که توی پوشه اپ، فراخوانی میشن، یا باید کلاینت کامپوننت باشن یا سرور کامپوننت.تفاوت server component و client componentکلاینت کامپوننت به کامپوننتی میگیم که رندرش سمت کلاینت انجام میشه و وقتی صفحه از سرور رسید، ساخته میشه. سرور کامپوننت به کامپوننتی میگیم که سمت سرور ساخته میشه و فرستاده میشه به فرانت. یعنی هر صفحه ی Next js ای رو که شما فراخوانی میکنید، یا به صورت کامل یا یه بخشیش توی سرور ساخته میشه و فرستاده میشه به کلاینت یا در واقع مرورگر کاربر. اگر این صفحه، کلاینت کامپوننت هم داشته باشه، بعد از اینکه صفحه توی مرورگر کاربر نمایش داده شد، کامپوننت های کلاینتی هم ساخته میشن و به کاربر نمایش داده میشن.در واقع سیستم، همون سیستم تفاوت getServerSideProps و useEffect هست که توی نکست 12 داشتیم.اگر برای لود اطلاعات از API، شما گت استاتیک پراپس و گت سرور ساید پراپس بزنید( که معادل نکست 13شون میشه getData) شما وقتی وارد صفحه میشید، اطلاعات توی صفحه هست ولی وقتی همون اطلاعات رو با useEffect یا useSwr و اینجور هوک ها فراخوانی میکنید، اول وارد صفحه میشید، یه گیف لودینگ میبینید تا درخواست زده بشه. بعدش اطلاعات بیاد نمایش داده بشه. نکته : توی اس دبلیو آر و یوز افکت و اینا سئو نداریم ولی توی گت دیتا و رفقاش داریم. پس اطلاعاتی که سئوشون مهمه، باید با getData و... فراخوانی بشن.خوب حالا لطفا دقت کنید. یه جمع بندی بکنیم. کلاینت کامپوننت میشه کامپوننتی که سمت توی مروگر کاربر رندر میشه ولی سرور کامپوننت میشه کامپوننتی که توی سرور رندر میشه.ما توی نکست 12، کلا یه نوع کامپوننت داشتیم ولی توی نکست 13، دو نوع، پس وقتی کامپوننت ها بشن دو دسته، قطعا از تعداد کامپوننت هایی که از سمت server میاد کم میشه. پس همون مشکلی که ابتدای مقاله گفتم( تعداد فایل های زیادی که از سرور میاد) کمتر میشه، در نتیجه، ما سئوی بهتری خواهیم داشت. تا اینجا مقاله تفاوت رو به صورت ریشه ای و مفهومی فهمیدیم. توی نوشتن کامپوننت تفاوت چیه؟قبل از اینکه اینو بگم، لطفا دقت بکنید که صفحات همیش سرور ساید هستنا. کامپوننت ها هستن که میتونن کلاینت یا سرور ساید باشن.اما تفاوت این دو تا توی کد چی هست؟ما هر وقت خواستیم کلاینت کامپوننت داشته باشیم، توی خط اول کامپوننت مینویسیم "use client"همین و همین. به همین سادگی کامپوننتمون شد کلاینت کامپوننت.موارد استفاده از client component ها در Next js 13شما اگر بخواید از موارد زیر استفاده کنید، حتما باید اون بخش رو کلاینت کامپوننت بکنید واگرنه ارور میگیرید. همه هاهمه هاهمه هوک ها از useState تا useSWR. همهشون...یعنی هر وقت خواستید برای یه دکمه، یه آن کلیک تعریف کنید، باید برای اون دکمه یه کلاینت کامپوننت تعریف کنید...* یاد گرفتن کلاینت کامپوننت ها و سرور کامپوننت ها در نکست جی اس، بسیار مهم هست. میتونید توی دوره رایگان آموزش نکست جی اس ما شرکت کنید و نکست و جی اس و تیلویند رو در کنار هم یاد بگیرید...* دوره نکست جی اس پیشرفته ما هم هست که توش، موارد پیشرفته تر Next.js رو آموزش دادیم...* هم چنین میتونید این موضوع رو به صورت کامل و پروژه محور توی وب سایت فروشگاه فایل نکست جی اسی ما یاد بگیرید. یه دوره درجه یک که همه چیز نکست جی اس، نود جی اس، تیلویند و مونگو رو توش یادمیگیرید. توی پروژه فروشگاه فایل، ما چیا داریم؟یه بخش محصولات که شامل اپلیکیشن ها، کتاب ها و فایل های گرافیکی میشه. یه بخش مقالاتیه بخش محصولات دسته بندی شدهیه داشبورد خوشگل و جامعبحث نستد کامنت ها و امکان ارسال پاسخ کامنتجستجو در وب سایتاسلایدر محصولات به صورت ریسپانسیو کاملا کدنویسی شدهتوی این پروژه چیا یاد میگیریم؟ نحوه مدیریت کلاینت کامپوننت ها و سرور کامپوننت ها با توجه به سئو و گرفتن دیتا از بک اندنحوه مدیریت فایل ها و صفحات در Next js 13انواع روتینگ ثابت، متغیر، کچ آل + کوئری زدنطراحی یه داشبورد خوشگل و جامع برای وب سایتبحث وبلاگ و داشتن مقاله در وب سایت( دارای بخش مقالات مرتبط اسلایدری) و همچنین جدیدترین مقالات در صفحه اصلیبخش محصولات به صورت دسته بندی شده و نمایش جدیدترین های هر دسته در صفحه اصلیبخش فروشگاه دارای انواع فیلتر هابحث صفحه بندی محصولات و مقالاتبحث جستجو هم برای محصولات و هم برای مقالاتبحث کاربر و لاگین و تایید ایمیلی اکانت و ...بحث خرید از وب سایت و درگاه پرداخت و سبد خرید و استفاده از کانتکست در نکست جی اس و...بحث کامنت گذاری در وب سایتبحث سئو با نکست جی اس و ریکت جی اسبحث ریسپانسیو کردن با تیلویندبحث دیپلوی و آنلاین کردن پروژه* و کلی چیز دیگه که واقعا اینجا نمیشه همهش رو لیست کرد.پیشنهاد میکنم توی گوگل، فروشگاه فایل مرن فا رو سرچ کنید، اولین نتیجه هست. ویدئوی معرفی پروژه رو ببینید...امیدوارم محتوای این مقاله و این دوره ها براتون مفید باشن...

آموزش بک اند با Next.js

سهیل جعفری — Sun, 01 Jan 2023 20:50:20 +0330

آموزش نکست جی اسسلام، امیدوارم حالتون عالی باشه. توی این مقاله، میخوایم در مورد نوشتن بک اند با Next.js صحبت کنیم. نوشتن بک اند با نکست جی اس، چندان زیاد سخت نیست. توی نکست جی اس، زیر مجموعه پوشه pages، یه پوشه داریم به اسم API، این پوشه اختصاص داده شده به کارهای بک اندی نکست جی اس.در کل برای بک اند، ما سه تا بخش داریم. یه بخش میشه مدل که توی نکست جی اس، برای ساختن مدل، باید توی روت اصلی پروژه، یه پوشه ایجاد بکنیم به اسم models. مدل هایی که میخوایم بسازیم رو باید توی این فایل تعریف کنیم. بخش دوم میشه روتز که توی Next.js نیازی به ایجاد یه همچین پوشه ای نداریم. توی پوشه ای پی آی، وقتی یه فایلی رو میسازیم، خود به خود میشه یه روت از وب سایت.بخش سوم هم میشه کنترلر مربوط به بک اند، کنترلر میشه همون فایلی که توی فلان روت میسازیم. مثل توی روت /api/new-post ما یه فایل میسازیم به اسم index.jsx. روتمون میشه همین چیزی که نوشتم و کنترلر رو هم توی همین فایل ایندکس مینویسیم. در مورد ساختار کدنویسی و متدهای مختلف api نویسی، نکست جی اس عین Node.js هست. دقیقا همون سیستم. همون توابع find و select و limit و skip و...پوشه API در Next.jsساختار فوق العاده جالبی که نکست جی اس داره، اینه که فرانت اند ریکتی رو آورده در کنار بک اند نود جی اسی. البته همراه با سرعت و سئوی بهتر. سیستم روت بندی خاص next js باعث شده که توی بک اند، اصلا نیازی به نوشتن بخش routes نباشه.در مورد نکست جی اس 13 هم اگه یه مقدار بخوام بگم، ببینید سیستم بک اند نویسی توی این نسخه و نسخه 12 هیچ فرقی نکرده. ما توی Next.js 12 از پوشه پیجز استفاده میکردیم. توی نسخه 13 کل پوشه پیجز منتقل شده به پوشه app به جز همین پوشه ای پی آی. میتونید توی وب سایت نسخه بتا نکست جی اس 13 توضیحات بیشتری رو در مورد این موضوع هم بخونید....قطعا یکی از بهترین فریمورک های حال حاضر که آینده درخشانی داره همین نکست جی اس هست که نمیشه توی یه مقاله صرف، در موردش زیاد صحبت کرد. میتونید آموزش next js رو به صورت پیشرفته و ویدئویی و رایگان، توی سایت ما ببینید.

بازار کار react.js و next.js + نقشه راه کدنویسی وب 2023

سهیل جعفری — Fri, 18 Nov 2022 08:25:01 +0330

بازار کار next.jsسلام. امیدوارم حالتون عالی باشه. توی این مقاله میخوایم در مورد بازار کار react.js و next.js صحبت کنیم. یکی از دغدغه هایی که قبل از انتخاب یه فریمورک جاوااسکریپتی، همه بچه ها دارن. همچنین در انتهای مقاله، در مورد رود مپ یا مسیر راه برنامه نویسی وب چند کلمه رو خدمتتون میگم.فریمورک های جاوااسکریپتیاول به نظرم خوبه که یکم در مورد ریکت و نکست جی اس توضیح بدم. ببینید وقتی شما javascript رو یاد میگیرید، برای ادامه راه و تبدیل شدن به یه برنامه نویس درجه یک حوزه وب، مواجه میشید با سه تا شاخه. react.js ، vue.js و angular.js. خوب؟ کدوم رو انتخاب میکنید؟ کدوم بهتره؟به نظر من ریکت رو انتخاب کنید. چرا؟ چون بازار کار بهتری داره، باحال تره، برای اونایی که عشق برنامه نویسی هستن چالش های جذاب تری داره، تعداد توسعه دهندگانش بیشترن( یعنی اگه شما به یه مشکلی بخورید و گوگلش کنید، خیلی ساده به جواب میرسید بر خلاف دو تای دیگه) و از همه مهمتر، آینده بهتری نسبت به دو تای دیگه داره. ریکت، ویو و انگیولار، هر سه تاشون سئو ندارن، در نتیجه برای رفع این مشکل، یه سری فریمورک بر مبنای اینا زده شده که ورژن سئودارشدهشون هست. ورژن سئودار vue.js میشه Nuxt.js. برای انگیولار میشه angular universal و مهم تر از اینا، ورژن سئو شده ریکت جی اس میشه Next.jsحالا بریم سراغ بازکار که اصل ماجرا هست. بازار کار react.js و next.jsنمیدونم کی دارید این مقاله رو میبخونید ولی الان که من دارم این مقاله رو مینویسم، آبان 1401 هستیم. توی همین یک سال گذشته، خیلی از سایت ها شیفت کردن از وردپرس به نکست جی اس( فریمورک seo دار react.js). دیجی کالا، فرادرس، ژاکت، تخفیفان، ترب و خیلی سایت دیگه. خیلی سایت ها هم ریکتی هستن مثل آپارات و کلی جای دیگه که به قول معروف، در این مقال نمیگنجد?وقتی این کسب و کارهای مهم که بخش مهم کارشون، روی سایت میچرخه میرن سمت یه تکنولوژی، یعنی حداقل 5 سال آینده برنامه نویسی وب و محبوبترین تکنولوژی 5 سال آینده، اون تکنولوژی هست. همین موضوع نشون میده که خیلی از وب سایت ها، به زودی میان سراغ ریکت و به ویژه next.js. همین الان اگر برید و مثلا توی پونیشا، جاینجا و این جور وب سایت ها که مرجع ثبت آگهی کسب و کار هستن یه جستجو بزنید، خیلی ساده میبینید که تعداد درخواست های شغلی برای ریکت کار ها خیلی بیشتر از ویو و انگیولار هست. کسی هم که سایتش با ریکته، یه مقدار باهاش صحبت بکنی در مورد سئو، میفهمه که استفاده از Next.js ، خیلی براش بهتره تا react.js. چرا؟ چون هم سئو داره، هم سرعت بیشتری داره، هم کدنویسی باهاش ساده تره، هم بهینه ساز تصویر داره( یعنی وقتی عکسی رو میدید به نکست، خودش هم تبدیلش میکنه به webP و هم اندازهش رو بهینه میکنه بدون افت کیفیت). واقعا دیگه از یه فریمورک چی میخواید؟?هم لیزی لودینگ داره، هم بک اند رو آورده کنار فرانت اند(فول استک) و کلی چیز دیگه.خلاصه به نظرم دست دست نکنید و سریع بیاید سمت ریکت و نکست جی اس. سایت خود من هم در مورد نکست هست. میتونید انتهای مقاله لینکش رو پیدا کنید...نقشه راه برنامه نویسی وببعد از یاد گرفتن اچ تی ام ال و سی اس اس و جاوااسکریپت،میرسید به بوت استرپ و ریکت.بوت استرپ رو یاد نگیرید. چون به زودی تیلویند رو یاد میگیرید. خیلی بهتره. هم سبک تره و سرعت سایت رو کم نمیکنه. هم تکراری بودن کامپوننت ها رو مثل bootstrap ندارید.برسیم به ریکت توی ریکت کافیه دو تا چیز رو خوب یاد بگیرید، منطق کامپوننت محور بودن و با کامپوننت ها کار کردناستفاده از هوک های useState - useEffect - useRefدو تا نکته در مورد ریکت بگم من، اول اینکه ما همیشه از فانکشنال کامپوننت استفاده میکنیم نه کلاس کامپوننت. پس دوره ای ببینید که تمرکزش روی functional component و استفاده از هوک های ریکت باشه.دوم هم اینکه دوره رایگان react.js توی یوتوب هست. زیاد هم هست. خیلی ساده میتونید ببینید. ریکت رو که یاد گرفتید، میتونید توی دوره آموزش next.js مرن فا شرکت کنید. اینم رایگان هست و توش خیلی ساده میتونید نکست جی اس و تیلویند سی اس رو در کنار هم یاد بگیرید. توی سایت ما کلی پروژه فول استک داریم. فرانت پروژه ها همیشه با next.js و tailwind.css هست و بک اند هم معمولا با node.js و MongoDB. یاد گرفتن نود جی اس هم اصلا نگرانش نباشید. دوره رایگانش توی یوتوب هست. میتونید ببینید. فکر نکنید که شما مثلا باید بشینید و 10 ساعت آموزش نود جی اس ببینید و بعدش بیاید و پروژه فول استک زدن رو شروع کنید. نه. برید توی یوتوب، 4 - 5 ساعت از آموزش رو ببینید. موارد مهم رو یاد میگیرید. بعد بیاید و پروژه بزنید. چون توی دل پروژه همیشه آدم خیلی بهتر مفاهیم رو یاد میگیره. بعد پروژه، دوباره برید و آموزش node.js رو به صورت کامل ببینید. توی دل پروژه ها، چون آدم کاربرد یه کدی رو میبینه، خیلی بهتر توی ذهنش میشینه. خلاصه مفید مسیر این میشه.در مرحله اول: html - css - jsدر مرحله دوم: react.js و هوک هاشدر مرحله سوم: یاد گرفتن next js و tailwind.css با مرن فادر مرحله چهارم: یه کرش کورس در مورد نود جی اس و مونگو دیبی.( نرید 15 ساعت ویدئو در موردش ببینید. بلکه اول یه دوره مختصر مفید ببینید در حد یکی دو ساعت یا تهش دیگه 5 ساعت. ) مرحله پنجم میشه زدن پروژه فول استک با نکست جی اس و نود جی اس که توی وب سایت مرن فا، کلی از این دوره ها هست. تمام. حالا که ساختار های سایت رو خوب باهاش آشنا شدید و یکی دو تا پروژه فول استک زدید، خوبه که هی در مورد نکست و نود چیزای جدید یاد بگیرید. میتونید حتی آموزش 15 ساعته نود جی هم ببینید. امیدوارم این مقاله براتون مفید بوده باشه. اگر هم سوال و نظری داشتید، میتونید کامنت بزارید... ??

آموزش seo در react.js

سهیل جعفری — Sat, 12 Nov 2022 06:07:51 +0330

سئو در react.jsسلام. امیدوارم حالتون عالی باشه. من سهیل جعفری هستم و توی این مقاله، میخوایم ببینیم که چطور میشه یه وب سایتی که با react.js زدیم رو سئو کنیم. خلاصه مفید بهتون بگم؟ نمیتونید. خداحافظ. پایان مقاله.ولی جدا از شوخی، نمیشه سایت ریکتی رو سئو کرد. چرا؟ ببینید شما یه سایت ریکتی رو بررسی کنید لطفا. اگه توی یه سایت ریکتی، ctrl+u بزنید یا در واقع به این آدرس مراجعه کنید: https://example.comمیبینید که چند خط کد بیشتر نیست. مثلا اگر شما توی متن صفحهتون عبارت (( سئو در ریکت)) رو نوشته باشید، توی سورس صفحه اگه ctrl+f بزنید و این عبارت رو جستجو کنید، پیداش نمیکنید. چرا؟ چون توی ریکت، ما یه div داریم با آیدی root. ریکت از همین دیویژن استفاده میکنه تا دام مجازی رو لود کنه و محتوا رو توی صفحه به نمایش بزاره. خوب دام مجازی هم که توی سورس نمیاد. در نتیجه ما سئو نداریم. ببینید برای داشتن سئو در صفحه، مهم نیست که کاربر، چه محتوایی توی صفحه میبینه، بلکه مهمه که ربات گوگل چی میبینه. ربات گوگل هم با این تفاسیر، اصلا متن نمیبینه توی صفحه که بخواد سئوش کنه. جالبه که اگر شما توی صفحه سایت ریکتی، اینسپکت رو باز کنید، کل کد سایت رو همراه با متن ها اونجا زده ولی توی سورس صفحه نیست. ?خوب، حالا راه حل چیه؟مدرسان شریف ?آموزش سئو در react.js ببینید، یه سری برنامه نویس، اومدن بر مبنای همین کتاب خونه react.js، یه فریمورک طراحی کردن و اسمش رو گذاشتن next.js. این نکست جی اس، مشکل سئو در ریکت رو حل میکنه واسه شما در کنار زیبایی های ریکت.چطوری حل میکنه؟توی ریکت ما میخوایم یه ریکوئست بزنیم به بک اند و دیتا بگیریم چی کار میکنیم، از useEffect استفاده میکنیم. درست؟مکانیزم کار کردنش چجوریه؟ اول کاربر url رو وارد میکنه. صفحه اولیه در حال لود، به کاربر نمایش داده میشهو در واقع، سورس صفحه ساخته میشه. حالا یوزافکت شروع به کار میکنه و درخواست میزنه. اطلاعات رو میگیره و نمایش میده. این اطلاعات دیگه نمیره توی سورس صفحه.مکانیزم کار کردن next.js چیه؟توی نکست جی اس، ما 4 تا مکانیزم داریم برای لود کردن دیتا. اولیش CSR هست. کلاینت ساید رندرینگ. میشه استفاده از همین یوز افکت و SWR و اینا که توشون سئو نداریم. توی سه تای پایینی، سئو داریم.دومیش SSG هست. استاتیک ساید جنریشن. کار کردش چجوریه؟ سایت ما مثلا یه سایت وبلاگی هست. توی سایت 20 تا مقاله داریم. وقتی میخوایم پروژه رو بیلد بگیریم و دیپلوی کنیم روی سرور، خود نکست جی اس، یه 20 تا مقاله رو با محتوای کامل میسازه. میزارتشون توی سرور. حالا هر وقت کاربری ریکوئست زد، همون صفحه رو میفرسته. در نتیجه صفحه دارای محتوا، فرستاده میشه سمت کاربر و محتوا هم توی سورس صفحه قرار میگیره. سومین روش، ISR هست. اینکریمنتال استاتیک ریجنریشن. نحوه کارکردش چجوریه؟ بدی روش اس اس جی، چیه؟ اینه که ما اگر توی یکی از مقاله ها، یه تغییری بدیم یا مثلا مقاله 21 ام رو بنویسیم، توی سایت نمایش داده نمیشه. برای اینکه نمایش داده بشه، باید پروژه رو دوباره دیپلوی بکنیم. توی آی اس آر، این مشکل حل شده. یعنی همه خوبی های اس اس جی رو داره، علاوه بر اون، هر نیم ساعت یه بار، خودش صفحات سایت رو آپدیت میکنه با توجه به دیتابیس. یعنی شما اگه مثلا شما همه مقاله ها رو توی صفحه اصلی نمایش داده باشی و مقاله 21 رو هم بعد دیپلوی پروژه بسازی، تا قبل از نیم ساعت، توی صفحه اصلی همون 20 تا مقاله رو میبینی ولی نیم ساعت که گذشت، خود سرور صفحات سایت رو به روز رسانی میکنه و میبینه که یه چیز جدیدی اضافه شده. اونم اضافه میکنه به صفحه اصلی سایت. این نیم ساعتی هم که گفتم رو خودتون میتونید تعیین کنید میتوندی هر یه دقیقه یه بار بزارید، میتونید هم هر 1 ماه یه بار بزارید.روش آخر SSR هست. سرور ساید رندرینگ. عین یه سایت عادی اطلاعات رو از سرور میگیره و به کاربر نمایش میده. سئو هم دارید فقط با سرعت بیشتر و البته دارای سئو. یعنی در واقع کاربر هر وقت که ریکوئست زد، همون لحظه سرور اطلاعات رو از دیتابیس میگیره، میزاره توی صفحه و تحویل کاربر میده. هر تغییری هم توی سایت دادید، همون لحظه به صورت آنلاین میتونید ببینید. پیشنهاد من چیه؟ بستگی به سایتتون داره. یکی هست هر لحظه ممکنه محتواهاش آپدیت بشه، خوب SSR براش خوبه. یکی هست روزی یه بار، خوب ISE براش خوبه. یکی هم هست که هر 6 ماه یه بار. خوب SSG مفیده براش. من خودم معمولا از SSR استفاده میکنم. البته این هم نکته مهمیه. سی اس آر چی میشه این وسط؟ببینید شما هر جا نیاز به دیتایی دارید که سئوش مهمه، از ssg - ssr و isr استفاده کنید. هر جا مهم نیست، از csr. مثلا دیتای توی ساید بار ممکنه مهم نباشه یا مثلا بخش کامنت ها. خوب اینا رو میشه یه swr زد و لودشون کرد توی صفحه. یا مثلا یه نکته امنیتی توی سایت های نکست جی اسی، بررسی لحظه ای تغییر در کوکی authentication هست. برای بررسی لحظه ایش از یوز افکت میشه استفاده کرد که میشه جزو مباحث پیشرفته آموزش نکست جی اس.در پایان هم اگه میخواید در مورد نکست بیشتر بدونید و رایگان کل نکست جی اس رو یاد بگیرید، پیشنهاد میکنم مراجعه کنید به سایت ما از این لینک: آموزش رایگان next.js با مرن فا .ما توی مرن فا، کلی مطلب برای آموزش next.js ، آموزش tailwind.css و همچنین آموزش node.js داریم. کاملا ویدئویی و پروژه محور.اگر هم میخواید داک خود نکست جی رو ببینید، میتونید از این لینک اقدام کنید. next.js docsپایان

مقایسه Next.js13 و Next.js12

سهیل جعفری — Fri, 04 Nov 2022 10:50:16 +0330

بررسی next.js 13سلام. امیدوارم حالتون عالی باشه. من سهیل جعفری هستم و توی این مقاله میخوایم به بررسی نکست جی اس 13 بپردازیم. امروز که دارم مقاله رو مینویسم، حدود 10 روزی هست که از انتشار next.js13 میگذره. هنوز خیلی نمیشه در موردش صحبت کرد اما به عنوان یه دید اولیه میشه این موارد رو ذکر کرد.1. اولین تغییر اینه که یه پوشه ایجاد شده به اسم app. کارکردش چیه؟ پوشه pages که قبلا داشتیم، اون پوشه کاملا خالی شده و فقط یه پوشه api توش داریم. کل فایل های صفحه ها و... منتقل شده به پوشه اپ.2. دومین و در واقع مهمترین تغییر اینه که دیگه نیاز نیست از getServerSideProps و getStaticProps استفاده کنیم بلکه یک چیزی مطرح شده به اسم getData. کار رو برای ما خیلی ساده تر کردهasync function getData() { const res = await fetch('https://api.example.com/...'); return res.json(); } export default async function Page() { const data = await getData(); return

; }یک چیزی تعریف میشه به اسم cache که این کش، نحوه ریکوئست زدن رو تعیین میکنه. fetch(URL, { cache: 'force-cache' }); fetch(URL, { next: { revalidate: 10 } }); fetch(URL, { cache: 'no-store' });اولی و دومی برای حالت استاتیک ساید جنریشن یا در واقع SSG هستن. آخری هم برای حالت سرور ساید رندرینگ یا SSR. 3. تغییر سوم در مورد نکست جی اس لینک هست. توی next.js12 ما نمیتونستیم به تگ لینک کلاس بدیم و نیاز بود که داخلش، از تگ a استفاده کنیم. توی next.js13 اگر کلاسی بخوایم، میتونیم به همون تگ link بدیم و اگر داخل تگ لینک، تگ a استفاده کنیم، ارور میده. این مورد، مورد مثبتی هست.4. استفاده از turbo pack به جای webpack که خود تیم نکست میگن کار رو سریعتر کرده.5. ایجاد تغییرات در نکست جی اس ایمیج مثلا حذف objectFit و Layoutبررسی پوشه app در Next.js 13نکست جی اس توی نکست 12، وقتی می‌خواستیم یه صفحه توی سایت درست کنیم، توی پوشه pages، یه پوشه میساختیم مثلا به اسم about و توش، یه فایل index.jsx میساختیم. اما توی نکست 13 باید توی پوشه app، یه پوشه بسازیم به اسم about. به جای ایندکس باید از پیج استفاده کنیم. یعنی اسم فایل داخل پوشه about میشه page.jsx.معرفی Layout و Loading و Error در Next.js 13توی پوشه هر صفحه مثلا پوشه about، فقط همین فایل page.jsx قرار نمیگیره بلکه، یه سری فایل دیگه هم میتونیم بزاریم. Loading.jsx، Layout.jsx و Error.jsx . در مورد فایل layout، هنوز زمان نیازه که مشخص بشه کارکردش چیه و یه مقدار کار باهاش گیج کنندهست. اما در مورد دو فایل دیگه، میشه گفت محتوای ارور و لودینگ بر اساس هر صفحه توی نکست 13 شخصی سازی شدن. مثلا وقتی میخواید صفحه همه مقالات یه وبلاگ رو باز کنید، لودینگش متفاوته با لودینگ صفحه اصلی. خوب چرا این موضوع رو بوجود آوردن، به خاطر حالت streaming. مثلا اگه برید به یوتوب، همون اول کل محتوا بهتون نمایش داده نمیشه. بلکه ابتدا یه صفحه کاملا سیاه میبینید، بعد مدت کوتاهی، یه سری باکس بهتون نمایش میده که خاکستری رنگ هستند. بعد که اطلاعات ویدئوها لود شد، محتوای اصلی نمایش داده میشه.برای مطالعه بیشتر در مورد Next.js13، بررسی ویدئویی نکست 13 و همچنین موارد بیشتر در حوزه نکست جی اس، میتونید به سایت ما مراجعه کنید. لینک: آموزش رایگان Next.js با مرن فا

مقایسه react.js ، vue.js و angular.js

سهیل جعفری — Tue, 18 Oct 2022 19:05:34 +0330

سلام. امیدوارم حالتون عالی باشه. من سهیل جعفری هستم. توسعه دهنده Next.jsتوی این مقاله، هدف مقایسه 3 فریمورک معروف جاوااسکریپت هست.وقتی که یه برنامه نویس وب، اچ تی ام ال و سی اس اس و جی اس رو یاد گرفت، با یه سوال مواجه میشه. از الان به بعد، فرانت سه شاخه میشه. کدوم رو برم؟ ریکت، ویو یا انگیولار؟توی این مقاله، اینو کامل بهتون توضیح میدم. در انتها هم میگم که کدوم بهتره و برید سمت کدوم...نکته: قبل از هر توضیحی، نیازه که منطق single page application یا SPA رو براتون توضیح بدم.وب اپلیکیشن تک صفحه( SPA) چیست؟نکته 1: ببینید توی یه وب سایت معمولی، ما برای سایت، 10 تا صفحه طراحی میکنیم. برای هر صفحه، یه مقدار html، یه مقدار cssو یه مقدار هم jsمینویسیم. اینا با هم میشن یه سایت.توی SPAیه مقدار کار متفاوته. این طوری نیست که همه کدهای یه صفحه رو، همونجا بنویسیم بلکه، هر صفحه به کلی کامپوننت مختلف تقسیم میشه. کامپوننت یا بخش.مثلا یه صفحه اصلی سایت،یه کامپوننت هدر داره. توی هدر، لوگو، منو، باکس جستجو و اینا قرار میگیره.یه کامپوننت اسلایدر اصلی داره، توش یه اسلایدر گذاشته شده.و...نکته 2: هر کامپوننت میتونه توی خودش، کلی کامپوننت دیگه داشته باشه. مثلا یه اسلایدر محصولات رو در نظر بگیرید، خود اسلایدر محصولات میشه یه کامپوننت، هر کدوم از تک اسلایدها، میشن یه کامپوننت. مثلا دکمه هر تک اسلاید رو هم میشه کرد یه کامپوننت و...تا اینجاش اوکیه؟ توی spa، صفحه سایت، تشکیل میشه از کلی کامپوننت.نکته 3: حالا ما یه صفحه اصلی داریم توی سایتمون و یه صفحه درباره ما. اگر توی صفحه اصلی باشیم و کلیک بکنیم روی لینکی که ما رو منتقل میکنه به صفحه درباره ما، چه اتفاقی می افته؟ کامپوننت های مربوط به صفحه اصلی که توی صفحه الان دارن بهمون نشون داده میشن، حذف میشن و کامپوننت های مربوط به صفحه درباره ما توی صفحه آپلود میشن. این طوری هم صفحه تغییر میکنه و هم رفرش شدن صفحه نداریم. این چیزی که گفتم، خیلی ساده شده کاری که توی spaها انجام میشه هست.نکته 4: اگه دقیقتر بخوام بگم، توی یه وب سایت معمولی( نه spa)، ما یه چیزی داریم به اسم دام که وقتی صفحه تغییر میکنه، دام هم تغییر میکنه. ولی توی اس پی ای ها، دام ثابته. یه چیز دیگه تعریف میشه به اسم دام مجازی و تغییرات کامپوننت ها و صفحات روی اون انجام میشه. همین موضوع باعث میشه که اصلا رفرشی نداشته باشیم. دقت کنید single page app یا اپلیکیشن تک صفحه ای.اگه نکته 4 رو نفهمیدید، ایرادی نداره. همون نکته سه رو یاد بگیرید، کافیه. بیاید و یکم مثلا با ریکت جی اس کار کنید، کامل همه چی دستتون میاد.اما بریم سراغ معرفی فریمورک هافریمورک angular.js1. پشتیبان انگیولار خود گوگل هست.2. توی ایران معمولا ارگان های دولتی و اداره ها و اینا، گاهی پیش میاد که با انگیولار کد میشن.3. کمتر ازش استفاده میشه مثلا سایت ایران تلنت با انگیولار زده شده.4. سئو در انگیولار با angular universal انجام میشه.5. یکی از نکاتی که در مورد انگیولار مطرحه و برخی دوستان اگیولار کار میگن، سختی کد زدن باهاشه.فریمورک vue.js1. بین سه تا فریمورک راحت ترینه. تا حدی که میگن اگه میخواید یاد گیری فریمورک رو شروع کنید، با ویو شروع کنید که بنده از همین تریبون میگم: نه خیر آقااا. چه کار مسخره ایه. من میخوام مثلا ریکت یاد بگیرم. پس باید برم یه چیز دیگه رو یاد بگیرم. بعد بیام ریکت؟!!!! خوب مستقیم میرم ریکت. چرا وقتمو تلف کنم...2. پشتیبانش شرکت خاصی نیست. یه بنده خداییه به اسم ایوان یو. البته این آقای یو، کارمند گوگل بوده یه زمانی.3. کم حجم و بهینهست.4. سایت هایی مثل باسلام، کافه بازار، ایرانی کار( مرجع جدید خرید خودرو) یا ویو زده شدن.5. سئو توی ویو جی اس، میشه فریمورک nuxt.js. یعنی شما اول باید ویو رو یاد بگیرید، بعد برید ویوی پیشرفته که ناکست هست رو یاد بگیرید.6. آینده شغلیش به نظر بدک نمیاد اینطوری که از فضای کسب و کارها معلومه.فریمورک react.jsخوب خوب خوببرسیم به اصل ماجرا. ریکت.پشتیبانش فیسبوک هست.برسیم به اصخل ماجرا. ریکت.نیتیو هست. شما اگه یه سایت با ریکت بزنید، بعدش نیاز داشته باشید یه اپ موبایل هم برای اون کسب و کار بزنید، ریکت، react native رو در اختیارتون گذاشته که دیگه نیاز نداشته باشید برید مثلا اندروید یا آی او اس یا فلاتر یاد بگیرید. با همون ساختار ریکت، اپ موبایل بزنید. علاوه بر این، خروجی ریکت نیتیو، هم اپ اندروید هست و هم اپ آی او اس.اگه با ریکت بخواید سایتتون رو سئو کنید، نمیتونید. به همین خاطر، ما از ریکت پیشرفته استفاده میکنیم نه خود ریکت. فریمورک Next.jsبازار کار ریکت از همه بهتره. درآمدش هم از بقیه فریمورک ها بیشتره. کافیه یه سر بزنید به پونیشا و جابینجا و.... علت این موضوع اینه که بین این سه تا، ریکت از بقیه سخت تره. البته سخت که میگم نه اینکه سخت باشه، بقیه راحت ترن. به نظر خودم اصلا سخت نیست. ریکت جی اس، توی اشل جهانی هم از باقی فریمورک ها محبوبتره.توی ریکت هم میشه از فانکشنال کامپوننت و هوک هاش استفاده کرد و هم کلاس کامپوننت. همینجا خوبه به شمایی که تازه دارید شروع میکنید بگم، هر آموزش ریکت یا نکست جی اسی که با کلاس کامپوننت آموزش میده، قدیمیه. توی دو سه سال اخیر که میشه 99 تا 1401، خود ریکت اومده خیلی روی هوک هاش کار کرده و حقیقتش به نظر من، کلاس کامپوننت دیگه به تاریخ پیوسته. نه اینکه زمان یادگیری، کلا ببوسیدش و بزاریدش کنار، باید بلدش باشید ولی بدونید که زمان کدنویسی واقعی، کلاس کامپوننت دیگه پوکیده. هر کسی هم که دفاع میکنه از کلاس کامپوننت، بدونید که خودش با کلاس کامپوننت یاد گرفته ولی زورش اومده که هوک ها رو یاد بگیره.هوک های ریکت، همه کاری براتون انجام میده. مهم ترین هوک ها، میشن useState، useEffect و useRef. همین سه تا رو یاد بگیرید، باقی هوک ها نیاز نیست. باقیشون رو به تدریج یاد میگیرید. تمرکزتون رو ابتدا بزارید روی این سه تا. کارایی هوک چیه؟ به صورت خلاصه اگه بخوام به شما بگم، شما برای تعریف متغیر توی ریکت، از useState استفاده میکنید.یوزرف برای رفرنس هست. مبحص رفرنس یه مقدار مفصله.کارایی یوز افکت چیه؟ ببینید، گاهی پیش میاد که میخوایم توی کامپوننت بگیم که هر وقت یک المانی مثلا متغیر x تغییر کرد، یه تابعی اجرا بشه. این زمان میایم و از یوزافکت استفاده می کنیم.useEffect(()=>{ console.log(x) },[ x ] )در واقع ساختار کدنویسی یوزافکت، شبیه ساختار setInterval هست. یه یوزافکت مینویسید، داخلش دو تا المان. اولیش یه تابع که این تابع، همون تابعی هست که میخواید با تغییر مورد نظر، اجرا بشه. دومین المان هم یه آرایه هست که توش، متغیر یا متغیرهای وابسته رو میزایم. منظورم از متغیر وابسته، همون متغیر x هست که توی مورد 3 گفتم.حالا از کدوم استفاده کنیم؟ببینید توی وب سایت، معمولا سئو مهمه، پس یا باید از angular universal استفاده کنیم یا nuxt.js یا next.jsپیشنهاد من نکست جی اس هست. سئوی بهتری که نکست جی اس نسبت به بقیه داره. راحتی فوق العادهش مثلا توی تعریف روت ها، سرعت خیره عالی نکست جی اس، بهینه ساز خودکار تصویر، ssr و ssg و کلی خوبیه دیگه باعث میشه که برنده این مبارزه، با اقتدار Next.js باشه.همین خوبی ها باعث شده که وب سایت هایی مثل دیجی کالا ، فرادرس، ژاکت، ترب ، تخفیفان و کلی سایت دیگه، توی همین یک سال اخیر(1400 تا 1401 ) کامل شیفت کنند روی نکست جی اس. این موضوع رو میتونید با استفاده از افزونه wapplyzer گوگل کروم ببینید. برای دیدن مقالات بیشتر و همچنین آموزش next.js ، میتونید به مرن فا مراجعه کنید.خلاصه‌ی مسیر فرانت رو اگه بخوام بهتون بگم، میشه HTMLCSSSCSSJAVASCRIPTREACT.JSNEXT.JSTAILWIND.CSSهمین دیگه. خسته نباشید. امیدوارم براتون مفید بوده باشه.