اگر به وب سایت Next.js بروید می بینید که جمله بزرگی در آن نوشته شده است:

The React Framework for Production

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

اگر از این جملات فنی دور بشویم، می توانیم next.js را به زبان ساده تعریف کنیم: فریم ورکی که از react استفاده می کند و تمام برنامه شما (سمت سرور و سمت کلاینت) را برایتان می سازد. این فریم ورک قابلیت های بسیار بیشتری را نسبت به react به شما می دهد و در واقع react را توسعه می دهد. توجه داشته باشید که در 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 محسوب می شود.

۲. File-based Routing (ناوبری فایل محور)

ویژگی دوم و بسیار محبوب Next.js ناوبری فایل محور یا File-based Routing است. در کتابخانه react به صورت پیش فرض هیچ router ای وجود ندارد که مسیر حرکت کاربر و تغییر URL مرورگر را تحت نظر بلکه از پکیج هایی مانند react-router استفاده می کنیم. کار چنین پکیج هایی این است که با تغییر URL در مرورگر کاربر، جلوی رفتار پیش فرض مرورگر (ارسال درخواست HTTP) گرفته شود و سپس نمایش محتوای متفاوت در همان صفحه است بنابراین به نوعی کاربر را گول می زنیم تا تصور کند برنامه ما صفحات مختلفی را دارد.

یکی از معایب این پکیج ها این است که در آن ها کدنویسی اضافه داریم و باید آن ها را با React ترکیب کنیم. همچنین هیچ ارتباطی بین کامپوننت های React ما و route های برنامه وجود ندارد، به غیر از چیزی که به صورت صریح و با کد مشخص کرده باشیم. Next.js این مسئله را با معرفی سیستم ناوبری یا routing خاص خودش حل می کند! در Next.js برای تعریف یک مسیر (route) جدید از فایل ها و پوشه ها استفاده می کنیم! در واقع در پروژه های Next.js یک پوشه به نام pages را داریم که عینا باید با همین نام باشد. حالا درون این پوشه، پوشه ها و فایل های دیگری را خواهید داشت و ساختار این پوشه ها و فایل ها دقیقا سیستم routing وب سایت شما خواهد بود!

چنین سیستمی برای ساخت route چندین مزیت مهم دارد. اولا برای تولید route ها هیچ نیازی به نوشتن کد نداریم بلکه Next.js خودش این کار را برایمان انجام می دهد. دوما به دلیل نوشتن کد کمتر، خوانایی کدهایمان بالا رفته و از شلوغ شدن پروژه جلوگیری می کنیم. سوما درک سیستم routing در این حالت بسیار ساده تر است چرا که با نگاه انداختن به پوشه pages به راحتی می توانیم مسیر های سایت خودمان را ببینیم. طبیعتا این سیستم routing تمام امکانات سیستم های مدرن ناوبری را دارد: مثلا به nested routes دسترسی دارید، به dynamic routes دسترسی دارید، به dynamic parameters دسترسی دارید و الی آخر.

۳. Fullstack Capabilities (توانایی فول استک)

ما می دانیم که react برای سمت کلاینت (مرورگر کاربر) ساخته شده است اما سمت سرور چطور؟ باید توجه داشت که Next.js به صورت جادویی کدهای سمت سرور را برای شما نمی نویسد چرا که چنین کاری اصلا ممکن نیست. کاری که Next.js برای ما انجام می دهد ساده کردن ترکیب کد react با کد سمت سرور (منطق کاری سایت ما) است. اگر از Next.js استفاده کنید، ساخت یک API در سمت سرور برای کار با برنامه React بسیار آسان خواهد بود. با این حساب فرآیند هایی که به سرور و API نیاز دارند به راحتی در دسترس شما خواهند بود. مثلا فرآیند احراز هویت کاربران، دریافت داده، ذخیره سازی داده و امثال آن همگی به راحتی انجام می شوند.

شاید بپرسید مگر با react عادی نمی توانیم این کار را انجام بدهیم؟ حرفتان صحیح است. ما می توانیم بدون Next.js یک پروژه react داشته باشیم و API را جداگانه بنویسیم. در هر دو حالت نیز باید API را خودمان بنویسیم اما در پروژه های Next.js علاوه بر مزیت های قبلی این مزیت را نیز داریم که کد سمت سرور (مثلا Node.js) و کد سمت کلاینت‌ (React) در یک پروژه و یکجا قرار دارند بنابراین مدیریت آن بسیار ساده تر خواهد بود.

مزایا و معایب

مثل هر ابزار دیگری در دنیای برنامه نویسی، Next.js نیز مزایا و معایب خودش را دارد. اگر تصمیم بگیرید از Next.js برای پروژه خود استفاده کنید سه مزیت اصلی را خواهید دید:

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

از طرفی استفاده از Next.js معایبی نیز دارد. این معایب معمولا شامل موارد زیر است:

• عدم انعطاف پذیری سیستم routing: با اینکه سیستم routing مورد علاقه ما است اما قابل تغییر نیست. اگر شما دوست نداشته باشید از این سیستم استفاده کنید، هیچ راهی برای تغییر آن وجود ندارد.
• محدودیت زبان سمت سرور: فریم ورک Next.js تکنولوژی سمت سرور خود را Node انتخاب کرده است و تغییر آن ممکن نیست. مثلا اگر بخواهید به جای Node از زبان PHP استفاده کنید ممکن نیست. حتی اگر بخواهید به جای Node از تکنولوژی بسیار مشابهی مانند Deno استفاده کنید باز هم ممکن نیست.
• فقدان state-manager: با اینکه Next.js یک فریم ورک کامل است اما state manager ای ندارد بنابراین باید خودتان این موضوع را حل کنید. این مشکل در سمت کلاینت با پکیج هایی مانند Redux حل می شود.

امیدوارم این مقاله شما را با Next.js آشنا کرده باشد.