Next js یک فریمورک فول استک برای کدنویسی یک وب سایت فوق العاده سئوفرندلی است. برای اینکه به صورت دقیق بفهمیم که نکست جی اس چیست، باید از پایه شروع کنیم. از html و css و javascript

بررسی قدم به قدم next js

HTML چیست؟

HTML مخفف Hyper Text Markup Language است. یک ابزار برای برنامه نویسی صفحه وب. در واقع ما وقتی یک صفحه اینترنتی را باز میکنیم، مرورگر ما یک فایل اچ تی ام ال را دانلود میکند و به ما نمایش می دهد.

CSS چیست؟

ابزار html فقط کارکرد طراحی اجزا را دارد. یعنی فقط این را تعیین می کند که چه مواردی باید در صفحه نمایش داده شود. مثلا عنوان، متن، عکس، فرم، ویدئو و…

ابزار دیگری به نام CSS وجود دارد که کارکرد استایل دهی دارد. یعنی تعیین می کند که هر عضو از صفحه باید چه اندازه ای داشته باشد، چه رنگی، کجا قرار بگیرد و…

مثلا در همین صفحه، رنگ متن سیاه و رنگ پس زمینه سفید است.

لطفا دقت داشته باشید که بر مبنای CSS یک سری فریمورک هم نوشته شده است. یکی از این فریمروک ها، تیلویند است که ما هم از همین فریمورک در نکست جی اس استفاده میکنیم. این موضوع در دوره ویدئویی که در ادامه مقاله معرفی میشود به صورت کامل و رایگان آموزش داده شده است.

JAVASCRIPT چیست؟

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

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

در واقع جاوااسکریپت مغز صفحه وب است و کارکرد برنامه نویسی و تعامل پذیر کردن صفحه را دارد.

React js چیست؟

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

SPA چیست؟

اس پی ای یا single page application به وب سایت هایی گفته می شود که فقط یک صفحه دارند. ریکت جی اس هم یکی از همین spa ها هست.

در واقع صفحه در یک وب سایت تک صفحه ای( SPA )، متشکل از چندین کامپوننت است. یعنی شما می توانید هر بخش از صفحه را در یک فایل جدا کدنویسی کنید، سپس در صفحه مورد نظر، import کنید.

حال تغییر صفحه چگونه انجام می شود؟ با زدن روی یک لینک و ایجاد درخواست تغییر صفحه، فقط کامپوننت های صفحه اول حذف و کامپوننت های صفحه دوم بارگذاری می شوند. در نتیجه بدون رفرش، محتوای صفحه تغییر می کند.

Next js چیست؟

همراه با تمامی خوبی های ریکت جی اس، چند ایراد هم وجود دارد. مثلا نداشتن سئو، مثلا سرعت، مثلا آبتیمایز نبودن وب سایت و…

مدتی پس از انتشار react.js، فریمورکی با نام نکست جی اس منتشر شد. این فریمورک نه تنها بخش خوبی از مشکلات ریکت را حل کرد، بلکه امکانات جدیدی هم به پروژه اضافه کرد که در ادامه این پست، بررسی می شود.

وب سایت نکست جی اس

آموزش نصب پروژه Next js

لطفا دقت داشته باشید که تمامی موارد برای آموزش 0 تا 100 next js با تمامی جزئیات را میتوانید سایت ما ببینید.

برای ایجاد یک پروژه نکست جی اسی، باید یک پوشه از لپتاپ را انتخاب کنید. سپس این پوشه را در کامند پرامپت باز کنید. برای اینکار می توانید از این روش استفاده کنید. 1. پوشه را باز کنید. 2. در بالای صفحه باز شده، در قسمت آدرس پوشه، عبارت cmd را تایپ کنید و سپس انتر بزنید. با انجام اینکار خیلی ساده کامند پرامپت در پوشه مدنظر باز میشود.

در مرحله بعد باید عبارت npx create-next-app@latest را در کامند پرامپت باز شده بنویسید و انتر بزنید. اگر کمی صبر کنید، نصب پروژه شروع می شود. چند سوال در مورد نحوه نصب پروژه از شما پرسیده می شود و با پاسخ دادن به این سوال ها، خیلی ساده پروژه شما آماده می شود.

پس از این موارد، میتوانید پروژه را در vscode باز کنید و با زدن npm run dev در بخش ترمینال وی اس کد، پروژه اجرا می شود.

بررسی صفحات در پروژه Next js 14

در پروژه next.js پوشه ای به نام app وجود دارد. کل صفحات وب سایت در این پوشه ساخته می شوند. یعنی اگر مثلا شما بخواهید برای نمایش همه محصولاتتان، یک صفحه فروشگاه داشته باشید، باید در این پوشه، یک پوشه با نام shop بسازید و سپس یک فایل page.jsx در این پوشه. سپس با نوشتن کد زیر در این فایل، صفحه فروشگاه شما آماده هست.

