آموزش Next.js رایگان و پروژه محور از 0 تا 100

لطفا روی لینک جلسه مورد نظر کلیک کنید...
لطفا روی لینک جلسه مورد نظر کلیک کنید...

دوره های بیشتر برای یادگیری Next js

دوره های طراحی سایت کامل

دوره های تئوری

پروژه های کوچک

Next js چیست؟ هر آنچه که لازم است بدانید!

قبل از شروع مطالعه متن، نیازه که اینو خدمتتون بگم. میتونید مطالب رو به صورت ویدئویی در دوره آموزش next js مرن فا که لیست جلساتش در ابتدای همین صفحه بود به صورت رایگان ملاحظه بفرمایید.

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

به صورت خلاصه تر میتوان گفت که فریمورک Next.js که ما به آموزش آن میپردازیم، فریمورکی هست که بر مبنای کتابخانه ریکت جی اس نوشته شده است تا نقاط ضعف آن را بپوشاند. مثلا سئو، مثلا سرعت، مثلا رندر سمت سرور و...

آیا امروز Next js بهترین تکنولوژی برای طراحی سایت هست؟

یکی از راه هایی که میتونیم بفهمیم چه فریمورکی از بقیه بهتره؛ اینه که ببینیم برترین وب سایتها، دارن از چه تکنولوزی هایی استفاده میکنن.

دیجی کالا
فرادرس
ترب
ژاکت
تخفیفان
فیلم نت
پونیشا
ویرگول

وب سایت هایی که بالاتر دیدید، همه از Next js استفاده می کنند. علت این موضوع هم بسیار واضح هست. سرعت بسیار بالا، سئوی عالی در نکست جی اس، کاربرپسندی بیشتر وب سایتهای next.js ای و...

اگه شک دارید، برید توی جلسه دوم دوره آموزش next js رایگان با مرن فا، به صورت تصویری این موضوع رو توضیح دادم.

کیفیت بالای نکست جی اس باعث شده که توی چند سال اخیر، عموم کسب و کارها به این فریمورک روی بیارن و به همین دلیل پیشنهاد میکنم دوره های آموزش next js مرن فا رو از دست ندید. مرن فا اولین مرجع تخصصی Next js ایران هست و ما به صورت کاملا تخصصی روی این فریمورک تمرکز کردیم...

پیش نیاز های یادگیری next js

برای آموزش next js شما باید html و css و javascript رو یاد بگیرید. روی جاوااسکریپت یه مقدار زمان بزارید تا خوب یاد بگیریدش. پروژه های کوچیک جاوااسکریپتی هم بزنید. مثلا بازی دوز، ماشین حساب، فیلتر محصولات و یه اسلایدر ساده. اینا تموم شد، یه قالب ساده برای صفحه اصلی یه سایت رو بزنید. مثلا صفحه اصلی یه سایت وبلاگی ساده

بعد از این، نوبت میرسه به ریکت. لطفا React js رو یاد بگیرید ولی فقط و فقط با فانکشنال کامپوننت. نیازی نیست که روی کلاس کامپوننت ها زمانی بزارید. اگر دیدید که در یک آموزشی، مدرس داره با کلاس کامپوننت ها تدریس میکنه، بدونید که آموزشش قدیمیه و برید سراغ یه دوره دیگه.

برای آموزش react js نیازی به هزینه کردن نیست. پیشنهاد میکنم برید سراغ یوتوب. یوتوب فارسی، دنیایی از آموزش در زمینه های مختلف رو داره که میتونید خیلی ساده ازشون استفاده کنید.

چه بخش هایی از react js رو یاد بگیریم؟

توی ریکت جی اس، چند تا چیز هست که مهمه بلد باشید. اینا رو یاد گرفتید، میتونید آموزش نکست جی اس رو با مرن فا شروع کنید...

  • 1. مفهوم Single Page Application ها ( SPA )
  • 2. مفهوم کامپوننت محور بودن یک وب سایت
  • 3. فانکشنال کامپوننت ها
  • 4. تعریف تابع در یک کامپوننت
  • 5. سه هوک مهم ریکت یعنی useState - useEffectt و useRef

بک اند رو چطور یاد بگیریم؟

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

