آموزش Next.js

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

Next.js (نکست جی‌اس) چیست؟

Next.js به عنوان یک فریمورک برای React شناخته می‌شود که به شما اجازه می‌دهد که React را به شکل SSR پیاده‌سازی کنید، شاید بپرسید که SSR یا Server-Side Rendering چیست؟ که در بخش پایین‌تر این مقاله به شکل مفصل آن را به شما توضیح خواهم داد.

فریمورک چیست؟

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

مفهوم SSR یا Server-Side Rendering

برای درک SSR اول باید نگاهی به وبسایت‌های معمولی بی‌اندازیم.

در وبسایت‌های معمولی زمانی که شما یک URL را درخواست می‌کنید مرورگر شما محتوای آن صفحه را کامل لود می‌کند و در نهایت در مرورگر به نمایش در می‌آورد اما در وبسایت‌های SPA زمانی که یکی از صفحات را درخواست می‌کنید ابتدا صفحه خام به همراه کد جاوااسکریپتی شما لود می‌شود که در این حالت چیزی برای مشاهده توسط موتور‌های جستجو وجود ندارد و بعد از چند لحظه که کدهای جاوااسکریپتی شما کامل فراخونی شد و اطلاعات در صفحه نمایش داده می‌شود.

اما برای برطرف کردن این مشکل راحلی ارائه شده است با عنوان SSR که به شما کمک می‌کند وبسایت SPA خود را در بارگذاری اول کاملا مانند یک وبسایت معمولی لود کنید.

برای یادگیری Next.js باید چه چیزهایی را بدانیم؟

برای آموزش Next.js شما قطعا باید با React آشنا باشید و با آن کار کرده باشید. بخاطر اینکه Next.js فریمورک React محسوب می‌شود و عدم آشنایی با React مشکل اساسی در استفاده از Next.js محسوب می‌شود.

اگر تا الان React را هنوز یاد نگرفته‌اید پیشنهاد می‌کنیم در قدم اول دوره آموزش React را مشاهده کنید.

در سطوح پیشرفته‌تر کار با Next.js شما نیاز به دانش node هم پیدا خواهید کرد بخاطر اینکه سمت backend این فریمورک با استفاده از node پیاده‌سازی شده است.

اگر نیاز به یادگیری node دارید ‌می‌توانید از دوره آموزش nodejs برای یادگیری آن استفاده کنید.

نصب، راه اندازی و پیکربندی Next.js

Next.js نصب و راه‌اندازی ساده‌ای دارد، همچون داستان React که برای راه اندازی پروژه ما از پکیج create- React -app استفاده می‌کردیم برای راه‌اندازی next هم از پکیجی با عنوان create-next-app باید استفاده کنید که تقریبا همه کارهای لازم را برای ما انجام می‌دهد.

فرق بین CSR و SSR چیست؟

با تعریف هر کدام از این‌ها در نهایت میتوانید فرق بین آن‌ها را به سادگی درک کنید.

CSR: مخفف Client Side Rendering و به معنی این است که وبسایت شما بعد از یکبار لود شد کامل توسط مرورگر، برای لود کردن صفحات دیگر وبسایت نیاز به دریافت و Render کردن چیزی از سمت سرور را ندارند و کاملا با استفاده از جاوااسکریپت این کارها انجام می‌شود.

SSR : مخفف Server Side Rendering و به معنی این است که وبسایت شما به ازای هر URL یکبار در سمت خود سرور باید تمام پردازش و ایجاد HTML وبسایت انجام شود و مرورگر تنها وظیفه اجرای HTML را بر عهده بگیرد.

احتمالا با این تعریف شما متوجه فرق بین این دو شده‌اید. در آموزش Next.js ما به شکل عملی فرق این دو را در جلسات مختلف به شما نشان خواهیم داد.

در دوره آموزش Next.js چه مباحثی را یاد می‌گیرید؟

با شرکت در این دوره و دیدن فایل‌های آموزشی و تمرین کردن نکات گفته شده در ویدیوها شما یاد می‌گیرید که:

• چطور صفحات مختلف را با استفاده از Next.js ایجاد کنید
• چطور Route های پویا بسازید
• چگونه با سرور ارتباط بگیرید و اطلاعات را از سرور دریافت کنید
• چطور با next وبسایت SSR پیاده کنیم.
• چطور سئو سایت را بهبود دهیم.
• و...

چرا باید Next.js را از مجموعه راکت یاد بگیرید؟

ما در راکت سعی کرد‌ه‌ایم به شکل کامل و کاربردی فریمورک Next.js را برای ایجاد راحت‌تر وبسایت‌های SSR به شما آموزش دهیم.

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

ابزار های مورد نیاز برای شرکت در این دوره

شما برای شرکت در این دوره به مقدار زیادی اشتیاق به یادگیری و پیشرفت، با چاشنی اراده و اندکی تصمیم به ورود به دنیای برنامه نویسی پیشرفته دارید.

این دوره ویژه چه کسانی هست؟

این دوره ویژه افرادی است که با React کاملا آشنا هستند و حالا با مشکل SSR در React مواجه شده‌اند و به دنبال راحلی برای حل این مشکل میگردند.

قطعا دوره آموزش Next.js می‌تواند به شما در یادگیری next js و حل مشکل SSR برای همیشه کمک کند.

پشتیبانی از این دوره آموزشی به چه صورت است؟

شما بعد از اتمام این دوره آموزشی می‌توانید از خدمات پشتیبانی آن استفاده کنید. این پشتیبانی عبارت از موارد زیر است:

• پشتیبانی و پاسخ به پرسش های شما
• کسب امتیاز و اعتبار برای شرکت در دوره های دیگر
• دریافت آپدیت های دوره به صورت مادامالعمر (در صورت خریداری نقدی این دوره)
• توانایی کسب درآمد و گرفتن پروژه های واقعی

سرفصل های دوره آموزش Next.js

آشنایی با سیستم صفحات

در این بخش شما با روش ایجاد صفحات مختلف در next آشنا خواهید شد. ما در Next.js چند نوع صفحه داریم و این صفحات در موقعیت‌های مختلف می‌توانند به روش متفاوت عمل کنند.

بدست‌ آوردن درک مناسب از موضوع صفحات در Next.js می‌تواند به شما کمک کند که اپلیکیشن React خود را راحت‌تر به شکل SSR در بی‌آورید.

ارتباط با سرور

دریافت اطلاعات از API و Renderشدن صفحات در سمت Back-End با استفاده از Next.js روندی دارد که در این بخش شما را با روند کامل آشنا خواهم کرد.

کامپوننت‌ها و موارد مربوط‌ به آن‌ها

در این بخش موارد همچون استفاده از CSS در جاوااسکریپت، فراخوانی فایل‌های Static، روش استفاده از فایل Sass و موارد دیگر را مورد بررسی قرار دادیم.

ایجاد API داخلی در Next.js

همانطور که در بالا هم اشاره کردیم Next.js این قابلیت را به ما می‌دهد که با node در سمت backend کارهای انجام دهیم.

اما موضوع مهم‌تر این است که شما در Next.js توانایی این را دارید که api خود را با استفاده از Next.js هم توسعه دهید.

یعنی توسعه frontend و backend در کنار هم با استفاده از Next.js.