آموزش NEXT JS 13 ( نکست جی اس) به صورت رایگان با مرن فا

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

1. آموزش کار با کلی از پکیج های نکست جی اسی

2. طراحی اسلایدر با swiper slider در Next js

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

4. کنترل تعداد خطوط متن ها در باکس محصول

5. چینش کامپوننت ها در صفحه، در پروژه نکست جی اسی

6. کار با react hook form در next js 13

7. کار با فایل های Error.js و NotFound.js و Loading.js

8. آموزش Node.js و Express js به صورت پروژه محور

9. سیستم پراپس برای مدیریت تب ها در داشبورد وب سایت

10. سیستم Catch All Routes برای مدیریت تب ها در صفحه حساب کاربری

11. آموزش پروژه محور context در Next js 13 برای مدیریت سبد خرید

12. کار با انواع متدهای node js ای مثل select و find و...

13. احراز هویت در نکست جی اس و نود جی اس با سیستم jsonwebtoken

14. مدیریت کوکی ها در Next js به صورت کلاینت ساید و سرور ساید

15. آموزش کار با MongoDB

16. آموزش ارتباط با درگاه پرداخت در Next js 13

17. دیپلوی پروژه Next js و Node.js

18. سیستم جستجو بین محصولات و مقالات دارای انواع فیلتر ها

19. نحوه صفحه بندی کردن یا pagination

20. کلی چیز دیگه که کم کم به این لیست اضافه میشه

21. آموزش کامنت های تودرتو ( nested comments) با نکست جی اس 13

22. آموزش امنیت در Next js و Node js

23. سئوی در کدنویسی پروژه نکست جی اس

24. آموزش ریسپانسیو با Tailwind css

25. ارتباط بین مدل های بک اندی مثل محصول و دسته محصول

معرفی ساختار پروژه فروشگاه فایل:

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

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

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

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

نکات بسیار بیشتری وجود داره که با دیدن ویدئو معرفی، میتونید این موضوع رو ببینید مثل آموزش احراز هویت ایمیلی در Next js 13 و Express js، مباحث امنیت، ریسپانسیو در tailwind css و...

یک نکته ای هم که نیازه بگم، اینه که ما توی ساختار سایت، درسته از jsx استفاده میکنیم ولی مهمتر از اون، اینه که توی این jsx، از کدهای مربوط به html استفاده میکنیم یا html5. استفاده از HTML5 در طراحی وب سایت، از نظر سئو بسیار مفید هست و ما در طراحی این وب سایت، کاملا از تگ های مربوط به html5 استفاده میکنیم.

توی این آموزش Next js مرن فا موارد پیشرفته نکست جی اس رو یاد میگیریم. چیزهایی مثل

• -

  آموزش Next js SWR

• -

  بررسی دقیق تگ Image همراه با ریسپانسیو

• -

  پراپس تگ ایمیج: sizes - width - height - fill - quality - priority

• -

  ریکت توستیفای در نکست جی اس 13

• -

  آموزش استفاده از Context در Next js 13

• -

  آموزش ریداکس در نکست جی اس( Redux Toolkit در Next js 13)

• -

  گرفتن دیتا برای داده های ریداکسی به صورت SSR و CSR

• -

  آموزش RTK Query ( گرفتن دیتا با ریداکس تول کیت در نکست جی اس 13)

• -

  آموزش React Hook Form در Next js 13

• -

  آموزش redirect ها در Next js 13

• -

  آموزش Catch all routes در Next js 13

• -

  آموزش نوشتن بک اند با Next js 13 - آموزش پوشه API نکست جی اس

• -

  اتصال به دیتابیس آنلاین Mongodb در Next js

• -

  آموزش عملیات کراد در نکست جی اس( اضافه کردن پست، آپدیت و حذف از دیتابیس)

• -

  آموزش middleware ها در نکست جی اس 13

• -

  آموزش Cookie ها در client کامپوننت ها و server کامپوننت ها در Next js 13

• -

  آموزش مفاهیم route groupe در Next js 13

• -

  آموزش آپلود عکس در پوشه public نکست جی اس 13 با فرم فرانت اندی

• -

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

• -

  آموزش دیپلوی پروژه Next js روی هاست نود جی اسی

• -

  بررسی سئو در کلاینت کامپوننت ها و use client در صفحات

• -

  فایل env در نکست 13

• -

  کوکی ها، کوئری ها و پارامز در پوشه api پوشه app نکست جی اس 13

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

نکته : توی این دوره ما چیا یاد میگیریم؟ نوشتن فایل سرور، پکیج های ضروری اپ بک اند express js، روت ها، کنترلرها، مدل ها، میدلورها، دات انو، دیپلوی و آنلاین کردن سرور و دیتابیس، api برای ایجاد مقاله، آپدیت مقاله، حذف مقاله، گرفتن تک مقاله، گرفتن اطلاعات همه مقاله ها، گرفتن بخشی از اطلاعات همه مقاله ها، کار کردن با mongo db compass، کار کردن با postman و...

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

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