پس از این موضوع، میتونید دوره فروشگاه فایل رو ثبت نام کنید. این دوره با فرانت اند Next js و Tailwind css و بک اند Node js و Mongo DB طراحی شده. توی 20 جلسه اول این دوره، شما میتونید فرانت رو با نکست جی اس و تیلویند بیشتر تمرین کنید تا تمامی مطالب ملکه ذهنتون بشه. پس از اون، نیاز پیدا میکنید به بک اند. پیشنهاد من برای بک اند این هست که لطفا دوره اکسپرس خلاصه مرن فا رو ببینید. توی 2 ساعت، مطالبی که برای برنامه نویسی بک اند نیاز دارید رو خدمتتون توضیح دادم.

یعنی اگه بخوام به صورت خلاصه مفید خدمتتون بگم، لطفا فصل اول دوره فروشگاه فایل که شامل 20 جلسه هست رو لطفا ببینید تا مطالب نکست جی اسی رو بیشتر تمرین کنید. سپس دوره اکسپرس خلاصه رو شرکت بکنید تا بک اند رو توی 2 ساعت یاد بگیرید. حالا برگردید و ادامه دوره فروشگاه فایل رو ببینید. در ادامه دوره فروشگاه فایل، میتونید نزدیک به 30 ساعت کدنویسی بک اند یاد بگیرید و نود جی اس تمرین کنید....

React js چیست؟

همونطور که بالاتر توضیح داده شد، یکی از پیش نیازهای آموزش next js ریکت هست. ریکت سیستمی هست که برمبنای جاوااسکریپت طراحی شده. فرق سایت ریکتی با این وب سایت های معمولی چیه؟ اینه که توی سایت معمولی، وقتی شما روی یه دکمه کلیک میکنی تا مثلا صفحه درباره ما باز بشه، فرانت درخواست میزنه به سرور، اطلاعات از سرور فرستاده میشه به فرانت اند، حالا کاربر می‌بینیدش. خوب توی این بازه زمانی جابه‌جایی اطلاعات، کاربر چی می‌بینه؟ یه صفحه سفید در حال رفرش😴. نکته مهمترش اینه که این فرایند توی یه سایت معمولی، 2 تا 8 ثانیه طول میکشه. 😬 ولی توی یه سایت mern stack، نیم تا 4 ثانیه طول می‌کشه. سایت مرن استک هم میشه سایتی که با react.js یا Next js طراحی شده. مثل همین مرن فا

فریمورک Next.js بهتر است یا کتابخانه React؟

ببینید خلاصه مفید بگم next js ورژن سئوفرندلی ریکت جی اس هست. یعنی توی نکست جی اس، ما برای لود اطلاعات از SSR و SSG استفاده میکنیم که این موضوع در React js نیست. همین مزیت باعث میشه که همه به فکر انتقال وب سایتشون به نکست جی اس افتادن...

Node.js چیست؟ آیا در Next js کاربردی دارد؟

ببینید برای زدن بک اند یک وب سایت، میتونید از زبان های مختلفی استفاده کنید، php، python و کلی چیز دیگه. از jacascript هم میشه استفاده کرد. برای زدن بک اند با جاوااسکریپت، از node js استفاده میکنیم. در واقع نود جی اس یه زبان یا فریمورک مجزا نیست. بلکه یه پلتفرم هست که ما، به کمکش میتونیم زبان جاوااسکریپت رو در بک اند یا سرور اجرا کنیم.

شما پس از آموزش Next js، بعد از مدت کوتاهی نیاز پیدا میکنید که بک اند رو هم یاد بگیرید. نکست جی اس براتون یه سورپرایز داره. پوشه API.

در واقع ما در فرمیورک Next.js، یه پوشه داریم به اسم پوشه api که میتونیم بک اندمون رو همراه با فرانت اند در یک پروژه بنویسیم. جذابیت ماجرا اینجاست که برای استفاده از این پوشه، شما نیازی به یادگیری زبان جدیدی ندارید. خیلی ساده میتونیم برای اینکار از همین زبان javascript استفاده کنیم.

نکته مهم در مورد آموزش بک اند در next.js، این هست که پوشه api نکست جی اس، بر مبنای نود جی اس یا بهتره بگم فرمیورک اکسپرس نوشته شده. یعنی شما برای اینکه بتونید بک اند رو خوب یاد بگیرید، پیشنهاد میکنم ابتدا بک اند اکسپرس رو یاد بگیرید، سپس بک اند نکست جی اس رو شروع کنید. آموزش هاش هم توی همین مرن فا هست. یه دوره اکسپرس خلاصه داریم که توی صفحه همه دوره ها میتونید پیداش کنید. توی تقریبا از 2 ساعت، مواردی که توی پروژه ها کاربردی هستن و بهشون نیاز دارید رو خدمتتون توضیح دادم. علاوه بر این، بک اند پروژه فروشگاه فایل مرن فا هم به کمک همین اکسپرس نوشته شده که میتونید به کمک اون، اکسپرس رو خیلی تمرین کنید.

