آموزش Next.js

دوره آموزش Next.js به شما کمک می‌کند SSR را برای React به سادگی راه‌اندازی کنید و یک وبسایت با سئو مناسب با React بوجود آورید.

آموزش Next.js

اشتراک گذاری:

توضیحات

آموزش 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.

سوالات متداول

?

پیش‌نیاز‌های یادگیری nextjs ؟

شما برای یادگیری nextjs نیاز به دانش کافی در react.js دارید بدونه یادگیری react ای دوره نمی‌تواند به شما کمکی کند.

?

آیا با این دوره next.js را کامل فرا میگیریم ؟

هدف ما در این دوره این است که شما از مباحث مقدماتی تا پیشرفته next.js را برای ایجاد ssr وبسایت react خود به شکل کامل و با جزئیات یادبگیرید و در نهایت بتوانید از دانش به دست آمد خود برای ایجاد وبسایت‌های react استفاده کنید.

?

آیا یادگیری next.js آسان است؟

در صورتی اینکه شما با react کاملا آشنا باشید و همچنین تا سطح خوبی node را بلد باشید، خیلی ساده و سریع می‌توانید nextjs را فرا بگیرید و بعد از پایان دوره از nextjs به راحتی در عنوان پروژه‌های react خود استفاده کنید.

?

next.js فرانت‌اند است یا بک‌اند؟

nextjs به عنوان یک فریمورک backend و frontend به شمار می‌رود به شکلی که شما هم می‌توانید برای ایجاد ssr وبسایت react خود و هم برای ایجاد api وبسایت از آن استفاده کنید.

?

چرا next.js را انتخاب کنم ؟

تقریبا می‌تواند گفت next.js بهترین انتخاب برای پیاده‌سازی ssr برای وبسایت react محسوب می‌شود با استفاده از آن شما ‌می‌توانید بسیار ساده مفهوم ssr را به شکل عملی برای وبسایت خود پیاده‌سازی کنید. 

گارانتی بازگشت وجه

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

مراحل و فرایند گارانتی

جلسات دوره

دیدگاه و پرسش

برای ارسال دیدگاه لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

در حال دریافت نظرات از سرور، لطفا منتظر بمانید

تکمیل ضبط
خیلی بد
بد
متوسط
خوب
عالی
4.29 از 56 رای
مدت دوره 04:41:42
تعداد جلسات: 30
نوع دوره: ویژه / نقدی
آخرین آپدیت: 12 / 02 / 1399

این دوره برای اعضای ویژه بصورت رایگان قابل مشاهده است. عضویت ویژه

گواهی پایان دوره
وضعیت: ابتدا وارد سایت شوید
گواهی پایان دوره راکت چیست؟
حسام موسوی
مدرس دوره

اول داستان، طراح گرافیک بودم و ۲ سالی به عنوان طراح مشغول بودم، بعد به برنامه‌نویسی علاقمند شدم و الان بیشتر از ۱۰ ساله که عاشق کدزنی و چالش‌های پروژه‌های مختلفم. به تدریس علاقه خاصی دارم و دوست دارم دانشی که در این راه بدست آوردم را در اختیار دیگران...