نکست جی اس یکی از فریمورک هایی است که بر مبنای کتابخانه react js نوشته شده است. ما با آموزش next js میتوانیم بسیاری از مشکلات ریکت جی اس را به کمک SSR حل کنیم.
React js چیست؟
وقتی شما به عنوان یک طراح وب سایت، طراحی یک صفحه وب به کمک Html و Css و جاوااسکریپت را یاد میگیرید، در مرحله بعد باید بین سه شاخه فرانت اند( که در واقع معروفترین شاخه های فرانت اندی هستند) یکی را انتخاب کنید. React.js ، Vue.js و Angular.js
از بین سه تکنولوژی بالا، ریکت جی اس، پیچیده ترین و البته محبوب ترین است. در واقع توانایی های ریکت جی اس، باعث شده که یکی از بزرگترین کامیونیتی های طراحی وب، مربوط به این کتابخانه باشد.
Next js چیست؟
در پاسخ به این سوال، باید ابتدا به بررسی علت ایجاد این فریمورک بپردازیم. اگر شما از ریکت جی اس برای طراحی فرانت اند وب سایت خود استفاده کنید، پس مدتی کار کردن میفهمید که اولا کار با این کتابخانه کمی سخت است. دوما سرعت پروژه های ریکتی نسبتا کم است. سوما وقتی یک وب سایت با react js طراحی می شود، SEO اصلا ندارد.
فریمورک نکست جی اس به این دلیل به وجود آمده است تا کم و کاستی های بالا را بپوشاند. در واقع، این فریمورک به کمک مباحث پیشرفته ای که دارد مثل SSR و SSG و ISR ، بسیاری از مشکلات ریکت را حل کرده است. مثلا شما در next.js، هم سئوی عالی دارید و هم سرعت عالی. علاوه بر این موضوع، کار کردن با next.js، بسیار راحت تر از کار کردن با ریکت جی اس می باشد.
مزایای Next js
سرعت بالای نکست جی اس
سرعت یک پروژه next js ای، خیره کننده است. یک صفحه وب سایت اگر نیاز به لود کردن یک API نداشته باشد، این صفحه در کمتر از یک ثانیه باز خواهد شد و اگر نیاز به لود API داشته باشد، بین 1 تا 4 ثانیه، لود این صفحه به طول خواهد انجامید.
سئو نکست جی اس
یکی دیگر از موارد عالی در مورد next.js، این است که این فریمورک، به کمک مباحث serve side rendering و static side generation ، مشکل سئو را به صورت کامل حل کرده است. به گونه ای که عموم کسب و کارهای بزرگ، وب سایت خود را به تکنولوژی نکست جی اس انتقال داده اند.
همچنین شما برای یادگیری seo در react.js و نکست جی اس، میتوانید از وب سایت های مختلف کمک بگیرید. سئو مبحث بسیار گسترده ای است که نیاز به 30 تا 40 ساعت دوره دارد.
پوشه API در Next js
حال مسئله این است. نکست جی اس، فریمورک فرانت اند یا بک اند؟
پاسخ این سوال بسیار ساده است. next.js یک فریمورک فول استک است. در واقع پوشه APP نکست جی اس، برای طراحی صفحات و مطالب فرانت اندی در پروژه نکست جی اسی استفاده می شود.
علاوه بر این موضوع، در نکست جی اس ما پوشه ای به نام API هم داریم. این پوشه برای طراحی بک اند و در واقع نوشتن api های مورد نیاز اپلیکیشن استفاده می شود.
یعنی شما اگر آموزش next js را شروع کنید، بدون نیاز به یادگیری هیچ زبان دیگری، خیلی ساده میتوانید فول استک شوید و طبق معماری MVC ، فرانت و بک اند وب اپلیکیشن خود را طراحی کنید…
از اینجای مقاله به بعد، کمی میخواهیم آموزش نکست جی اس را کمی تخصصی تر پیش ببریم.
صفحات و کامپوننت ها در نکست جی اس
استاتیک روت ها در Next js
در Next js ما یک پوشه خاص و ویژه داریم به نام پوشه App . اگر بخواهیم صفحه ای به وب سایت خود اضافه کنیم، باید در این پوشه، ابتدا یک پوشه ایجاد کنیم مثلا به نام about ؛ سپس درون این پوشه فایلی ایجاد کنیم به نام page.jsx یا page.tsx . به همین سادگی صفحه درباره ما در پروژه ما ساخته شد. به این گونه صفحات که یک آدرس همیشگی ثابت دارند static route گفته می شود.
داینامیک روت ها در Next js
اگر بخواهیم در وب سایتمان، صفحه تک پست یا تک محصول ایجاد کنیم، باید درون پوشه App از پروژه نکست جی اسی، ابتدا یک پوشه اضافه کنیم به نام products. سپس درون این پوشه، پوشه ای ایجاد کنیم به نام [slug] و سپس درون آن، فایل page.jsx خود را ایجاد کنیم. آدرس نهایی صفحه /products/product-name خواهد بود. به این گونه صفحات، dynamic route گفته می شود. در واقع صفحات داینامیک برای برای آدرس هایی به کار میروند که بخشی از آنها ثابت و بخشی متغیر است.
کچ آل روتز در Next js
نوع سوم صفحات صفحات catch all هستند که برای یادگیری آن میتوانید کلیک کنید.
کامپوننت ها در پروژه نکست جی اسی
نکته بعدی در مورد کامپوننت ها در پروژه نکست جی اسی هست. شما در کنار هر کدام از این فایل های page.jsx میتوانید فایل هایی با نام های دلخواه ایجاد کنید مثلا product-box.jsx . این فایل یک فایل کامپوننت خواهد بود. به همین سادگی.
آموزش تگ Image در نکست جی اس
یکی دیگر از موارد مهم در یادگیری next.js ، تگ ایمیج است. یعنی اینکه اگر شما بخواهید در وب سایت next js ای، یک تصویر نمایش بدهید، نمیتوانید از تگ img اچ تی ام ال استفاده کنید. بلکه باید از تگ Image خود نکست جی اس استفاده کنید.
این تگ کمک شایانی را به این فریمورک کرده است مثلا
- کاهش حجم خودکار عکس
- تغییر فرمت عکس به صورت خودکار به WebP
- ایجاد سیستم Lazy Load برای تصاویر
- امکان کنترل کیفیت تصویر
- لود عکس با اندازه مناسب بر اساس دستگاه کاربر
و خیلی موضوعات بیشتر که شما میتوانید با تحقیق بیشتر، به این موضوع پی ببرید.
اتصال به دیتابیس در Next.js
یکی دیگر از موارد مهم در مورد این فریمورک، اتصال به دیتابیس در آن است. ما در نکست جی اس، میتوانیم از دیتابیس های مختلفی استفاده کنیم مثلMongo DB ، Redis ، Mysql ، Postgresql و خیلی موارد دیگر.
برای اتصال به دیتابیس، ما معمولا یک پوشه به نام utils به پروژه اضافه میکنیم و درون این پوشه، فایلی به نام connect.js نوشته می شود. درون این فایل، باید کدهای مربوط به دیتابیس نوشته شود که این کدها، معمولا از وب سایت دیتابیس مربوطه خوانده می شود.
احراز هویت با Next.js
یکی از مواردی که فکر خیلی از مخاطبین را به خود درگیر میکند، بحث احراز هویت است. یک مبحث فول استک که هم نیاز به فرانت اند دارد و هم بک اند. احراز هویت در نکست جی اس به کمک چندین پکیج میتواند انجام شود.
اولین راه به کمک پکیج Auth0 است. این یکی از پایه ای ترین پکیج های معرفی شده برای احراز هویت در Next js می باشد.
پکیج دوم، پکیج Next Auth است. پکیجی که شما میتوانید به کمک آن، برای احراز هویت از گیت هاب، جیمیل، فیسبوک، توییتر( ایکس) و… استفاده کنید. یعنی در واقع این پکیج، سیستمی را فراهم کرده است که اپلیکیشن شما را به شبکه های اجتماعی بالا متصل میکند و به کمک اطلاعاتی که از اکانت شما در شبکه اجتماعی مربوطه میگیرد، برای کاربر در سایت حساب کاربری میسازد.
راهکار سوم و بهترین راهکار هم هست، استفاده از پکیج JWT است. در واقع من برای استفاده از این پکیج، باید اطلاعات را از فرانت اند بگیریم و به پروژه بک اند بفرستیم. سپس در بک اند اطلاعات را ذخیره کرده و با توجه به آن و به کمک پکیج Json Web Token، یک توکن تولید کنیم و آن را در مرورگر کاربر ذخیره کنیم.
فروشگاه با Nex js و مدیریت متغیرها
یکی از مهمترین پروژه هایی که باید یک طراح وب سایت بتواند طراحی کند، فروشگاه اینترنتی است. یک فروشگاه با next js . یک فروشگاه اینترنتی دارای بخش های مختلفی است مثل لایه ها و حساب کاربری، سبد خرید و پرداخت، جستجوی محصولات و…
در این گونه وب سایت ها، استفاده از state manager هایی مثل redux toolkit ، context و… بسیار حائز اهمیت است.
در واقع یکی از مباحث مهم در پروژه های بزرگ، مدیریت متغیرهای گلوبال است. متغیرهایی که در یک کامپوننت تعریف می شوند فقط در همان کامپوننت قابل استفاده هستند اما وقتی یک متغیر به صورت گلوبال به کمک ریداکس تول کیت در پروژه نکست جی اسی تعریف می شود، این قابلیت را دارد در هر جای اپلیکیشن فراخوانی و استفاده شود.
نصب next js
برای نصب یک پروژه نکست جی اسی، کار ما بسیار ساده است. فقط نیاز است که یک پوشه ایجاد کنید. سپس درون این پوشه، cmd را باز کنید. سپس درون کامند پرامپت، عبارت npx create-next-app@latest را تایپ کنید و انتر بزنید. به همین سادگی پروژه نکست جی اسی شما نصب می شود.
بازار کار و ادامه مسیر شغلی با Next js
اگر سری به سایت های کاریابی بزنید، خیلی ساده متوجه می شوید که بازار کار ریکت جی اس بسیار عالی است. اما اخیرا نقاط ضعف این کتابخانه باعث شده که عموم صاحبان کسب و کارها، به فکر انتقال وب اپلیکیشن خود به نکست جی اس باشند. همین موضوع باعث شده که آینده شغلی next.js بسیار درخشان است.
سخن پایانی
نکست جی اس فریمورکی بسیار سئوفرندلی و سریع و آسان است. پیشنهاد میکنم که هر چه زودتر، به کمک دوره های نکست جی اسی، شروع به یادگیری این تکنولوژی کنید و زمان را از دست ندهید…
دیدگاهتان را بنویسید