مقایسه next js با بقیه تکنولوژی ها

همین اول بهتون بگم چرا هر چی زودتر باید بیاید سمت آموزش next js

یکی از راه هایی که میتونیم بفهمیم چه فریمورکی از بقیه بهتره و چند سال آینده، وب سایتها دارن به اون سمت میرن، اینه که ببینیم برترین سایت های ایران، دارن از چه تکنولوزی هایی استفاده میکنن.
این سایت هایی که پایین لیست شدن، همهشون توی بازه 1400 تا 1401، شیفت کردن به next js. از خودتون کافیه بپرسید چرا؟ مطمئن باشید باقی وب سایت های بزرگ کسب و کار هم، حالا توی هر حوزه ای که باشن، به زودی میان روی next js

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

پیش نیاز های آموزش next js

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

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

یه مقدار بیشتر در مورد کاربردهای js بدونیم خوبه.

تعاملی کردن صفحه با جاوااسکریپت

یعنی چی؟ یعنی اینکه اگر کاربر فلان کار رو کرد، توی سایت فلان اتفاق بیفته مثلا اگر کاربر اسکرول کرد به پایین، دکمه اسکرول به بالا ظاهر بشه یا مثلا توی اسلایدر، با کلیک روی آیکن جهت، اسلاید تغییر میکنه. این اسلایدرها همهشون با js زده میشن.

ارتباط با بک اند به کمک جاوااسکریپت

یعنی چی؟ یعنی با پکیج هایی مثل axios، fetch یا swr و...، درخواست میزنیم به یه API ، و اطلاعاتی رو میفرستیم به سرور یا مثلا اطلاعات رو میگیریم و توی صفحه نمایش میدیم مثلا محصولات. علاوه بر این، تعداد محصولاتی که نمایش داده میشه و همه کنترل های دیگه روی محصولات، به کمک جی اس هست. اگر میخواید در مورد بک اند بیشتر بدونید، پیشنهاد میکنم که مقاله node.js چیست رو حتما بخونید.

امنیت با جاوااسکریپت در فرانت

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

React js چیست؟

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

مزیت های ریکت جی اس

منطق ریکت، منطق SPA یا single page application هست و بر مبنای component ها کار میکنه. کامپوننت چیه؟ توی یه اپ کامپوننت‌محور، هر تیکه از سایت جدا طراحی میشه و میشه یه کامپوننت مثلا کامپوننت اسلایدر اصلی، کامپوننت محصولات، کامپوننت آخرین پست ها، کامپوننت فوتر و... مثلا توی اسلایدر، هر کدوم از خود اسلایدها هم میشن یه کامپوننت. حالا وقتی صفحه سایت میاد بالا، کامپوننت های مورد نیاز صفحه اصلی میان بالا؛ حالا اگه کلیک بکنید روی مثلا صفحه درباره ما، کامپوننت های صفحه اصلی حذف و کامپوننت های مورد نیاز صفحه درباره ما لود میشه و این فرایند چقدر طول می‌کشه؟ اگه نیاز به لود اطلاعات از سرور باشه در بدترین حالت 4 ثانیه، اگه نباشه، نیم ثانیه.

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

کاربرد Node js در Next js

برای زدن بک اند سایت، میتونید از زبان های مختلفی استفاده کنید، php، python و کلی چیز دیگه. از jacascript هم میشه استفاده. برای زدن بک اند با جی اس، از node js استفاده میکنیم. برای اینکه آموزش Next js رو شروع بکنید و پروژه با نکست جی اس بزنید، نیاز نیست که node.js رو به صورت کامل بلد باشید. پیشنهاد من اینه که یه دوره کوتاه در مورد نود جی اس ببینید، در حد 2 ساعت، بعد بیاید توی دل پروژه ها، توی پروژه بیشتر آدم یاد میگیره تا آموزش تئوری. یه پروژه بزنید یا مثلا یه دوره پروژه محور نود جی اس ببینید. بعد دوباره برید و یه دوره رایگان node.js ببینید. یعنی در واقع میشه یه دوره خلاصه نود، بعدش یه پروژه نود، بعدش یه آموزش مفصل و کامل نود. آموزش رایگان node.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 رو داریم.

اینو دیگه همه میدونن که وقتی توی یه صفحه، ctrl+u بزنیم، صفحه جدیدی توی مرورگر باز میشه که کل کدهای اون صفحه از وب سایت رو بهمون نشون میده؛ همه. توی یه اپ ریکتی، وقتی کنترل یو میزنیم، صفحه جدید باز میشه ولی تگ های صفحه مثل div ، h1 ، span و کلا هیچ تگی اصلا نشون داده نمیشه و این نمره منفی سئو داره.