آموزش بک اند در Next js هم توی دوره نکست پیشرفته هست. توی دوره وبلاگ پیشرفته هم، ازش توی پروژه استفاده کردیم.

Next js چیست و مزیت های آن

نکست جی اس، فریمورکی هست که بر مبنای react.js نوشته شده و بک اند node js رو هم داره. سئو خیلی خوبی داره و علاوه بر اینا، سریعتر هم هست از ریکت. خلاصه مفید 😅

راحت بودن آموزش و به کارگیری Next js نسبت به React js

اگه با ریکت جی اس کار کرده باشید، می‌دونید که یه سری سختی داره مثلا برای ساختن یه صفحه یا حتی برای ساختن یه navbar ساده، باید کلی عرق بریزید، اما nextjs اینا رو خیلی ساده تر کرده. مثلا نکست یه پوشه pages ( توی next js 13 معادل این پوشه میشه پوشه app) داره، هر فایل js یا jsx ی که توش میسازیم، میشه یه صفحه از وب سایت، به همین سادگی. به خاطر همین میگیم یکی از ویژگی های نکست جی اس، File base بودن هست. میتونید از دوره آموزش Next js رایگان با مرن فا و همچنین دوره های پروژه محور Next js با مرن فا هم برای آموزش نکست جی اس استفاده کنید.

ساختن api در next js

یک نکته بسیار مهم در مورد نکست اینه که این فریمورک اومده توی همون پوشه pages، یه پوشه ساخته به اسم api و توی این پوشه میتونیم ای پی آی های وب اپمون رو هم بزنیم؛ یعنی کلاینت ساید در کنار سرور ساید توی یه فریمورک. البته معمولا از این پوشه استفاده نمیکنیم چون هنوز مونده بک اند نکست جی اس، برسه به قدرت خود نود جی اس. اگه نیاز به یادگیری کار کردن با پوشه api نکست جی اس رو دارید، میتونید دوره آموزش پیشرفته next js مرن فا ببینید. همچنین اگه نیاز دارید که با node js پروژه بزنید، توی مرن فا، کلی دوره آموزش پروژه محور node js و next js هست.

آموزش سئو در react js و Next js

ببینید، react js خیلی کاربر پسنده، اما سئو اصلا نداره. همون طور که vue و angular که فریمورک های معروف دیگه‌ی جاوااسکریپت هستن، سئو ندارن. به همین خاطر یه سری فریمورک دارای سئو واسه اینا زده شده. معادل ریکت، next js رو داریم، واسه ویو، nuxt js و معادل انگیولار، فریمورک angular universal رو داریم.

بررسی seo در Next js در جلسه دوم دوره آموزش Next js مقدماتی مرن فا که ابتدای همین صفحه قرار داشت توضیح داده شده. همچنین نکات تکمیلی این موضوع، در دورهسئو در نکست جی اس مرن فاهست که میتونید شرکت کنید....

اگه بخوام به صورت خلاصه بگم میشه پاسخ به این سوال

SSR چیست؟

ssr یا server side rendering به این معنی هست که زمانی که کاربری، آدرس صفحه ما رو در مرورگر میزنه، ریکوئست فرستاده میشه به بک اند، صفحه اونجا ساخته میشه و سپس صفحه ای که دارای کل اطلاعات هست به فرانت فرستاده میشه. به همین دلیل کراولر های گوگل که رتبه SEO به صفحاتتون میدن، با صفحه ی دارای کل اطلاعات مواجه میشن. در نتیجه رتبه سئو میگیرید. این در حالی هست که CSR این امتیاز رو نداره. در واقع تفاوت Csr و Ssr هم در همین هست. زمان گذاشته شدن دیتا در کد صفحه

کاربرد CSR , SSG,SSR و ISR در Next js و بررسی تفاوت های آنها

همین اول 2 تا نکته بهتون بگم،

1. بین این سه تا، روشی که بهتر از بقیه هست، ISR هست.