پس از اجرا شدن پروژه، اگر شما آدرس دامنه خود و سپس آدرس صفحه را در گوگل بزنید، خیلی ساده صفحه را میتوانید ببینید. یعنی localhost:3000/shop

همانطور که بالاتر توضیح داده شد، برای ایجاد هر صفحه، باید یک فایل page.jsx تعریف کنیم. اگر به ساختار پروژه next js دقت کنید، می بینید که برای صفحه اصلی هم، یک فایل page.jsx به صورت پیشفرض وجود دارد. یعنی دقیقا زیر مجموعه پوشه اپ، ما یک فایل page.jsx داریم که به صفحه اصلی سایت اختصاص داده شده است.

استایل دهی در Next js

مبحث css در نکست جی اس بحث مفصلی است. شما میتوانید به چندین صورت، استایل دهی را در پروژه خود داشته باشید. مرحله صفرم کار، این است که یک پوشه styles به روت اصلی پروژه نکست جی اس اضافه کنید. حال میرسیم به راه های استایلینگ

راه اول سی اس اس خام است. یعنی شما میتوانید به ازای هر صفحه یا کامپوننت وب سایت، یک فایل استایل ایجاد کنید. یعنی اگر مثلا میخواهید برای صفحه اصلی سایت خود، یک فایل CSS تعریف کنید، میتوانید یک فایل mainpage.module.css تعریف کنید. لطفا دقت داشته باشید. هر فایل سی اس اسی که تعریف میکنید حتما باید با module.css تمام شود.

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

Import style from “../styles/mainpage.module.css”

پس از این ایمپورت، باید به هر تگ، کلاس مورد نظر را بدهید. مثلا اگر نام کلاس css تعریف شده، عبارت main_class باشد، باید به تگ مورد نظر، در بخش classname تگ باید عبارت main_class را هم بگنجانید.

راه دوم استفاده از SCSS است. یکی از راه های استایل دهی هست. که برای بررسی آن، میتوانید در یوتوب بیشتر سرچ کنید.

راه سوم استفاده از تیلویند سی اس است. ساده ترین و بهترین راه، استفاده از فریمورک Tailwind.css است که اغلب در پروژه های نکست جی اسی، از این فریمورک استفاده می شود. در آموزش نکست جی اسی که بالاتر معرفی و لینک داده شد، آموزش تیلویند هم به صورت کامل آمده است…

تگ Image در Next js

همانطور که در ابتدای این مقاله گفته شد، یکی از ویژگی های عالی نکست جی اس، آپتیمیاز کردن عکس است. در این فریمورک، علاوه بر تگ های HTML، تگی به نام Image وجود دارد که برای نمایش تصاویر، باید از آن استفاده شود.

از خوبی های تگ ایمیج نکست جی اس، میتوان به این موارد اشاره کرد. 1. آپتیمیاز کردن تصاویر 2. تبدیل خودبه‌خود فرمت عکس به WebP که این موضوع باعث کاهش حجم عکس می شود. 3. ریسپانسیو کردن عکس با توجه به آیتم Width و height 4. کنترل اندازه تصویری که در صفحه لود می شود به کمک آیتم sizes . 4. کنترل کیفیت عکس لود شده 5. کنترل درصد رنگی و سیاه و سفید بودن رنگ و کلی مورد دیگر.

تگ Link در Next js

برای جابه‌جایی بین صفحات وب سایت در یک پروژه نکست جی اسی، باید از تگ Link استفاده کنیم. این تگ به جای تگ a در اچ تی ام ال استفاده می شود و امکان رفرش شدن صفحه در زمان تغییر صفحه را از بین میبرد.

بررسی سئو در نکست جی اس

اطلاعات در یک صفحه نکست جی اسی به دو دسته تقسیم می شوند. بخشی از این اطلاعات به صورت استاتیک در صفحه وجود دارند. مثلا اطلاعاتی که در صفحه تماس با ما وجود دارد یا مثلا اطلاعات موجود در فوتر سایت.

بخش دیگر اطلاعات، اطلاعاتی هستند که از بک اند لود می شوند. بخشی از این اطلاعات، به کمک روش های CSR لود می شوند. مثلا به کمک هوک useEffect یا پکیج SWR . لطفا دقت داشته باشید که هر اطلاعاتی که به کمک این موارد لود بشود، سئو ندارد.

حال چگونه اطلاعات را باید لود کنیم تا رتبه سئو داشته باشیم؟ به کمک روش گت دیتا

آموزش GetData در Next js