علت این موضوع هم اینه که توی ریکت، از کلاینت ساید رندرینگ استفاده میکنیم یعنی مثلا useEffect یا مثلا useswr. جالبه که اگه کنترل راست بزنید توی صفحه سایت و inspect رو بزنید، کدها هست ولی توی ctrl+u نیست. این در حالی هست که توی اپ نکست، همه تگ ها، همه متن ها و ... به طور کامل نمایش داده توی ctrl+u. اینه که باعث میشه توی نکست، سئو داشته باشیم. اینه که لود سایت ریکتی بیشتر طول میشکه. این مورد رو توی جلسه دوم دوره آموزش Next js رایگان با مرن فا کامل توضیح دادم اما اگه خلاصه بخوام بگم، ما توی next js، درسته میتونیم مثل ریکت از csr یا کلاینت ساید رندرینگ استفاده کنیم ولی علاوه بر اینا، ssr و ssg رو هم داریم. اینا هستن که سئو رو میارن به پروژه نکست جی اسی.

نحوه کار کردن سایت react.js با اطلاعات سرور و تفاوتش با Next js

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

ولی توی نکست جی اس، همون ابتدا تگ های html و css برای کاربر فرستاده میشه، کاربر صفحه اولیه رو میبینه تا اینکه به صورت کامل صفحه لود میشه. این موضوع به شدت روی سئو صفحهتون تاثیر گذاره. یه مقوله ای توی سئو داریم به اسم زمان لود اولیه.
علاوه بر این موضوع، نکست برای گرفتن اطلاعات و ساختن صفحه‌ای که باید به کاربر نشون بده، از سرورساید جنریشن(ssg)، سرورساید رندرینگ(ssr) و همچنین کلاینت ساید رندرینگ(csr) استفاده میکنه در حالی که ریکت فقط از csr میتونه استفاده کنه. seo هم در دل ssr و ssg نهفته شده نه csr.
همین موضوع باعث میشه که ما توی پروژه های Next js، از csr یا در واقع useEffect و SWR فقط برای لود اطلاعاتی استفاده میکنیم که سئوشون برامون مهم نیست مثلا سایدبار یا مثلا کامنت ها.

مقایسه ssr، ssg و csr

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

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

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

Csr چیست؟

سی اس آر(کلاینت ساید رندرینگ)، یعنی اطلاعات کاملا کلاینت لود میشه و اصلا به سئو کاری نداره مثلا پکیج swr فقط برای لود سی اس آر هست. یا مثلا هوک useEffect. ببینید بالاتر دو تا نکته بهتون گفتم. سی اس آر دقیقا نکته دوم رو رعایت نمیکنه. نحوه استفاده ازش اینطوریه که ابتدا صفحه‌ی بدون اطلاعات( اطلاعاتی که سئوشون برای ما مهم هست) ساخته میشه. بعد درخواست زده میشه به بک اند و اطلاعات توی فرانت لود میشه. حالا اطلاعات لود شده، پخش میشه توی کامپوننت های مختلف و به کاربر نمایش داده میشه. به نظرتون راه دیگه ای برای لود اطلاعات نیست؟ هست. اگه ssg و ssr رو بخونید، میبینید که راه های دیگه ای هم برای لود اطلاعات وجود داره.

کاربرد csr در next js

میشه گفت ما توی nextjs، از سی اس آر استفاده می‌کنیم ولی نه هرجایی. جایی که سئو برامون اهمیت نداره مثلا گاهی اوقات سایدبارها، از نظر سئو اهمیت ندارن. پس برای لود کردنشون از همین روش استفاده میکنیم یا مثلا بخش کامنت ها.

Ssg چیست؟

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

حالا این حرف من، به این معنی نیست که اصلا نمیتونید تغییری توی سایتتون ایجاد کنید، برای تغییر، باید پروژه رو وردارید، تغییرتون رو توش ایجاد بکنید، دوباره بیلد بگیرید و توی هاست، دیپلوی کنید. 🙂🥶

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

Ssr چیست؟

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

کارکرد سرور

سرور وقتی با درخواست csr و ssr و ssg مواجه میشه، چیکار می‌کنه؟

توی csr

• 1. درخواست فرستاده میشه به سرور
• 2. سرور فقط اطلاعات مورد نیاز صفحه رو میگیره از دیتابیس و می‌فرسته به کلاینت
• 3. کلاینت صفحه رو می‌سازه.
• 4. کاربر صفحه رو می‌بینه

توی ssg

• 1. کاربر یه درخواست میزنه به سرور
• 2. سرور صفحه ای کاربر میخواد رو زمان آپلود پروژه روی هاست ساخته و داره. همونو میفرسته واسه کاربر
• 3. کاربر صفحه رو می‌بینه

توی ssr

• 1. کاربر درخواست می‌زنه به سرور
• 2. سرور اطلاعات جدید رو از دیتابیس میگیره و صفحه جدید رو همون لحظه میسازه
• 3. صفحه فرستاده میشه به کلاینت.
• 4. کاربر صفحه رو میبینه.