2. برای داشتن سئو، باید صفحهتون سرورساید باشه و صفحه توی سرور کامل ساخته بشه و فرستاده بشه به فرانت نه اینکه درخواست زده بشه به سرور، اطلاعات گرفته بشه به فرانت، بعد تازه توی فرانت صفحه ساخته بشه.

پیشنهاد میکنم جلسه های 19 و 20 دوره آموزش next js مرن فا رو ببینید. اونجا به صورت ویدئویی موارد رو خدمتتون توضیح دادم

CSR چیست؟

سی اس آر(کلاینت ساید رندرینگ)، یعنی وقتی کاربر آدرس صفحه رو توی مروگر زد، یه صفحه خالی ساخته میشه. سپس با useEffect اطلاعات لود میشه و توی صفحه گذاشته میشه. یعنی صفحه در سمت کاربر ساخته میشه.

SSG در Next js چیست؟

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

SSR در Next js چیست؟

اس اس آر( سرورساید رندرینگ) یعنی کاربر وقتی آدرس صفحه رو وارد کرد، در سرور اطلاعات همون لحظه از دیتابیس گرفته میشه. با این اطلاعات، همون لحظه صفحه ساخته میشه و برای کاربر فرستاده میشه.

ISR در Next js چیست؟

برای گرفتن اطلاعات از بک‌اند در Next js، علاوه بر سه روشی که بالاتر توضیح داده شد یعنی Client Side Rendering و Static Side Generation و Server Side Rendering، یه روش دیگه ای هم داریم به اسم ISR . این روش یعنی اینکه شما توی یه صفحه، از 2 روش استفاده کنی. مثلا برای بخش هایی از صفحه که سئوش براتون مهم نیست، از CSR استفاده کنی و برای بخش هایی که سئوشون مهمه، از SSR یا SSG. دقت کنید. توی یه صفحه، نمیشه هم از ssr استفاده کرد و هم از ssg. فقط یکیشون.

پس از استفاده این ها در کنار هم در یک وب سایت Next js ای، میبینید که همیشه بخش csr شده، دیرتر از باقی بخش ها لود میشه. علت این موضوع مطالبی هست که در بخش سی اس آر چیست توضیح دادم. این روش isr بهتر از هر سه تا روش هست.

آموزش استایل دهی در Next js

برای استایل دهی در نکست، چند تا روش وجود داره. میشه CSS زد، میشه از SCSS کرد. میشه از بوت استرپ استفاده کرد. میشه از css in js هم استفاده کرد. اما بهترین روش توی نکست جی اس، استفاده از tailwind css هست. هم دردسر های css و scss و css in js رو نداره و هم زشتی و پرحجم بودن بوت استرپ.

آموزش ویدئویی Tailwind css در دوره آموزش Next js مقدماتی که در ابتدای این صفحه دیدید، هست.

آموزش تگ Link در فرمیورک Next js

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

<Link href={"/"} className="text-zinc-300"> title </Link>

آموزش تگ Image در فریمورک Next js

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

مزیت های تگ Image نکست جی اس

  • کنترل کیفیت و اندازه ی عکسی که از سرور لود می شود
  • ریسپانسیو با توجه به اندازه های مختلف
  • کاهش حجم تصاویر
  • تبدیل خودکار فرمت تصویر به WebP
  • افزایش قدرت Seo صفحه
  • قابلیت scale پذیری با طول و عرض

نحوه استفاده از تگ Image در دوره نکست مقدماتی و بررسی دقیق تر آن در دوره Next js پیشرفته مرن فا آموزش داده شده که میتونید با ثبت نام در این دوره ها، مطالب رو دقیق تر یاد بگیرید.

آموزش Next js refresh

توی این بخش، در مورد رفرش کردن صفحه در نکست جی اس می خوایم صحبت کنیم. یه زمان هایی هست که ما در Next js، نیاز داریم که حتما صفحه به صورت کامل رفرش بشه نه اینکه مثل یه تغییر route معمولی، تغییر روت رو داشته باشیم. کاملا رفرش بشه و اطلاعات از اول لود بشه و کامپوننت ها از اول، لود بشن. اینجاست که رفرش به درد شما میخوره

برای استفاده ازش باید چیکار کنیم؟

  • 1.باید useRouter رو ایمپورت کنیم.
  • 2.باید متغیر router رو بر مبنای همین یوزروتر تعریف کنیم.
  • 3. باید از تابع router.refresh() استفاده کنیم.

