امروزه داشتن یک وب سایت خوب و با کیفیت، برای هر کسب و کاری ضروری است. وب سایتی که علاوه بر داشتن رابط کاربری و تجربه کاربری خوب، سئوی خوبی هم داشته باشد. برای رسیدن به رتبه یک گوگل، شما باید پیش از شروع پروژه، به فکر تکنولوژی مورد نیاز برای طراحی وب سایت خود باشید.
امروزه یکی از بهترین و سئوفرندلی ترین ابزارها برای طراحی وب سایت، نکست جی اس است.
Next js چیست؟
نکست جی اس فریمورکی از کتابخانه react js است که با برطرف کردن نقاط ضعف آن، پا به عرصه طراحی سایت گذاشته است. فریمورکی که شما میتوانید به کمک آن، به صورت فول استک( مرن استک ) یک اپلیکیشن MVC را از صفر تا صد طراحی کنید.
Mern stack چیست؟
اپلیکیشن مرن استک به اپلیکیشنی گفته میشود که به کمک دیتابیس Mongo، بک اند Express.js و فرانت اند React.js طراحی شده باشد.
اپلیکیشن هایی که ما طراحی میکنیم، بر مبنای همین موارد هستند یعنی فرانت اند پروژه های ما، معمولا با Next.js و Tailwind.css و بک اند آنها هم با Express.js و MongoDB است.تمامی این موارد، در ادامه این مقاله توضیح داده خواهند شد.
ویژگی های next.js
فریمورک نکست جی اس، مجموعه ای از ویژگی ها را در اختیار کاربران می گذارد که برای طراحی سایت، بسیار مفید هستند که در ادامه، به برخی از آنها می پردازیم.
افزایش عملکرد صفحات وب ( performance )
یکی از پارامترهای مهم برای سنجش ظاهر وب سایت، سرعت صفحات، Ui / Ux صفحه و…، پرفومنس صفحات است که شما میتوانید این موضوع را به کمک ابزارهایی مثل page speed insight بررسی کنید.
انتخاب نکست جی اس به عنوان ابزار طراحی سایت شما، باعث می شود که از این بابت، خیالتان کاملا راحت باشد.
Next.js با کنترل تعداد و حجم فایل های جاوااسکریپتی لود شونده از بک اند و همچنین تقسیم رندر این فایلها بین فرانت اند و بک اند، باعث می شود که به صورت کلی، عملکرد صفحه افزایش پیدا کند. به این موضوع client side rendering و server side rendering گفته می شود.
افزایش سئوی صفحات
یکی از پارامترهای بسیار مهم در مورد نکست جی اس، افزایش seo صفحات است. برای سئو در نکست جی اس ، شما نیاز به کار خاصی ندارید. چرا که این فریمورکی، بخش بزرگی از موارد سئویی را به صورت پیشفرض برایتان رعایت می کند. مثلا
- یکی از موارد مهم در صفحات وب، حجم و اندازه و کیفیت تصاویری است که لود می شود. در نکست جی اس، ما تگی به نام Image داریم که این تگ، به صورت خودکار فرمت تصاویر وب سایت را به WebP تبدیل می کند. همچنین به کمک پارامتر sizes شما میتوانید اندازه و حجم تصویری که از سرور لود می شود را کنترل کنید. علاوه بر این، شما میتوانید به کمک پارامتر priority، لیزی لود شدن تصویر را کنترل کنید.
- نکست جی اس، به کمک سیستم SSR و SSG و CSR ، امکان لود اطلاعات هم در سمت سرور و هم در سمت کلاینت را به شما می دهد. این موضوع باعث می شود که شما بتوانید برای لود اطلاعاتی که نیاز به سئو دارند، از متدهای سرور ساید استفاده کنید. همچنین برای بخش هایی که چندان اهمیت سئویی ندارد، از متدهای کلاینت ساید استفاده کنید. این تقسیم بندی باعث می شود که سرعت لود صفحات به صورت میانگین افزایش پیدا کنند.
- سرعت بالای نکست جی اس به گونه ای است که اگر استراکچر کدنویسی آن به صورت کامل درست رعایت شود، سرعت لود صفحات شما زیر 1.5 ثانیه خواهد بود. لود تنبل تصاویر، مدیریت کلاینت و سرورساید بودن لود اطلاعات، کاهش حجم تصاویر، بدون رفرش بودن صفحات سایت نکست جی اسی و… از عواملی هستند که باعث افزایش رتبه seo سایت های نکست جی اسی می شوند.
تجربه لذت بخش توسعه
اگر کدنویسی یک وب سایت ریکتی و یک وب سایت نکست جی اسی را مقایسه کنیم، به سادگی متوجه می شویم که با اینکه next.js پیشرفته تر از ریکت جی اس است اما کدنویسی با آن، ساده تر است.
این فریمورک، علاوه بر جاوااسکریپت، از تایپ اسکریپت هم پشتیبانی میکند که این موضوع، باعث افزایش امنیت پروژه شما خواهد شد.
فول استک بودن
یکی دیگر از مزایای این فریمورک، توانایی برنامه نویسی فرانت اند در کنار بک اند یک پروژه وب است. یعنی در یک پروژه نکست جی اسی، شما نه تنها میتوانید تمامی صفحات و کامپوننت های وب سایت خود را طراحی کنید. بلکه میتوانید به دیتابیس وصل شوید، مدل بسازید، API طراحی کنید و…
قابلیت کش کردن اطلاعات در نکست جی اس
یکی از موارد جذاب در مورد نکست جی اس، توانایی کش کردن اطلاعات از پیش لود شده است. یعنی اینکه اگر مثلا در یک صفحه، 5 تصویر وجود دارد و کاربر یک بار به صفحه آمده و تصاویر را لود کرده؛ دفعه بعد که دوباره به این صفحه می آید، نیاز نیست که دوباره به سرور ریکوئست بزند و تک تک این تصاویر را لود کند. این تصاویر در حافظه مرورگر کاربر ذخیره شده و سری دوم، از حافظه مرورگر کاربر، اطلاعات فراخوانی می شود.
این موضوع باعث افزایش سراع وب سایت خواهد شد.
پشتیبانی از انواع فریمورک های استایل دهی
در نکست جی اس، ما میتوانیم از انواع متدهای استایل دهی استفاده کنیم. هم میتوانیم CSS خام بنویسیم. هم میتوانیم از SCSS استفاده کنیم و هم میتوانیم از فریمورک هایی مثل تیلویند و بوت استرپ استفاده کنیم. علاوه بر تمامی این موارد، از CSS in JS هم استفاده کنیم.
البته پیشنهاد ما، استفاده از tailwind css است.
Tailwind css چیست؟
تیلویند سی اس اس یکی از محبوبترین فریمورک های طراحی فرانت اند است. در واقع این ابزار، برای استایل دهی به صفحات به کار می رود و اگر شما این فریمورک را به پروژه خود اضافه کنید، سرعت طراحی صفحاتتان بسیار افزایش می یابد.
Tailwind.css بر مبنای مفهوم utility-first عمل می کند که به توسعه دهندگان اجازه می دهد که بدون نوشتن کدهای CSS خام و فقط با دادن چند کلاس به تگ های JSX یا HTML، به استایل هدف دسترسی پیدا کنند.
نصب پروژه نکست جی اس
نصب یک پروژه نکست جی اسی، بسیار ساده است.
در مرحله اول شما باید node را نصب کنید. به سایت node.js بروید و فایل آن را دانلود کرده و سپس نصب کنید.
در مرحله بعد باید یک پوشه برای پروژه انتخاب کنید.
در مرحله سوم باید در پوشه مورد نظر، کامند پرامپت را باز کنید. برای این کار، میتوانید در نوار آدرس بالای صفحه، به جای آدرس پوشه در سیستم، عبارت cmd را بنویسید و انتر بزنید. خیلی ساده کامند پرامپت باز می شود.
در مرحله بعد باید این دستور را در کامند پرامپت بنویسید و انتر بزنید » npx create-next-app@latest
پس از چند لحظه، چند سوال از شما پرسیده می شود و که با پاسخ دادن به آنها، پروژه next.js شما نصب می شود.
مفهوم SPA یا اپلیکیشن های تک صفحه ای
مفهوم single page applications، مفهومی بود که با ریکت جی اس به اوج خود رسید. مفهومی که بسیار باعث افزایش سرعت طراحی وب اپلیکیش ها شد.
در این گونه اپلیکیشن ها، ما همیشه پوشه ای به نام components داریم که یک سری فایل در آن قرار دارد. در واقع مثلا اگر ما یه فروشگاه داشته باشیم و در این فروشگاه، باکس محصول در صفحه اصلی، صفحه تک محصول، صفحه فروشگاه و… استفاده شده باشد؛ نیاز نیست که در تک تک این صفحات، چندین بار این باکس را کد بزنیم؛ بلکه یک فایل product-box در پوشه کامپوننت ها ایجاد میکنیم. کد مربوطه را در همین فایل مینویسیم و سپس این فایل را در تمامی بخش ها فراخوانی میکنیم.
کتابخانه react.js و فریمورک نکست جی اس هم از همین منطق استفاده میکنند.
جمع‌بندی
Next.js به عنوان یک فریمورک مدرن و قدرتمند، به برنامه نویسان اجازه می‌دهد تا وب‌سایت‌هایی بسیار با کیفیت با قابلیت SSR، سرعت بالا، lazy load و… را طراحی کنند. این فریمورک تجربه کاربری بهتری را فراهم میکند و عملکرد پروژه‌های وب را ارتقا می‌دهد. سیستم مسیریابی (routing) Next.js، توسعه صفحات جدید را آسان میکند و همچنین، پشتیبانی از API داخلی، TypeScript و Babel آن را به ابزاری انعطاف‌پذیر و کاربردی تبدیل کرده است.
با این حال، معایبی همچون پیچیدگی در پیکربندی، برخی ناسازگاری‌ها با کتابخانه‌های جانبی و همچنین آپدیت های پی در پی، می‌تواند مانعی برای برخی توسعه‌دهندگان باشد. البته باید توجه داشت که فعلا، مزایای نکست جی اس، نسبت به معایب آن بسیار بیشتر است و همین موضوع باعث شده که بسیاری از کسب و کارها، این فرمیورک را انتخاب کنند.
در نهایت، Next.js یک انتخاب عالی برای توسعه‌دهندگانی است که به دنبال ایجاد برنامه‌های وب مقیاس‌پذیر، سریع و seo friendly هستند. با استفاده از این فریمورک، توسعه‌دهندگان می‌توانند از مزایای server side rendering و static side generation لذت ببرند، در حالی که ساختار پیشرفته آن به تیم‌های توسعه امکان می‌دهد تا پروژه‌ها را به سرعت توسعه و مدیریت کنند.