قبل از توضیح بیشتر اینو بگم.

. به صفحاتی مثل صفحه اصلی، صفحه همه پست ها، درباره ما و کلا اینجور صفحات، که آدرسشون همیشه ثابته میگیم صفحه ثابت یا static route مثل صفحه mernfa.ir/courses. . به صفحاتی هم که یه بخشی از یوآرالشون ثابته و انتهای url متغیر؛ میگیم روت متغیر یا dynamic route. مثل صفحه هر پست، صفحه هر محصول و... مثل example.ir/posts/what-is-next یا مثلا example.ir/posts/what-is-node

برای لود کردن اطلاعات توی ssr و ssg (دو تا سرورسایدها )، هر کدوم یه تیکه کد خاص خودشون رو دارن که این کد رو، همیشه ما توی پروژه های Next js انتهای صفحه میزاریم. دقت کنید: انتهای صفحه نه کامپوننت. توی کامپوننت نمیتونیم ssr و ssg داشته باشیم. توی صفحات فقط میتونیم این دو مورد رو داشته باشیم. برای گرفتن اطلاعات توی کامپوننت ها، یا باید با پراپس، اطلاعات رو از صفحه منتقل کنیم به کامپوننت، یا هم اینکه از csr استفاده کنیم. استفاده از سی اس آر توی کامپوننت Next js اوکی هست.

1. SSG

1. برای روت های ثابت از این کد استفاده می‌کنیم:

2. برای روت های متغیر

2. SSR

1. برای روت ثابت

که البته اون بخشی که context نوشته شده، فقط اون نیست، کلی ورودی می‌تونه بگیره مثلا

2. برای روت های متغیر

نکته

برای گرفتن اطلاعات از بک‌اند در Next js، علاوه بر این سه روش csr ، ssg و ssr، یه روش دیگه ای هم داریم به اسم isr . این روش یعنی اینکه شما توی یه صفحه، از 2 روش استفاده کنی. مثلا برای بخش هایی از صفحه که سئوش براتون مهم نیست، از CSR استفاده کنی و برای بخش هایی که سئوشون مهمه، از SSR یا SSG. دقت کنید. توی یه صفحه، نمیشه هم از ssr استفاده کرد و هم از ssg. فقط یکیشون.

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

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

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

علاوه بر این ، زمان طراحی سایت، ما از همه کلاس های تیلویند که استفاده نمیکنیم. از یه تعدادیش استفاده می‌کنیم. زمان بیلد گرفتن از پروژه‌ی تیلویندی، همه کلاس هایی که در طراحی سایت ازشون استفاده نشده، خود به خود حذف میشه و باز حجم سی اس ,اس شما میاد پایین تر.

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

آموزش Next js image

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

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

تگ یا بهتره بگم کامپوننت Image، یه سری قابلیت جذاب هم داره که دونه دونه بررسیشون میکنیم. فقط قبلش خوبه که اینو در مورد طول و عرض تصویر بهتون بگم. خیلی اوقات این طول عرض، scale هست. به خاطر همینه که مینویسیم 200 نه 200px. یعنی اگر طول رو بدیم 200 و عرض رو 300، نسبتشون میشه 1.5 و این مهمه.

اولین خاصیت، objextFit هست( این مورد در آخرین آپدیت نکست جی اس یعنی Next js 13 ، حذف شده). چندین مقدار میگیره. اولیش cover هست یعنی کل اون فضایی که توش قرار گرفته رو پر میکنه. هر بخشی هم که بزنه بیرون از فضا، اون بخش عکس حذف میشه. دومی contain هست که کاری به فضایی که توش قرار گرفته نداره، بلکه هدف اینه که تصویر به صورت کامل نمایش داده بشه. حالا یا طول عکس، بیشترین طول فضایی که توش قرار گرفته رو میگیره یا عرض عکس. سومی fill هست. این خاصیت یعنی اینکه عکس انقدر کشیده یا جمع میشه که توی اون فضا جا بشه. مثلا یه عکس 400*300 توی یه فضای 200*800 چطوری جا میشه؟ ارتفاع عکس رو از 400 میکنه 200 و عرض رو از 300 تبدیل میکنه به 800. بدی این حالت اینه که معمولا عکس دفرمه میشه.

دومین خاصیت next image، خاصیت layout هست.( این مورد در آخرین آپدیت نکست جی اس یعنی Next js 13 ، حذف شده) چه مقادیری میگیره؟ اولین مقدار، responsive هست. توی این حالت، تصویر نگاه میکنه که چه فضایی در اختیارش قرار داده شده(چه مقدار ارتفاع و عرضی) . با توجه به scale عکس، اندازه عکس رو خودش تعیین میکنه. یعنی اگر شما یه فضای با ارتفاع بدون اندازه و یه عرض 600 پیکسلی در اختیار یه عکس 200*200 بزارید، توی این حالت، چیزی که میبینید یه عکس 600*600 هست. البته توی موبایل، قطعا عکس کوچیکتره ولی همون scale=200/200=1 رو حفظ میکنه. دومی، fixed هست که حالت عادی تصاویر هست. یه عکس 200*200 رو بهتون با اندازه های 200px*200px نشون میده. آخریش هم intrinsic هست که باعث میشه عکس، امکان بزرگ شدن رو نداره ولی اگه صفحه کوچیک بشه، تصویر هم کوچیک میشه؛ البته با حفظ scale.