آموزش Next js route group

یکی از مواردی که توی دوره آموزش next js پیشرفته مرن فا می تونید یاد بگیرید، next js route group هست.

به چه دردری میخوره؟ واسه اینه که ما بتونیم روت بندی وب سایتمون رو منظم تر کنیم. یعنی شما مثلا توی پوشه app پروژه، یه پوشه auth تعریف می کنید و زیرمجموعهش فایل های register.jsx و login.jsx، بدون اینکه کلمه auth توی url صفحه لاگین و رجیستر بیاد.

خاصیت Lazy loading در Next js

کلا لیزی لودینگ چیه؟ دو تا سایت رو با هم مقایسه کنید لطفا.

1. در سایت اول وقتی صفحه میخواد لود بشه، از هدر تا فوترش باید لود بشه. بعد لود شدن صفحه به اتمام برسه و بتونید بخش های مختلف سایت رو ببینید.

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

سوال: سرعت لود اولیه کدوم سایت بیشتره؟ کدوم کاربر پسند تره؟ قطعا دومی. به این خاصیت میگیم لود شدن تنبل یا lazy loading

حالا برسیم به نکست جی اس

یکی از مزایای جذاب Next js لیزی لودینگ هست. در پروژه های معمول، باید کلی کدنویسی بشه یا پکیجی نصب بشه تا قابلیت Lat loading به وب سایت اضافه بشه ولی پروژه های Next js، به طور پیشفرض این قابلیت رو دارن و اصلا نیازی نیست هیچ کاری بکنید.

قابلیت fast refresh در Next js

همچنین یکی دیگه از مزیت های nextjs، قابلیت fast refresh هست. این قابلیت برای طراحان وب‌سایت بسیار کارآمد هست. با این کار دیگه نیازی نیست که وقتی یه تغییری توی کد دادیم، صفحه موردنظر رو دستی خودمون رفرش کنیم که ببینیم صفحه چه تغییری کرده بلکه خودبه‌خود رفرش میشه. به این خاصیت hot reloding هم میگن بعضیا.

آموزش مدیریت استیت ها( state managment ) در Next js

یکی از موارد بسیار مهم در Next js، مدیریت استیت ها هست. در واقع ما در نکست جی اس برای تعریف یک متغیر ساده از useState و یا const استفاده میکنیم.

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

راهکار این موضوع، استفاده از state managerهایی مثل Redux و Context هست. برای استفاده از این دو، باید ابتدا یک مخزن متغیر تعریف کنیم، سپس برای دریافت مقدار آنها و یا تغییر مقدار آنها، تابع تعریف کنیم و در نهایت این توابع را در بخش های مختلف اپلیکیشن فراخوانی کنیم. آموزش کامل این مفاهیم نکست جی اسی در دوره نکست پیشرفته مرن فا موجود هست که میتونید ببینید.

آشنایی با catch all route

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

  • Static Route
  • Dynamic Route
  • Catch All Routes

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

به صفحاتی از پروژه Next.js که کل Url آنها و فقط یک بخش از آنها متغیر است، داینامیک روت گفته می شود. مثل صفحه تک محصول، صفحه تک دوره و...

به صفحاتی که دارای یک بخش ثابت و چند بخش متغیر هستند، Catch All Routes گفته می شود. مثل صفحه جزئیات هر سفارش، جزئیات هر محصول در داشبورد سایت و...

آموزش استاتیک روت ها و داینامیک روت ها در نکست جی اس، در جلسه 23 دوره آموزش Next js مقدماتی مرن فا هست که در ابتدای صفحه میتونید مشاهده کنید.

معمولا کچ آل روتز برای صفحات تو در تو و لایه بندی شده استفاده می شود. یعنی اگه شما یک صفحه پنل ادمین داشته باشید، باید برای دیدن لیست همه کاربرها، لیست جزئیات هر کاربر، لینک جزئیات هر سفارش هر کاربر و... صفحه ای جداگانه داشته باشید. اینجاست که Catch All Routes در Next.js به دردتون میخوره... آموزش کچ آل روتز در نکست جی اس هم در نکست پیشرفته مرن فا موجود هست.

آموزش error handling در Next.js

