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

قبل از شروع مطالعه متن، نیازه که اینو خدمتتون بگم. میتونید مطالب رو به صورت ویدئویی در دوره آموزش 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 13 رو دانلود کنید. البته برای استفاده ازش، طبق این مراحل باید عمل کنید.

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