نکته: اولا، اگه یه مقدار امتحان کنید، کامل دستتون میاد. دوما، شما باید همیشه width و height رو تعیین کنید. سوما معمولا خودم چه تنظیماتی میزاریم؟ مثلا عرض رو میزارم 400 و ارتفاع رو 300 و layout رو میزارم fixed و objectFit هم cover. البته عرض و ارتفاع رو نیازه خوتون تعیین کنید ولی لی اوت و آبجکت فیت، این دو تایی که گفتم خوبن.

یه خاصیت دیگه از تصاویر در Next js، خاصیت quality هست. یه عدد از 0 تا 100 میگیره که میتونید باهاش کیفیت عکس رو کاهش بدید.

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

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

راه حل این موضوع این هست.

• برید توی فایل next.config.js پروژهتون و بخش images از کد پایین رو بهش اضافه کنید. کلا فایل رو تبدیل نکنید به همین کد، بلکه فقط اون تیکه images رو اضافه کنید.
  اون host-name رو از کجا میارید؟ توی اروری که روی صفحه ظاهر شده، نوشته. به ازای هر سایت خارجی که ازش عکس میارید، باید یه هاست نیم توی این فایل پروژه Next js اضافه کنید.
• 
• حالا پروژه رو یه بار ری استارت کنید. همه چی اوکی هست.

نکته آخر هم اینکه نکست جی اس 13 که اکتبر 2022 منتشر شد، یه سری تغییرات روی نکست جی اس ایمیج ایجاد کرد. در نتیجه میتونید توی دوره آموزش Next js رایگان با مرن فا کار کردن با Next js13 Image رو هم یاد بگیرید.

آموزش Next js link

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

توی Next js12 نیاز بود که یه تگ a داخل تگ Link بزاریم تا بتونیم مثلا به لینک استایل بدیم ولی توی نکست جی اس جدید یعنی Next js13، دیگه نیازی به این موضوع هم نیست. اگر className بخوایم، اگر target=_blank بخوایم، میتونیم به خود تگ لینک بدیمش.

آموزش 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 هم میگن بعضیا.

آموزش Next js SWR مرن فا

یکی از هوک های بسیار مهم برای فراخوانی اطلاعات به صورت کلاینت ساید یا CSR، هوک useSwr یا همون کتاب خونه swr هست. معمولا برای فراخوانی اطلاعات بی صورت سی اس آر در Next js، از useEffect و useSwr استفاده میشه. تفاوت این دو تا در چی هست؟

مقایسه useEffect و SWR

خوبی یوزافکت در این هست که یک بخش آرایه داره و میشه توی اون آرایه، چندین متغیر گذاشت. هر وقت این متغیر تغییر کرد،تابع موجود در useEffect اجرا میشه. مثلا ما یه باکس جستجو داریم. نیازه که هر وقت دیتای داخل این باکس تغییر کرد، درخواست زده بشه و اطلاعات از بک اند گرفته بشه.در این زمان، میتونیم از همین یوزافکت یا onchange خود اون input استفاده کنیم. اما مشکلش چیه، یه مقدار کار کردن باهاش سر راست نیست. نسبت به SWR دردسرش بیشتره. علاوه بر این موضوع، توانایی کش کردن اطلاعات رو نداره بر عکس اس دبلیو آر.

خوبی swr چیه؟ اینکه اطلاعات رو کش میکنه، یه متغیر data و یه متغیر error داره که خیلی ساده میتونیم به کمک این دو تا متغیر، بفهمیم که آیا درخواست ما موفقیت آمیز بوده یا شکست خورده.اما نکته اینه که اون آرایه ای که توی یوزافکت داشتیم رو دیگه نداره.

برای استفاده از این هوک ها، باید از client component ها استفاده کنیم و توی آموزش next js 13 مرن فا ، استفاده از use client به صورت کامل گفته شده .

آموزش Next js Context مرن فا

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

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

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

به صورت کلی، کار state manager ها، به اشتراک گذاشتن متغیر ها هست. حالا هر جایی از وب سایت که باشید. چیزهایی مثل Context و Redux همین کار رو انجام میدن...

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

آموزش Next js Redirects مرن فا

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

در نکست جی اس 12، 3 مکانیزم برای ریدایرکت کاربر وجود داشت. رویکرد اول، استفاده از next js router بود. مکانیزم دوم، استفاده از fallback بود که در تابع getStaticProps استفاده میشد و مکانیزم سوم هم، redirect که در سیستم getServerSideProps استفاده میشد.