مدیریت ارورها در یک پروژه نکست جی اسی، با فایل error.jsx انجام میشه. شما میتونید توی روت اصلی پوشه app، یک فایل با نام error.jsx بسازید. سپس به صورت یک کامپوننت کلاینت ساید، براش خروجی در نظر بگیرید. زمانی که اپلیکیشن شما به ارور بخوره، این صفحه به کاربر نمایش داده میشه. این موضوع در دوره آموزش Next.js مقدماتی مرن فا آموزش داده شده. جلسه 25

آموزش خروجی گرفتن از پروژه next js

کلا برای دیپلوی و سپس آنلاین کردن پروژه نکست جی اس، نیاز هست که ابتدا ازش خروجی بگیریم و سپس روی هاست، آپلودش کنیم. برای خروجی گرفتن ابتدا باید وارد فایل package.json بشیم و عبارت build رو اضافه بکنیم در کنار dev و start و... همچنین ولیویی که برای آیتم build در نظر میگیریم هم باید next build باشه.

سپس باید عبارت npm run build رو بزنیم یا به عبارت دیگه npm run next build. این رو بزنید، خروجی رو توی پوشه .next بهتون تحویل میده...

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

بازار کار برنامه نویس Next.js در ایران

در مورد بازار کار فریمورک نکست جی اس، میشه گفت که به زودی تقریبا همه کسب و کارهای مهم، وب سایتشون رو میارن روی نکست جی اس، همونطور که دیجی کالا، فرادرس، ترب، ژاکت، تخفیفان، نماشا، فیلم نت و کلی از وب سایت های دیگه، وب سایتشون رو آوردن روی Next js. بر همین مبنا، خیلی ساده میشه متوجه شد که بچه هایی که next js developer یا node js developer هستن رو تا چند سال آینده، رو هوا میزنن.

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

اطلاعات کلی در مورد nextjs

سایت اصلی نکست جی اس، nextjs.org هست که داکیومنتش بسیار میتونه بهتون کمک بکنه. البته سایت استک اور فلو رو هم در نظر داشته باشید.

نصب و راه اندازی پروژه next.js :

برای نصب و ساختن پروژه Next js هم از دستور زیر استفاده می کنیم. اینو توی ترمینال یا cmd پیست کنید و انتر بزنید.

npx create-next-app@latest

آموزش ساختن پروژه دیفالت Next js 13 - 14 - 15

آموزش رایگان next.js

از آدرس زیر، میتونید پروژه دیفالت با Next js 13 رو دانلود کنید. البته برای استفاده ازش، طبق این مراحل باید عمل کنید.

  • 1. فایل rar رو دانلود کنید و اکسترکتش کنید توی لپتاپتون.
  • 2. پوشه client رو در vscode یا کد ادیتور مورد نظرتون باز کنید.
  • 3. ترمینال رو باز کنید و یه npm i بزنید تا موارد مورد نیاز پروژه نصب بشه. البته شاید نیاز به vpn هم باشه.
  • 4. پس از اتمام فرایند بالا، npm run dev بزنید تا پروژه شروع به کار کنه.

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

چرا next js از بقیه بهتره؟

ببینید دیجی کالا، ترب، فرادرس، ژاکت و کلی از سایت هایی که غول های کسب و کار امروز هستن؛ سایتشون با next js هست. همین نشون میده که نکست جی اس بهتر از بقیه هست. خلاصه اگه بخوام بگم سرعت و سئوی next js خیره کنندهست.

پیش‌نیاز‌ها و مسیر آموزش nextjs ؟

یادگیری html و css و جاوااسکریپت که نیازه. بعد اینا بیاید سراغ react.js و ریکت رو فقط با فانکشنال کامپوننت یاد بگیرید. مهمترین هوک ها میشه useEffect و useState و useRef. بعدش هم next js و tailwind.css رو اوکی کنید. کل مسیر فرانت میشه همین. نکست جی اس رو هم میتونید از همین دوره رایگان آموزش next js با مرن فا شورع کنید.

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

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

آموزش Authenticatin در Next js هم توی مرن فا هست؟

بله. بحث احراز هویت با Next Auth و JWT در مرن فا هست. ما در این دوره ها، علاوه بر بحث احراز هویت، مبحث ارسال ایمیل و پیامک رو هم پیاده کردیم تا شما بتونید با خیال راحت پروژه هاتون رو پیش ببرید. این موارد در دوره های فروشگاه فایل، وبلاگ پیشرفته و احراز هویت آموزش داده شده اند...

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

next js یک فریمورک فول استک یا به اصطلاح مرن استک هست. با آموزش next js میتونید frontend و backend رو در کنار هم توی یه پروژه بزنید. البته معمولا به عنوان فریمورک فرانت استفاده میشه.

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

