Next.js چیست و چه کاربردی دارد؟

در این مقاله می خواهیم با فریم ورکی برای React  به نام Next.js آشنا شویم! احتمالا خواندن این جمله برایتان عجیب باشد چرا که react خودش یک کتابخانه است بنابراین چطور می توانیم یک فریم ورک را برایش داشته باشیم!؟ در این مقاله به طور مفصل به این سوال پاسخ و دلایل استفاده از Next.js را نیز توضیح می دهیم.اگر به وب سایت Next.js بروید می بینید که جمله بزرگی در آن نوشته شده است:

این جمله به معنی این است که next یک فریم ورک react برای مرحله بهره برداری (production) است. می توان این جمله را به صورت fullstack frarmework for react نیز نوشت، یعنی یک فریم ورک fullstack (شامل backend و frontend) برای کتابخانه react!

اگر از این جملات فنی دور بشویم، می توانیم next.js را به زبان ساده تعریف کنیم: فریم ورکی که از react استفاده می کند و تمام برنامه شما (سمت سرور و سمت کلاینت) را برایتان می سازد. این فریم ورک قابلیت های بسیار بیشتری را نسبت به react به شما می دهد و در واقع react را توسعه می دهد. توجه داشته باشید که در next.js هنوز هم کد react می نویسیم اما همانطور که گفتم قابلیت های آن بسیار زیاد و قوی شده است و برای هر مسئله کوچکی نیاز به استفاده از کتابخانه های خارجی ندارید.

Next.js چیست و چرا از آن استفاده می کنیم؟

اگر در زمینه توسعه وب کار می کنید، به احتمال زیاد نام Next.js را شنیده اید یا در مورد آن کنجکاو هستید. Next.js چیزی است که اغلب به عنوان «فریمورک متا» شناخته می شود، زیرا فریم ورکی است که بر اساس یک یا چند فریمورک دیگر ساخته شده است. Next.js بر اساس React ساخته شده است. به‌طور ساده، Next.js یک فریم ورک React برای توسعه برنامه‌های جاوا اسکریپت تک صفحه‌ای است. مزایای این فریم ورک، هم برای برنامه های کاربردی client و هم برای تیم توسعه بسیار زیاد است.سایت ها و برنامه هایی که سریع نیستند انتظارات ما را برآورده نمی کنند و آن ها را نمی پسندیم. یکی از مهم ترین مزایای Next.js  سرعت و عملکرد فوق العاده آن است.

Next.js یک فریم ورک جاوا اسکریپت است که به شما امکان می دهد وب سایت های ایستا بسیار سریع و بسیار کاربر پسند و هم چنین برنامه های کاربردی وب را با استفاده از React بسازید. این ویژگی به Next.js اجازه می‌دهد تا برنامه‌های ترکیبی بسازد که هم صفحه های رندر شده توسط سرور و هم صفحات تولید شده به صورت ایستا را شامل می‌شود.

Next.js به طور گسترده توسط بزرگترین و محبوب ترین شرکت ها در سراسر جهان مانند Netflix، Uber ،Starbucks یا Twitch استفاده می شود. همچنین به‌عنوان یکی از سریع‌ترین فریمورک‌های React در نظر گرفته می‌شود که برای کار با سایت‌های استاتیک مناسب است که اخیرا جذاب ترین موضوع در دنیای توسعه وب است. بخش بزرگی از دلیلی که توسعه دهندگان و شرکت ها Next.js را برای توسعه برنامه های کاربردی وب خود انتخاب می کنند این است که این یک فریم ورک fullstack است. بیایید نگاهی کوتاه به نحوه تکامل Next.js و به ویژه نحوه تکامل متدهای render در Next.js بیندازیم.

تکامل Next.js

امروزه، Next.js اغلب با متدولوژی Jamstack برای توسعه برنامه های کاربردی وب مرتبط است. با این حال، زمانی که در اوایل سال 2016 راه اندازی شد، فقط برای برنامه های سمت سرور استفاده می شد. در آن زمان، چیزی که Next.js را منحصربه‌فرد می‌کرد این بود که هم frontend و هم backend برنامه شما را مدیریت می‌کرد و هر دو با استفاده از جاوا اسکریپت و React ساخته می شدند. این به توسعه دهندگان اجازه می دهد تا با استفاده از تنها یک زبان و مجموعه ابزار، برنامه های fullstack بسازند و در عین حال تجربه کاربری بهبود یافته ای را ارائه دهند که معمولا منجر به رندر اولیه سریعتر صفحه می شود. Next.js هم چنین به دلیل ساده سازی ساخت برنامه های فول استک با استفاده از React محبوبیت پیدا کرد.

ویژگی های مهم Next.js

ما می خواهیم در این بخش به ویژگی ها و کاربردهای Next.js بپردازیم. این کار باعث می شود دقیقا درک کنید که بخش ابتدایی مقاله در مورد چه بود و اینکه Next دقیقا چه کاری را انجام می دهد.