در Next js 13 که سیستم های SSR و SSG نکست جی اس، هر دو ادغام شدن در روش getData، دو روش برای ریدایرکت داریم. روش اول همون متد روتر هست البته با اندکی تغییر. متد دوم هم مکانیزم ریداریکت داخل تابع گت دیتا هست. این موضوع هم در دوره Next js پیشرفته مرن فا آموزش داده شده...

آموزش next js catch all routes مرن فا

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

ببینید ما توی next js، یه نوع صفحه یا route داریم که ثابت هست. یه نوع روت دیگه هم داریم که بهش میگیم روت متغیر یا dynamic route. فرق روت ثابت و داینامیک چیه؟ این موضوع توی دوره آموزش next js رایگان مرن فا موجود هست. فرقشون در این هست که آدرس روت های ثابت، به صورت کامل ثابته مثل صفحه درباره ما وب سایت، روت متغیر، انتهاش متغیر هست مثل بخش محصولات یه فروشگاه فایل. برای هر محصولی، یه صفحه داریم. توی url صفحه، کل آدرس ثابته فقط اون تیکه انتهاییش متغیره. درسته؟

یه سیستم روت بندی دیگه هم داریم به اسم catch all routes. کارکردش چیه؟ همون روت داینامیک رو توی ذهنتون داشته باشید که بخش آخرش متغیره، ایشون هم آخرش متغیره ولی این بخش آخر فقط یدونه نیست. میتونه 100 تا بخش متغیر بعد از اون بخش ثابتش داشته باشه. مثلا بخش اکانت دوره فروشگاه فایل مرن فا، رو در نظر داشته باشید. ما برای طراحی این صفحه، از همین سیستم استفاده کردیم. url این پروژه نکست جی اسی، یه بخش ثابت داره که تا account/ هست. باقیش همهش متغیره. ابتدا آیدی کاربر میاد، بعدش اون بخشی که هست مثلا بخش سفارش هاش یا کامنت هاش، بعد دوباره دیتیل اون کامنت یا سفارش...

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

آموزش Next js Backend مرن فا

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

سیستم کار کردن با Next js API Route چندان سخت نیست. اگر Node js رو بلد باشید، خیلی ساده زدن بک اند با نکست جی اس رو هم یاد میگیرید.

قطعا معماری MVC به گوشتون خورده. ام نشون دهنده model هست. مدل میشه چی؟ میشه اون موجودیت هایی که توی وب سایت داریم مثلا مدل محصول، مدل کاربر، مدل مقاله.

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

توی Next js هم باید مدل رو داشته باشیم تا بتونیم یه وب اپلیکیشن کامل داشته باشیم و طبق همون کلمه MVC عمل کنیم. توی روت اصلی پروژه، کنار پوشه APP، یه پوشه میسازیم به اسم models و مدل هامون رو اونجا تعریف میکنیم.

حرف دوم از این معماری، V هست. یعنی view که میشه همون کلاینت اپلیکیشنمون. شامل پوشه های app و components میشه. توضیحی هم نیاز نداره. توی دوره های آموزش نکست جی اس مرن فا، میتونید این موضوع رو یاد بگیرید.

بخش انتهایی این کلمه، C هست. یعنی controller. یعنی توابع کنترل کننده. فرض کنید که ما میخوایم یه مکانیزم ثبت نام برای وب سایت نکست جی اسیمون بنویسیم. کاربر وب سایت، میاد و از طریق فرم ثبت نام، یه سری اطلاعات رو میخواد ارسال کنه. سوال. این اطلاعات باید به چه آدرسی فرستاده بشن؟ علاوه بر اون، چه طور ما باید یه کاربر توی دیتابیس وب سایت Next js ایمون ایجاد بکنیم؟

اینجاست که پوشه api نکست جی اس به کمکتون میاد. شما عین همون روت بندی ای که توی پوشه اپ و پوشه پیجز داشتید، توی پوشه ای پی آی هم دارید. این میشه آدرسی که باید بهش ریکوئست ثبت نام رو بزنید.

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

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

شما وقتی بخواید بک اند رو با نکست جی اس بزنید، نیاز به ارتباط با دیتابیس هم دارید، برای این ارتباط برقرار کردن، نیاز به یک فایل mongoDb هم داریم که هر جا نیاز بود با دیتابیس ارتباطی برقرار کنیم، فراخوانیش میکنیم. این فایل، فایلی هست که اپلیکیشن رو با دیتابیس connect میکنه.

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

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

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

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

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

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

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

توی پروژه های nextjs، ما معمولا از صفر که نصب پروژه هست شروع نمی کنیم؛ بلکه با یه پروژه دیفالت که یک سری چیزهای اولیه رو داره شروع میکنیم. توی این ویدئو، هدفمون طراحی این پروژه دیفالت هست که در 4 مرحله انجام میشه.

