در دنیای امروز، وب اپلیکیشن ها مهمترین ابزار برای کسب درآمد هستند؛ یعنی شما هر کسب و کاری که دارید، باید این کسب و کار را در دنیای وب هم ارائه کنید تا بتوانید درآمد خوبی کسب کنید.
وب اپلیکیشن های مختلفی وجود دارد مثل وب سایت ها، اپلیکیشن های موبایل، PWA ها و… که شما باید با توجه به نوع کسب و کار خود، وب اپلیکیشن مناسب کسب و کارتان را پیدا کنید.
اگر هدف شما طراحی یک وب سایت با بهترین سرعت، سئو، بهینگی و به طور کلی بهترین کیفیت است، پیشنهاد ما نکست جی اس است.
Next js چیست؟
نکست جی اس یک فریمورک بر مبنای کتابخانه react js است که عموم نقاط ضعف ریکت را از بین برده است. شما می توانید به صورت ویدئویی، آموزش next js ما را ببینید.
مزیت های نکست جی اس
1) اولین شاخصه جذاب این فریمورک، سادگی آن است. در واقع درست است که این فرمیورک بر مبنای ریکت جی اس نوشته شده است اما بسیار ساده تر از آن است. همین موضوع باعث شده که مدت زمان پروژه های next js ای، بسیار کمتر از پروژه های ریکت جی اسی است.
2) دومین شاخصه جذاب، فول استک بودن next js است. یعنی شما میتوانید در یک فریمروک، کل وب اپلیکیشن خود را طراحی کنید. هم فرانت اند و هم بک اند. فرانت اند این فریمورک بر مبنای react.js و بک اند آن، بر مبنای فریمورک Express js نوشته شده است. اگر میخواهید ظرف دو ساعت، اکسپرس را یاد بگیرید، به وب سایت ما سر بزنید. آموزش node js
در واقع ما در نکست جی اس، یک پوشه app داریم که کل صفحات و کامپوننت های وب سایت، در این پوشه طراحی می شوند.
درون این پوشه ی app، پوشه ای به نام api وجود دارد که کل بک اند apiهای مورد نیاز وب اپلیکیشن، در این پوشه طراحی می شوند. البته در عکس بالا وجود ندارد اما خیلی ساده میتوانید آن را اضافه کنید.
ساختار پروژه های نکست جی اسی، همان ساختار معماری MVC است.
در این ساختار، برای ایجاد موجودیت ها، از Model استفاده میکنیم. در نکست جی اس هم، پوشه ای به نام models داریم که کلیه موجودیت های اپلیکیشن، در این پوشه ایجاد می شوند. مثلا اگر بخواهیم مدل محصول رو ایجاد کنیم، باید درون این پوشه، یک فایل به نام product.js بسازیم.
در این ساختار، منظور از حرف V عبارت view است. ویو در واقع ظاهر وب سایت است که شامل صفحات و کامپوننت ها می شود که همانطور که بالاتر توضیح داده شد، در پوشه اپ نکست جی اس، تمامی موارد پوشش داده می شود.
حرف آخر از عبارت معماری ام وی سی، C است که ابتدای کلمه Controller است. کنترلر نماد بک اند پروژه است که همانطور که بالاتر توضیح داده شد، در پوشه api نکست جی اس، این موضوع پوشش داده می شود.
3) سومین شاخصه فریمورک next.js سئوی درجه یک آن است. این موضوع چندین دلیل دارد که پایین تر، این موضوع را بررسی میکنیم.
A) دلیل اول، مبحث SSR و SSG است.
CSR چیست؟
اگر شما با ریکت جی اس کار کرده باشید، قطعا با CSR آشنا هستید. Client side rendering یعنی فراخوانی داده ها از بک اند، به صورتی که در فرانت، رندر صفحه انجام شود.
مثلا UseEffect یا SWR متدهای CSR هستند. علت این موضوع این است که ابتدا، صفحه خالی به کاربر نمایش داده می شود. سپس useEffect زده می شود و اطلاعات از بک اند فراخوانی می شود و در نهایت در دام مجازی نمایش داده می شود. نمایش data در دام مجازی، به این معنی است که این اطلاعات در دام حقیقی صفحه نمایش داده نمی شود یا به عبارت دیگر، اطلاعاتی که در صفحه دیده می شود، در source code صفحه نیست. در نتیجه ربات های گوگل، اصلا کدی نمی بینند که بخواهند به این کدها، رتبه سئو بدهند.
SSR در next js چیست؟
اس اس آر یا server side rendering به معنی پردازش صفحات در سمت سرور است. یعنی در پروژه نکست جی اسی، علاوه بر CSR از SSR هم می توانید استفاده کنید. در Next js 12، متدی که برای ssr استفاده می شد، getServerSideProps بود و اکنون، در نکست جی اس 13 و 14 از متد getData استفاده میکنیم.
async function getData() {
const res = await fetch(‘https://api.example.com/…’,{cache:”no-store”})
if (!res.ok) {
throw new Error(‘Failed to fetch data’)
}
return res.json()
}
تفاوت متد SSR با متد CSR در این است که داده ها در دام مجازی نیستند. در واقع زمانی که آدرس صفحه در مرورگر کاربر وارد می شود، ابتدا اطلاعات از سرور و دیتابیس فراخوانی می شود. سپس در صفحه جایگذاری می شود و در نهایت صفحه ی دارای اطلاعات به کاربر نمایش داده می شود.
همین موضوع باعث می شود که اطلاعات در دام حقیقی صفحه وجود داشته باشند و ربات های گوگل، با دانلود این کدها، به صفحه رتبه سئو میدهند.
B) دومین دلیل عالی بودن سئوی NEXT.JS سرعت بالای آن است. پروژه های نکست جی اسی به شدت بهینه هستند. یعنی وقتی نسخه نهایی وب سایت نکست جی اسی را میبینید، حجم صفحات عموما کمتر از 60 کیلوبایت است. نتیجه ی این حجم پایین، سرعت لود بسیار بالای این صفحات خواهد بود و همانطور که میدانید، یکی از مهمترین فاکتور های سئویی هر وب سایتی، سرعت لود صفحات آن است.
در واقع در یک وب سایت next.js ای، اگر صفحه، دیتایی از دیتابیس لود نکند، سرعت لود آن تقریبا 1 ثانیه خواهد بود اما اگر لود بکند، بین 1 تا 3 ثانیه خواهد بود.
C) سومین دلیل عالی بودن سئوی نکست جی اس، آپتیمایز بودن تصاویر در نکست جی اس است. در nex.js ما برای نمایش تصاویر از تگ Image استفاده میکنیم که این تگ، با تگ img مخصوص html بسیار متفاوت است.
بررسی مزیت های تگ Image در next.js
A) تگ ایمیج نکست جی اس، به صورت خودکار تصاویر رو بهینه می کند. یعنی وقتی شما یک عکس را در وب سایت نکست جی اسی نمایش میدهید، به صورت خودکار، فرمت آن به WebP تغییر خواهد کرد و همین موضوع باعث کاهش شدید حجم تصویر، بدون کاهش کیفیت آن خواهد شد.
B) یکی از خاصیت های این تگ، sizes است. این آیتم به شما کمک میکند که اندازه تصویری که از سرور لود می شود را کنترل کنید. یعنی اگر یک تصویر 2000*1000 پیکسلی را در هاست ذخیره کرده اید، نکست جی اس این امکان را به شما می دهد تا در یک جا، این عکس را با اندازه 4000*2000 پیکسل لود کنید و در جای دیگر، همان عکس را با اندازه 600*300 . این موضوع به شدت روی حجم عکس لود شده تاثیر دارد که نتیجه این کاهش حجم، کاهش حجم صفحه خواهد بود. همانطور که بالاتر توضیح داده شد، کاهش حجم صفحه باعث افزایش سرعت خواهد شد. در نتیجه SEO ی بسیار خوبی را تجربه خواهید کرد.
C) شما امکان lazy load تصاویر را هم در next js دارید. یعنی اگر در صفحه شما، 20 تصویر وجود دارد، تا زمانی که کاربر اسکرول نکرده و به عکس 18 ام نرسیده، این عکس لود نمی شود. در واقع اگر کاربر ابتدای صفحه باشد، همان عکس های ابتدایی لود می شوند. هر چقدر که اسکرول کند، عکس های بعدی هم لود می شوند.
این موضوع باعث می شود که سرعت لود اولیه صفحات وب سایت شما، بسیار افزایش یابد. در نتیجه سئوی بهتری خواهید داشت.
برای دیدن آموزش seo در next js کلیک کنید.
4) چهارمین شاخصه جذاب nextjs انواع روت بندی است. در واقع ما در نکست جی اس، 4 نوع روت بندی داریم.
A) اولین نوع روت بندی، static routing است. این نوع از صفحه بندی، به صفحات استاتیک سایت مربوط هستند. صفحاتی مثل صفحه اصلی، درباره ما، فروشگاه ، تماس با ما و…
برای ایجاد این نوع از صفحات، باید در پوشه app نکست جی اس، یک پوشه ایجاد کنید مثلا به نام about و در این پوشه، یک فایل page.jsx بسازید.
B) نوع دوم روت بندی، dynamic routing است. روت های داینامیک را برای صفحاتی مثل صفحه تک محصول، تک پست، تک فیلم و… استفاده میکنیم.
در واقع برای اگر به آدرس صفحه های یک وب سایت فروشگاهی توجه کنید، در یک فروشگاه، ما example.com/shop را داریم.
در این فروشگاه، آدرس صفحه هر کدام از محصول ها هم همین url را دارند ولی به همراه نام آن محصول. مثلا example.com/shop/product1 . به این گونه صفحات، صفحات داینامیک گفته می شود.
برای ایجاد یک صفحه داینامیک، باید کل روند استایتک روتینگ را تکرار کنیم. فقط اسم پوشه را باید داخل کروشه بگذاریم. مثلا یک پوشه به نام shop برای صفحه فروشگاه داریم. داخل این پوشه باید پوشه به نام [slug] بسازیم. داخل این پوشه، فایل page.jsx
C) نوع سوم روت بندی، catch all route است. برای ایجاد یک کچ آل روت باید عین داینامیک روتینگ عمل کنیم. فقط اسم پوشه را به این صورت بگذاریم: [slug…]
تفاوت catch all route و dynamic route در next.js
تفاوت کچ آل روت باید داینامیک روت در این است که در داینامیک روت، شما فقط به یک لایه دسترسی دارید. یعنی صفحه تک محصول؛ اما در کچ آل روت به بینهایت لایه زیرین دسترسی دارید.
D) نوع آخر روتینگ نکست جی اس مخصوص بک اند است. برای طراحی یک روت بک اندی، باید در پوشه api نکست جی اس، یک پوشه بسازید مثلا posts و درون این پوشه، یک فایل به نام route.js بسازید.
آدرس api شما به این صورت خواهد بود: example.com/api/posts
5) شاخصه پنجم نکست جی اس، بازار کار آن است. این فریمورک، بازار کار به شدت رو به رشدی دارد. قیمت یک پروژه next.js از 1000 دلار شروع می شود. در ایران هم پروژه ها از 15 میلیون تومن شروع می شوند.
اگر به سایت های ثبت آگهی سری زده باشید قطعا میبینید که تا چند سال پیش، بازار کار react js و vue js نسبتا خوب بوده اما با توجه به ویژگی های خوب نکست جی اس، نه تنها پروژه های ریکت و ویو، بلکه بخش بزرگی از پروژه های وردپرسی هم به nextjs تبدیل شده اند. یعنی روز به روز وب سایت های نکست جی اسی رو به رشد هستند و تعدادشان رو به افزایش است.
پیشنهاد می شود که همین امروز نکست جی اس را شروع کنید. ما تا ورود شما به بازار کار، کنارتان هستیم. در کانال تلگرام هم میتوانید خیلی ساده، آگهی پروژه های نکست جی اسی را پیدا کنید و وارد فضای کسب درآمد شوید.
جمع بندی:
امروزه داشتن یک وب سایت خوب، درآمد کسب و کار شما را تضمین میکند. شما میتوانید با یادگیری next js و طراحی وب سایت با این فریمورک، به بهترین درآمد برسید. پیشنهاد ما آموزش next js مرن فا است. اولین مجموعه ای که به صورت تخصصی به نکست جی اس اختصاص پیدا کرده است.
نظرات کاربران