یادگیری next js بسیار ساده هست. فقط نیاز به پایه خوب داره. باید javascript رو خوب بلد باشید. از ریکت نیازه که فقط منطق کار با کامپوننت و هوک و jsx نویسی رو بلد باشید . با node.js هم آشنا باشید خوبه، البته یادگیری نود توی پروژه بهتره که توی مرن فا هم هست..

چرا آموزش next js با مرن فا؟

توی مرن فا، دوره های تئوری هم وجود داره ولی تمرکز ما، روی آموزش پروژه محور next js هست. همیشه چیزی که به صورت تئوری یاد میگیریم، با بازار کار فاصله داره. ما توی مرن فا، روی پروژه های واقعی کار میکنیم تا شما رو آماده ورود به بازار کار واقعی کنیم نه اینکه صرفا مبحثی رو آموزش داده باشیم.

آموزش next js با سهیل جعفری

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

سهیل جعفری، برنامه نویس حوزه Next js و Node.js، مدرس بیش از 100 ها ساعت آموزش های مرتبط با نکست جی اس به صورت تئوری و پروژه محور، موسس مرن فا، اولین مرجع تخصصی Next js ایران و همچنین برنامه نویس بسیاری از وب سایت های Mern stack است...

آخرین دیدگاه های سایت

استاد دمت گرم. چقدر روون توضیح میدی.

لطف دارین. باعث افتخاره که رضایت دارین از دوره ها

استاد ممنون بابت اینکه به نظرات مخاطبینتون توجه میکنین. من دو ماه پیش بود بهتون گفتم که تایپ اسکریپت توی رو هم لطفا آموزش بدید. امروز دیدم که به سایت اضافهش کردید.پروژه این دوره به چه صورت هست؟

سلام. تشکر از شما. باعث افتخاره که مرن فا رو انتخاب کردید. این دوره در حال برنامه ریزی هست ولی فعلا چیزی که مدنظرم هست به این صورت هست: 1. یه پروژه فول استک با فرانت و بک اند نکست هست. 2. احتمالا یه سایت پورتفولیو خواهد بود. یعنی عملیات حذف و اضافه کردن پورتفولیو رو خواهیم داشت( به صورت کلی عملیات کراد ) 3. توی این پروژه، از framer motion برای انیمیشن دادن به بخش های مختلف صفحات استفاده خواهیم کرد. همچنین برای تغییر صفحات 4. پس از تکمیل این موارد، تایپ اسکریپت رو شروع میکنیم و کم کم تایپ اسکریپت رو هم به پروژهمون اضافه میکنیم و موارد رو داینامیک میکنیم. 5. در نهایت هم تفاوت هایی که یه پروژه تایپ اسکریپت و یه پروژه جاوااسکریپت دارن رو میبینیم مثلا بحث هوک ها، مثلا بحث کانتکست، مثلا بحث پراپس، مثلا بحث فرم ها و....

ممنون بابت آپدیت دوره. واقعا بحث OTP رو نیاز داشتم و بلد نبودمش.

سلام. تشکر از شما. توی سایت های امروزی، عموما از OTP یا رمز عبور یک بار مصرف استفاده میشه. خوشحالم که براتون مفید بوده....

طولانی بود ولی بالاخره امروز تموم شد. ممنون از شما. استاد دیدم که توی کانال تلگرام، یه نظرسنجی گذاشته بودین در مورد برگذاری دوره فروشگاهی با نکست و تایپ اسکریپت به نظرم برگذارش بکنین. من خودم شرکت میکنمش چون زدن یه پروژه مارکت پلیس، بالای 30 میلیون تومنه امروز.

خسته نباشید. امیدوارم این دوره براتون مفید بوده باشه. باید ببینم دوستان چه نظری میدن دیگه... کانال نزدیک 140 نفر عضو داره. اگه بالای 10 نفر بگن که شرکت میکنن، برگذارش میکنم. در غیر این صورت، احتمالا برگذار نمیشه...

واقعا سطح دوره ها بالاست. تشکر که علمتون رو به اشتراک میزارید.

سلام. بسیار لطف دارین. خوشحالم که براتون مفید بوده...