۱. Server-side Rendering (صفحه سازی در سمت سرور)

Server-side Rendering به معنی رندر کردن صفحات (ساخت و نمایش آن ها) در سمت سرور است. اگر با react کار کرده باشید می دانید که ما در react داده ها را از سرور گرفته و در سمت کلاینت (در مرورگر کاربر) از آن داده ها برای ساخت و نمایش صفحه (render کردن آن) استفاده می کنیم. در این حالت صفحه را در سمت کلاینت ساخته و نمایش داده ایم اما server-side rendering مانند زمانی است که از PHP برای تولید صفحات HTML استفاده می کنید! یعنی صفحات شما در سمت سرور ساخته شده و سپس به صورت آماده به سمت کاربر ارسال می شوند بنابراین کاربر نیازی به انجام پردازش ندارد.

شما می توانید برای درک این موضوع به وب سایتی بروید که با react نوشته شده است. اگر سورس کد این وب سایت را از مرورگر خود باز کنید متوجه خواهید شد که وب سایت خالی است! چرا؟ به دلیل اینکه در وب سایت های SPA یا Single Page Application صفحات واقعی را نداریم بلکه آن ها با جاوا اسکریپت و به صورت پویا ایجاد شده اند.

چنین برنامه هایی مشکل جدی ایجاد نمی کنند (البته بسته به اینکه چه برنامه ای را می سازید) اما یکی از معایب آن این است که کاربر در اولین بازدید خود از سایت شما باید مدت نسبتا زیادی را منتظر بماند. چرا؟ به دلیل اینکه ابتدا سرور فایل های جاوا اسکریپت را برای کاربر می فرستد، سپس مرورگر کاربر این فایل ها را اجرا می کند و تازه در این مرحله دریافت داده های صفحه از سمت پایگاه داده و سرور شرع می شود. به همین خاطر است که در بسیاری از برنامه های SPA یک علامت loading یا spinner را مشاهده می کنید که به کاربر می گوید منتظر باشد. زمانی که می گویم «مدت نسبتا زیاد» منظورم بر اساس معیار های سایبری سریع امروزی است. در بسیاری از اوقات این وقفه هیچ مشکلی ندارد اما شاید شما بخواهید صفحات سریعا برای کاربر باز شوند.

یکی دیگر از مشکلات SPA ها، مشکلات مربوط به بهینه سازی موتورهای جست و جو (سئو یا SEO) است. اگر برنامه شما خصوصی باشد (مثلا صفحه ادمین در یک وب سایت) این صفحه هیچ گاه توسط موتورهای جست و جو خوانده نخواهد شد بنابراین مسئله سئو به هیچ عنوان در آن اهمیت ندارد اما اگر هدف اصلی وب سایت شما بالا آمدن در گوگل و فروش محصول یا خدمات خاصی است، باید فکری به حال سئو بکنید. چرا؟ به دلیل اینکه موتورهای جست و جو در ابتدا فقط یک صفحه خالی را می بینند که جاوا اسکریپت دارد اما بعد از چند لحظه محتوای صفحه را دریافت می کنند. این وقفه می تواند باعث ضربه خوردن سئوی شما شود. همچنین در برخی موارد معدود نیز موتورهای جست و جو اصلا نمی توانند محتوای یک صفحه SPA را مشاهده کنند که از نظر سئو بسیار بد است.

اینجاست که server-side rendering به ما کمک می کند. اگر صفحات ما در سمت سرور ساخته شده باشند و سپس ما آن صفحه آماده را به سمت کاربر ارسال کنیم دیگر از نظر سئو هیچ مشکلی نداریم. همچنین دیگر آن وقفه اولیه وجود ندارد و صفحات به صورت لحظه ای برای کاربر نمایش داده می شود. لازم به ذکر است که React به صورت پیش فرض دارای قابلیت هایی است که به شما اجازه می دهد server-side rendering را در خود react انجام بدهید اما پیکربندی و راه اندازی آن کمی سخت است و از نظر قابلیت نیز به پای Next نمی رسد.

سوال: آیا این مسئله به معنی تبدیل شدن سایت ما به سایت های قدیمی HTML ای است؟ با این حساب چرا از react استفاده کنیم؟

پاسخ: اولا باید در نظر داشت که Next.js برای طرفداران react ساخته شده است و ده ها راه دیگر برای server-side rendering وجود دارد. شما هیچ الزامی به استفاده از Next ندارید. دوما Next.js فقط صفحه اول را برای کاربر در سمت سرور می سازد اما از آنجا به بعد یک برنامه React عادی دارید و حرکت کاربر بین صفحات مختلف شما به صورت SPA و با react خواهد بود.

این ویژگی، مهم ترین ویژگی Next.js محسوب می شود.