آموزش Next js 15 رایگان و پروژه محور با مرن فا

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

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

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

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

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

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

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

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 با مرن فا هم برای آموزش نکست جی اس استفاده کنید.

آموزش سئو در 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 هم در همین هست. زمان گذاشته شدن دیتا در کد صفحه

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

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

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