• 1. آموزش نصب Next js و ساختن یه پروژه باهاش

• 2. نصب react icons روی Next js و آموزش استفاده از اون

• 3. نصب tailwind.css روی Next js

• 4. ایجاد فایل custom.css و افزودن فونت فارسی به پروژه Next js

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

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

ریدایرکت در getServerSideProps

یکی از نکات مهم در مورد getServerSideProps و رفقا، این هست که مثلا توی صفحات محافظت شده‌ی سایت، ما چطور میتونیم قبل از ساخته شدن صفحه یا درواقع بهتره بگم داخل خود getServerSideProps، کاربران رو ریدایرکت کنیم به یه صفحه دیگه راه حل این موضوع تیکه کد زیر هست:

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

مکانیزم ریدایرکت در getStaticProps هم با عبارت rerutn:NotFound انجام میشه که توی به‌روزرسانی های بعدی، بیشتر در موردش حرف میزنم.

یه مکانیزم Router هم که همیشه داریم. میتونید useRouter رو از next ایمپورت کنید. بعد داخل کامپوننت یا صفحه(قبل از jsx)، بنویسید ("/")router.push. صفحهتون ریدایرکت میشه به صفحه اصلی.

خوب سوال:چرا همیشه از روتر برای ریدایرکت استفاده نمیکنیم، علتش اینه که روتر، زمانی کار میکنه که کامپوننت ساخته شده باشه. یعنی کاربر صفحه رو میبینه، بعد از مثلا 0.2 ثانیه، ریدایرکت میشه ولی قبلیا، چون توی دل SSR یا SSG یا ISR انجام میشن، قبل از اینکه، کاربر صفحه رو ببینه، ریدایرکت میشه.

آموزش Next js error handling

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

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

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

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

تغییرات error handling در Next.j 13

در نکست 13، ارور در کنار فایل صفحه ساخته میشه یعنی شما یه پوشه میسازید به اسم blog. توی این پوشه، یه فایل میسازید به اسم page.jsx که میشه فایل اصلی صفحه. یه فایل error.jsx هم میتونید در کنار فایل page.jsx بسازید. هر وقت، اپلیکیشن در نمایش این صفحه بلاگ به کاربر به مشکل خورد، این صفحه ارور نمایش داده میشه. این مورد در دوره آموزش Next js رایگان با مرن فا پوشش داده شده. هدف ما توی این دوره، آموزش رایگان Next js 13 هست.

آموزش Next js _document.js

توی کدنویسی یه قالب HTML، قطعا دیدید که یکی از مواردی که همون اول تعریف میکنیم، زبان سایت هست مثلا برای تعیینش “lang=“fa رو مینویسیم.
سوال اینجاست که آیا معادلش رو در nextjs هم داریم؟

در پاسخ باید گفت که داریم. توی پوشه pages پروژه نکست، یه فایل تعریف میکنیم به اسم _document.js و اونجا این مورد رو اعمال میکنیم. کلا همه فایل هایی که _ اولشون هست، روی کل اپلیکیشن تاثیر گذارن مثل _app و _error و... خوبه بهتون بگم تا حد امکان، به این فایل دست نزنید و اصلا ایجادش هم نکنید ولی اگه نیاز شد، برید سراغش.

در واقع شما با دستکاری این فایل، دارید روی دام اصلی سایت تاثیر میزارید.

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

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

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

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

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

بازار کار Next js در ایران

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

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

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

مقایسه Next js13 و Next js12 همراه با طراحی بلاگ فوق ساده

بررسی تفاوت های Next js 13 و 12

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

به صورت خلاصه اگه بخوام بگم، ما دیگه با پوشه pages سر و کار نداریم. بلکه به جای اون، یه پوشه اضافه شده به اسم app

توی پوشه pages، فقط پوشه api که مربوط هست به بک اند، موجود هست. نه فایل _app ای در کار هست و نه چیز دیگه

تغییر بعدی، نحوه گرفتن اطلاعات از بک اند هست. توی Next js13، به جای getServerSideProps و getStaticProps، مکانیزم جدیدی ایجاد شده به اسم getData. این موضوع، کار ما رو بسیار راحت تر کرده. توی بستر همین تابع، میتونیم تعیین کنیم که میخوایم از SSR استفاده کنیم یا از SSG. این موضوع به صورت کامل توی ویدئو توضیح داده شده.

تغییر بعدی این هست که به جای webpack از turbopack استفاده شده توی ساختار نکست. گفته میشه که اپ رو سریعتر میکنه.

تغییر بعدی در مورد Next js Image هست. پارامتر objectFit و Layout حذف شدن و گفته میشه که سریعتر شده.

پارامتر بعدی که شامل تغییر شده، Next js Link هست. دیگه نمیتونیم توی تگ لینک، از تگ a استفاده کنیم. به جاش، target و className رو میتونیم به خود تگ Link بدیم. این تغییر مفیدی هست.