سلام وقت بخیر.یه سوالی برام پیش اومده،شما الان در این آموزش پروژه محور نحوه طراحی یه سایت فروش فایل رو آموزش دادید،الان بر فرض ما بخوایم برای مشتری یه همچین سایتی رو طراحی کنیم،باید پنلی تعریف کنیم اون کاربر بتونه محصولات و فایل هاشو راحت آپلود کنه و محتویاتش رو به راحتی روی سایتش قرار بده درسته؟ آیا این موضوع رو آموزش دادید در این پروژه؟ یا آموزش جدایی براش تعریف شده؟

سلام. امیدوارم حالتون عالی باشه. بله. پیشنهاد میکنم ویدئوی معرفی دوره رو ببینید. این موضوع توی دقیقه 15:30 از ویدئوی معرفی دوره اومده.... توی این دوره هم بحث داشبورد مدیریتی رو داریم، هم بحث حساب کاربری و احراز هویت، هم بحث پرداخت و سبد خرید و خیلی چیزای دیگه. پیشنهاد میکنم امروز دوره رو تهیه کنید. چون تا چند روز دیگه، قیمت دوره زیاد میشه...

استاد سلام. من میخوام پروژه بزنم ولی دو دلم که اینو شرکت کنم یا نه. میشه یه مقدار راهنمایی بکنین؟ چون بک اند بلد نیستم. ولی این پروژهتون خیلی خفنه. دوست دارم یاد بگیرمش.

سلام. بک اند سخت نیست. پیشنهاد میکنم که فصل اول این دوره که فرانت اند هست رو ببنید. بعدش به کمک دوره اکسپرس خلاصه مرن فا، توی دو ساعت اکسپرس رو یاد بگیرین( یا توی یوتوب فارسی یاد بگیریدش). بعدش ادامه این دوره رو ببینید. بک اند اکسپرس با جاوااسکریپت هست و این موضوع بسیار کمک کننده هست. چون دیگه نیاز به یادگیری زبان جدید نیست.

حیفه این همه پول که واسه دوره های دیگه دادیم. کارت بیسته مهندس

شما لطف دارید. باعث افتخار ماست که مخاطب مرن فا هستین. اگه دوست داشتید، میتونید توی کانال تلگرام هم عضو شید. گاهی اوقات اطلاع رسانی ها توش انجام میشه. گاهی اوقات آگهی پروژه گذاشته میشه. گاهی اوقات هم مطالب آموزشی به درد بخور. https://t.me/mernfa

واقعا توی طراحی یه وبسایت فول استک چیزی نمونده که نگفته باشن. چیزایی که اگه خود آدم بخاد از اول براش وقت بزاره خیلی معطلی داره. دوره ها هم که کاملا اپدیت و با اخرین نسخه ها دارن پیش میرن💪 خیلی خیلی خدا قوت

خوشحالم که براتون مفید بوده. واقعا از شما و عزیزان دیگه ای که اعتماد میکنن تشکر میکنم. خیلی برام جذاب و ارزشمنده که یه سری از دوره ها، هنوز شروع نشدن یا مثل همین دوره وبلاگ، هنوز به انتها نرسیدن؛ در عین حال تعداد زیادی از مخاطبین ثبت نام میکنن. واقعا ممنون بابت اعتمادتون🌻🌹

سلام. استاد من میخوام فروشگاه فایل رو ثبت نام کنم ولی بک اند اکسپرس رو بلد نیستم. دوره اکسپرس خلاصه شما کافی هست برای گذروندن این دوره؟

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

سلام وقت شما بخیر توی این آموزش از اکسس توکن و رفرش توکن استفاده شده؟ منظورم اینه که این موارد گفته شدن یا نه؟

سلام. امیدوارم حالتون عالی باشه. کلا زمان استفاده از JWT دو تا رویکرد وجود داره. رویکرد اول اینه که کلا از یه توکن استفاده کنیم یعنی فقط اکسس توکن. رویکرد دوم هم اینه که از دو تا توکن استفاده کنیم( رفرش توکن و اکسس توکن به هم). توی مطالبی که تا الان گفته شده یعنی تا جلسه 28، رویکرد اول فقط توضیح داده شده. یعنی فقط اکسس توکن رو داریم. اما بحث کار کردن با رفرش و اکسس هم تا چند وقت دیگه اضافه میشه. یعنی بعد از اتمام دوره وبلاگ پیشرفته، چند تا جلسه به این دوره اضافه میشه. توی اون جلسات، بحث رفرش توکن و اکسس هم اضافه میشه به مطالب دوره.