گت دیتا در واقع یک مکانیزم فراخوانی دیتا هست. یعنی همانطور که ما به کمک SWR ریکوئست میزنیم و اطلاعات را به کمک سرور از دیتابیس فراخوانی می کنیم، به کمک مکانیزم getData هم میتوانیم اطلاعات را فراخوانی کنیم. گت دیتا مکانیزم فراخوانی دیتایی هست که مخصوص فریمورک Next js می باشد و به کمک این روش، سئوی صفحات وب سایت شما، به صورت کامل حفظ می شود. مکانیزم گت دیتا، شامل سه مختلف است. SSR، SSG

تفاوت های SSG و SSR در Next js

لطفا دقت کنید.

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

SSG چیست؟

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

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

SSR چیست؟

اس اس آر یا سرور ساید رندرینگ یکی دیگر از روش های قرار دادن دیتا در صفحه نکست جی اسی در سمت سرور است.

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

نکته: در واقع تفاوت SSR و SSG در زمان فراخوانی دیتا از دیتابیس است. یعنی اگر شما بخواهید که دقیقا در همان لحظه که کاربر مثلا برای دریافت اطلاعات یک محصول ریکوئست زد، اطلاعات را دیتابیس بخوانید و به مرورگر کاربر بفرستید، باید از روش اس اس آر استفاده کنید. در واقع در این روش، اطلاعات کاملا تازه و به روز هستند.

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

هر وقت هر کسی برای دریافت اطلاعات محصول ریکوئست زد، همان صفحه فرستاده می شود.

با توجه به مواردی که بالاتر توضیح داده شد، می توان این نتیجه را گرفت که روش SSG اطلاعاتش به روز نیست اما چون نیازی به ریکوئست زدن به دیتابیس را ندارد، پاسخ سریعتری به کاربر می دهد نسبت به روش SSR

نحوه کد نویسی SSG و SSR در Next js

اگر میخواهید اطلاعات را به صورت اس اس جی لود کنید باید از این کد استفاده کنید.

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

نکته: معمولا از روش SSR در وب سایت های نکست جی اسی استفاده می شود. علت این موضوع هم به روز بودن اطلاعات است.

پوشه API در فریمورک Next js ( بک اند نکست جی اس )

یکی از مهمترین نکاتی که باعث برتری نکست جی اس نسبت به ریکت جی اس شده است این است که nextjs امکان مدیریت بک اند در کنار فرانت اند را در یک پروژه به شما می دهد.

یعنی شما در یک پروژه نکست جی اسی، یک پوشه api دارید که در این پوشه، کل بک اند مورد نیاز اپلیکیشن را می توانید بنویسید.

اگر شما در پوشه api نکست جی اس، یک پوشه با نام products تعریف کنید. سپس داخل این پوشه، فایلی با نام route.js تعریف کنید؛ میتوانید api مربوط به فراخوانی کلیه محصولات از دیتابیس را طراحی کنید. یادگیری بک اند نکست جی اس 13

مقایسه سرعت Next js و React js

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

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

در واقع در یک سایت ریکتی، وقتی url یک صفحه زده می شود، ابتدا صفحه خالی لود می شود، سپس به کمک یوزافکت و… درخواستی به بک اند فرستاده می شود و اطلاعات از بک اند به فرانت فرستاده می شود و پس دریافت در فرانت، اطلاعات در صفحه به کاربر نمایش داده می شود.

اما دیتا در سایت next.js ای به چه صورتی لود می شود؟ کاربر URL را وارد می کند. در سرور، کل اطلاعات فراخوانی می شود و در صفحه بارگذاری می شود، سپس صفحه ی تکمیل شده به مرورگر کاربر فرستاده می شود.

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

نوع دوم دیتا، دیتای استاتیک است. یعنی دیتایی که از قبل در صفحه قرار داده شده است و هیچ نیازی به ریکوئست زدن به سرور ندارد.

در این زمینه هم میتوان گفت که یک سایت nextjs ای، بسیار سریعتر از یک وب سایت ریکتی است. علت این موضوع، وجود تگ های Link و Image است که باعث افزایش سرعت صفحه هم می شوند.

در مجموع در هر دو نوع دیتا، سرعت پروژه نکست جی اسی بیشتر از سرعت پروژه ریکت جی اسی است. در نتیجه پیشنهاد می شود که نکست جی اس را از همین امروز شروع کنید.

جمع بندی:

امروزه نکست جی اس، بهترین و سریعترین و seo فرندلی ترین فریمورک طراحی وب سایت است که شما میتوانید با یادگیری next.js می توانید به بهترین رتبه گوگل در زمینه کاری خود برسید. Next js به کمک ssr و ssg بهترین سئو را در کنار سرعت بالا در اختیارتان قرار می دهد.