توی Next js12 اگر میخواستیم یه صفحه مثلا about درست کنیم، یه پوشه میساختیم و توش یه فایل index.jsx؛ اما توی ساختار پوشه اپ، باید از page.jsx استفاده کنیم به جای index.jsx.

اگر مثلا یه پوشه به اسم blog توی پروژه Next js 13 درست کنیم و داخلش هم یه فایل page.jsx، همه چی اوکیه ولی میتونیم به جز page.jsx، فایل های دیگه ای هم توی این پوشه بسازیم.

فایل Error.jsx که برای مدیریت ارورها استفاده میشه.این فایل، مهمه که از نوع کلاینت کامپوننت تعریف بشه. تفاوت کلاینت کامپوننت و سرور کامپوننت رو هم پایین تر به صورت متنی توضیح دادم و هم توی دوره آموزش Next js 13 مرن فا مقدماتی میتونید به صورت ویدئویی ببینید.

فایل Layout.jsx که دو تا کارکرد داره. یک اینکه توش تگ html کلی صفحه رو داریم، در نتیجه میتونیم برای تعیین زبان سایت ازش استفاده کنیم. توی نکست جی اس 12، از فایل _document استفاده میکردیم برای اینکار ولی اینجا، از فایل layout استفاده میکنیم. این موضوع روی سئو سایت موثره.
این فایل، همچنین برای نمایش تمپلیت صفحه هم استفاده میشه . در واقع ما قبلا اگر میخواستیم برای سایت هدر یا فوتر تعریف کنیم، چی کار میکردیم؟ توی فایل اصلی اپلیکیشن یعنی app.js_ کامپوننت هدر و فوتر رو ایمپورت میکردیم، و توی ساختار صفحه، میگنجوندیمش. الان برای این کار باید از فایل layout.jsx استفاده کنیم. یعنی یه فایل layout میسازیم. کد خاص خودش رو توش میزاریم. هدر و فوتر رو هم ایمپورت میکنیم و توی ساختار سایت، میگنجونیمش.
یه نکته جالب دیگه در مورد این فایل، اینه که ما برای هر صفحه از سایت، میتونیم یه فایل layout جدا در نظر بگیریم. همچنین میتونیم مثلا ساید بار سایت رو توی فایل layout بسازیم و محتوای اصلی رو توی فایل page.jsx

فایل بعدی هم Loading.jsx هست که برای نمایش گیف لودینگ زمان لود اطلاعات استفاده میشه.

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

جدا از پوشه کامپوننت، توی Next js، هر صفحه و هر کامپوننت، به طور کلی یه کامپوننت حساب میشن. خوب؟ توی Next js 13، یک چیزی برای اولین بار مطرح شده به اسم server component. در واقع هم client component داریم و هم server component. اینا میشن مباحث تخصصی نکست جی اس که میتونید توی دوره آموزش Next js مرن فا مقدماتی به صورت ویدئویی هم یاد بگیریدش. کلاینت کامپوننت میشه کامپوننتی که وابسته هست به چیزای کلاینتی مثل useEffect - useState - useContext و کلا این جور چیزا. باقی میشن سرور کامپوننت.

ببینید اگر شما یه پروژه Next js ای دیپلوی بکنید و توی گوگل هم ثبتش بکنید، توی gtmetrix که یکی از ابزار های سنجش سرعت سایت هست، اگر سایتتون رو بزنید، همه چی عالی و سبز رنگه به جز یک مورد. تعداد فایل های جاوااسکریپت. میگه تعداد فایل های جاوااسکریپتی که توی سمت سرور صفحه های سایتت لود میشه زیاده. در نتیجه سرعت لود سایتت، چند درصدی پایین میاد. دست اندرکاران Next js، اومدن توی نکست جی اس جدید، کامپوننت ها رو به دو بخش تقسیم کردن. یکی server component و یکی هم client component. اگر کامپوننت شما از نوع کلاینت باشه، تعداد فایل های جاوااسکریپتی کمتری نیازه که توی سرور لود بشه. در نتیجه، اون مشکل سئویی که بالاتر گفتم تاثیرش کمتر میشه و نتیجه بهتری میگیرید.

خوب حالا از کجا بفهمیم که کامپوننتی که تعریف client component هست یا server component؟ شما هر چی تعریف بکنید، میشه یه سرور کامپوننت، مگر اینکه همون ابتدای کامپوننت، یه ”use client” بزارید. یعنی در واقع، ما توی یه کامپوننت معمولی، نمیتونیم از useState و باقی هوک ها استفاده کنیم مگر اینکه همون ابتدای کد کامپوننت، یه عبارت use client بزاریم. چون این هوک ها، مخصوص کلاینت کامپوننت ها هستند. دقت هم بکنید که صفحات توی سایت next js 13، همیشه سرورساید هستن. این کامپوننت ها هستن که میشه به دو بخش کلاینت و سرورساید تقسیمشون کرد...