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

آموزش رایگان Next js 13 و tailwind.css مرن فا، همراه با پروژه های واقعی next.js، به صورت کامل و 0 تا 100 به همراه سئو در React js و SSR

👑 چرا باید حتما مهاجرت بکنیم به Next js 👑

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

👑 به ترتیب کدوم دوره های مرن فا رو ببینم تا Next js رو خوب یاد بگیرم؟👑

آموزش رایگان next.js
تلگرام مرن فا: mernfa@
  • اطلاع رسانی تخفیف های مرن فا
  • پروژه های react، next و node
  • ویدئو های آموزشی مفید
  • اخبار حوزه جاوااسکریپت
  • اطلاع رسانی به‌روزرسانی دوره ها
آموزش next js 13 رایگان همراه با تیلویند سی اس اس- مقدماتی
بیش از 5 ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js با مرن فا
دوره آموزش next js - پروژه فول استک کدنویسی سایت فروشگاه فایل
78 ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
آموزش NEXT JS پیشرفته با مرن فا
10 ساعت و نیم - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
آموزش node js فریمورک Express js به صورت خلاصه و کاربردی
2 ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
احراز هویت (Authentication) با Next js - شماره تلفن، Next Auth و ایمیل
نزدیک به 12 ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
آموزش Next js - پروژه وبلاگ فول استک
بیش از 50 ساعت - در حال ضبط ...
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
آموزش طراحی سایت دو یا چند زبانه با Next js 13
2 ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
طراحی اسلایدر های خلاقانه با next.js و tailwind.css
بیش از 3 ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
آموزش next.js - پروژه طراحی video player
نزدیک به 2 ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
آموزش جستجوی داینامیک( ایجکس) در next.js
نزدیک به 1 ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
آموزش تکست ادیتور( text editor) در Next js
نزدیک به 1 ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
آموزش ارسال ایمیل انبوه با Node.js
نزدیک به نیم ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
آموزش next.js 🔥 پروژه فول استک کدنویسی سایت شخصی و رزومه
بیش از 20 ساعت آموزش در 8 فصل - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا

دوره آموزش رایگان Next js 13 و tailwind.css - مقدماتی

0

معرفی دوره آموزش next js رایگان مرن فا

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

آموزش next js رو از کجا شروع کنم؟

مسیر یاد گیری mern stack

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

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

Next js چیست؟

مقایسه React.js و Next js

چرا مهاجرت به Next js

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

آموزش ساختن پروژه Next js

آموزش نصب Next js

لطفا برای دیدن ادامه این دوره آموزش next js، وارد حساب کاربری شوید.
4

بررسی فایل های پروژه Next js 13

آموزش فایل Layout.jsx در next js 13

5

بررسی صفحات در next js

آموزش next js routes

اکستنشن های مورد نیاز vscode

6

آموزش next js styling

سی اس اس در نکست جی اس

7

آموزش نصب tailwind.css روی next js

8

آموزش tailwind.css به صورت کاربردی

9

css دلخواه در tailwind

flex در tailwind.css

ریسپانسیو کردن طرح با تیلویند

10

استفاده از پوشه public در next js

فونت در پروژه next js

11

آیکن ها در next js

12

آموزش next js Image

13

آموزش next js Link

14

فرگمنت در نکست جی اس

15

کامپوننت ها در next js

header و footer در وب سایت next jsای

16

شروع پروژه سایت فیلم ساده

توضیح در مورد ساختار پروژه و api

17

طراحی هدر و فوتر سایت

طراحی اولیه صفحه اصلی و صفحه فیلم ها

18

آموزش server component ها و client component ها در next js

تفاوت سرور کامپوننت و کلاینت کامپوننت

19

گرفتن اطلاعات از بک اند یا api در next js

آموزش ISR SSR، SSG و CSR

client and server side data fetching

20

مقایسه client side data fetching و server side data fetching

مقایسه CSR - SSR - SSG - ISR در دل کد

21

طراحی صفحه اصلی سایت فیلم

22

طراحی صفحه لودینگ سایت

فایل Loading.jsx در Next js

23

طراحی صفحه تک فیلم

آموزش dynamic routes در Next js 13

data fetching در روت های داینامیک

24

تکمیل کردن صفحه تک فیلم سایت

25

طراحی صفحات ارور و نات فوند

فایل های error.jsx و not-found.jsx در Next js 13

26

طراحی ساید بار

آشنایی بیشتر با فایل layout.jsx

27

بررسی تگ های سئویی در Next js

28

ادامه یادگیری Next js 13

29

بررسی یک پروژه کامل طراحی شده با Next js

آشنایی با ساختار یک وب سایت واقعی

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

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

توی این دوره، با هم یه سایت فروشگاه فایل طراحی می‌کنیم. یه پروژه کامل و جامع برای آموزش 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 پیشرفته با مرن فا
10 ساعت و نیم - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
ویدئوی معرفی
آموزش رایگان next.js

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

توی این آموزش 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

آموزش node js فریمورک Express js به صورت خلاصه و کاربردی
2 ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
ویدئوی معرفی
آموزش رایگان next.js

آموزش Express js به صورت خلاصه و کاربردی

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

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

احراز هویت (Authentication) با Next js - شماره تلفن، Next Auth و ایمیل
نزدیک به 12 ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
ویدئوی معرفی
آموزش رایگان next.js

دوره احراز هویت با JWT و Next Auth همراه با ارسال Email و SMS

توی این دوره، می تونید کل سیستم احراز هویت ( login/register یا signin/signup) رو در next js 13 یاد بگیرید.

✅ مواردی که در پروژه اول یاد میگیرید:

1. آموزش jwt یا jsonwebtoken برای بحث احراز هویت

2. آموزش ارسال ایمیل به کاربر برای تایید ایمیل

3. آموزش ارسال sms یا پیامک به کاربر برای تایید شماره تلفن اکانت

4. لایه های کاربری

5. آموزش مدیریت کوکی ها( cookie) در next js 13 در کلاینت و سرور کامپوننت ها

6. کار با regex برای بررسی اینپوت های فرم ها

7. محافظت از روت ها در jwt به صورت کلاینت و سرور ساید

✅ مواردی که در پروژه دوم یاد می گیرید:

1. آموزش احراز هویت با پکیج Next Auth

2. آموزش sign in با اکانت گیت هاب( github) در Next Auth

3. آموزش sign in با اکانت گوگل( google) در Next Auth

4. آموزش sign in به صورت credentials در Next Auth

5. محافظت از روت ها در Next Auth به صورت کلاینت و سرور ساید

آموزش Next js - پروژه وبلاگ فول استک
بیش از 50 ساعت - در حال ضبط ...
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
ویدئوی معرفی
آموزش رایگان next.js

آموزش Next js به صورت فول استک - پروژه وبلاگ

مواردی که میتونید در این دوره یاد بگیرید...

آموزش طراحی فرانت اند با Next js 13 و تیلویند

طراحی بک اند با Next js 13

لایه های کاربری( ادمین - ادیتور - کاربر( بلاگر) )

جستجو بین کاربران و مقالات

دنبال کردن کاربران( following و follower)

نوتیفیکشن

ارسال فایل و ذخیره در دیتابیس

کار با پکیج انتخاب رندم عکس

استفاده از Skeleton در Next js 13

احراز هویت با شماره تلفن

تم تاریک و روشن ( dark & light)

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

معرفی ساختار پروژه

این پروژه هم یکی از پروژه های next js مرن فا هست که شامل این فصل ها میشه

فصل 1: جزئیات کاربر( بلاگ) و آپدیت آن در داشبورد مدیریتی سایت - بخش 2

فصل 2: طراحی بخش احراز هویت همراه با ریداکس تول کیت در next js 13 - ورود و ثبت نام به صورت فول استک در Next js

فصل 3: ویرایش حساب کاربری - آپلود عکس در پوشه public - تایید شماره همراه - کار با middleware و jwt در نکست جی اس 13

فصل 4: داشبورد وب سایت و مدیریت کاربران در داشبورد

فصل 5: بحث دسته بندی و مدیریت دسته ها در داشبورد و نمایش دسته ها در صفحه اصلی

فصل 6: سیستم مقاله در سایت

فصل 7: بحث جستجو بین بلاگ ها و پست ها

فصل 8: بحث فالوور و فالووینگ + نوتیفیکیشن + لایک کردن + بوک مارک

فصل 9: بحث کامنت های کاربر

فصل 10: بحث تبلیغات در سایت

فصل 11: بحث کاربر ادمین و ادیتور + جستجوهای داشبوردی

فصل 12: بحث امنیت

فصل 13: سئو و ریسپانسیو

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

آموزش طراحی سایت دو یا چند زبانه با Next js 13
2 ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
ویدئوی معرفی
آموزش رایگان next.js

دوره Next js 13 - طراحی سایت دوزبانه

توی این دوره آموزش next js 13 ، یاد میگیریم که چطور میشه با نکست جی اس، سایت دوزبانه طراحی کرد.

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

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

دوره آموزش طراحی انواع اسلایدر ها با next js

توی این پروژه، ما 6 تا اسلایدر مختلف با نکست جی اس و Tailwind.css طراحی میکنیم.
1 و 2. توی این دو تا اسلایدر، ما دو تا اسلایدر رو از صفر کد میزنیم. هدف در جلسات مربوط به این دو اسلایدر، اینه که شما با استفاده از انیمیشن‌ها در next js و همچنین مدیریت استیت برای تغییر اسلاید آشنا بشید.
3 و 4. توی دو تا اسلایدر دوم، هدف اینه که شما ببینید چه پکیج هایی برای طراحی اسلایدر در ریکت و Next js وجود داره. توی این دو اسلایدر، از دو پکیج متفاوت استفاده شده یعنی swiperjs و slick slider
5. اسلایدر پنجم، اسلایدر برفی هست. افکت برفی هم از اون افکتهای جذاب هست که کاربر رو جذب میکنه و خوبه که شما بلد باشید توی next js چطور میشه پیادهش کرد...
6. اسلایدر ششم، اسلایدر نمایش محصولات هست. اسلایدری کاملا ریسپانسیو که خودمون از صفر تا صدش رو کد میزنیم.
این دوره آموزش next js مرن فا شامل 10 جلسه هست.

آموزش next.js - پروژه طراحی video player
نزدیک به 2 ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
ویدئوی معرفی
آموزش رایگان next.js

دوره آموزش طراحی ویدئو پلیر با next js

هدف ما توی این دوره پروژه محور next js، اینه که یه پخش کننده ویدئو یا همون VIDEO PLAYER طراحی کنیم. با چی؟
با next js و tailwind.css.

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

توی این دوره آموزش next js مرن فا ما میایم ابتدا کل فرانت ویدئو پلیر رو طراحی میکنیم، بعد توی هر جلسه، یه امکان به اپلیکیشنمون اضافه میکنیم مثلا توی یه جلسه play/pause ، توی یه جلسه دیگه full screen ، speed، duration و... . میتونید لیست کامل جلسات رو پایین تر ببینید.

در واقع این دوره، یه دوره طراحی video player با جاوااسکریپت و ریکت هست. چون بخش خوبی از کار، میشه کار کردن با کنترل کننده های ویدئو در javascript و همچنین هوک های ریکت

آموزش جستجوی داینامیک( ایجکس) در next.js
نزدیک به 1 ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
ویدئوی معرفی
آموزش رایگان next.js

دوره آموزش جستجوی داینامیک( ایجکس) با next js و tailwind.css

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

آموزش تکست ادیتور( text editor) در Next js
نزدیک به 1 ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
ویدئوی معرفی
آموزش رایگان next.js

آموزش اضافه کردن Text Editor به پروژه Next js 13

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

آموزش ارسال ایمیل انبوه با Node.js
نزدیک به نیم ساعت - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
ویدئوی معرفی
آموزش رایگان next.js

آموزش ارسال ایمیل انبوه با Node js

توی پروژه کوتاه، با هم یه اپلیکیشن ارسال کننده ایمیل با Node js میسازیم. چزا نیازه که اینو بلد باشیم؟

1. باید بلد باشیم که چطور با Node js میشه ایمیل زد؟

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

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

آموزش next.js 🔥 پروژه فول استک کدنویسی سایت شخصی و رزومه
بیش از 20 ساعت آموزش در 8 فصل - به اتمام رسیده
برای دیدن دوره، کلیک کن
آموزش next js مرن فا
ویدئوی معرفی
آموزش رایگان next.js

دوره آموزش سایت شخصی( نمونه کار) با next js

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

معرفی ساختار پروژه next js سایت شخصی

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

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

next js چیست؟

قبل از شروع مطالعه متن، میتونید مطالب رو به صورت ویدئویی در دوره 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. برای روت های ثابت از این کد استفاده می‌کنیم:

آموزش next js مرن فا

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

آموزش next js مرن فاآموزش next js مرن فا

2. SSR

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

آموزش next js مرن فا

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

آموزش next js مرن فا

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

آموزش next js مرن فا

نکته

برای گرفتن اطلاعات از بک‌اند در 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 و این مهمه.

آموزش next js مرن فا

اولین خاصیت، 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، تصویر اصلی بیاد.

یکی از نکات مهم دیگه در مورد Next js image، لود کردن تصویر از یک سایت دیگه هست.

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

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

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

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

آموزش Next js link

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

آموزش next js مرن فا

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

آموزش Next js refresh

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

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

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

آموزش 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 مرن فا

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

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

از آدرس زیر، میتونید پروژه دیفالت با 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

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

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

ریدایرکت در getServerSideProps

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

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

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

آموزش next js مرن فا

مکانیزم ریدایرکت در 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 js 13 به صورت کامل

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

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

بررسی تفاوت های 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، همیشه سرورساید هستن. این کامپوننت ها هستن که میشه به دو بخش کلاینت و سرورساید تقسیمشون کرد...

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

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

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

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

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

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

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

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

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

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

برای یادگیری بیشتر در مورد next js میتونید به وبلاگ مرن فا مراجعه کنید یا در دوره ها، ثبت نام کنید...

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

mernfa@gmail.com

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

حاج مجتبیآموزش خلاصه و کاربردی Node js - Express
۱۴۰۲/۶/۲۳, ۱۲:۴۹

سلام استاد من دارم دوره authentication رو میبینم اونجا فرمودین باید با express آشنا باشین سوالی که داشتیم اینه که اگه این دوره رو کامل ببینیم میتونیم بدون هیچ مشکلی دوره authentication رو کاملا پیش بریم و به مشکلی نخوریم؟

سهیل جعفری( مدیر سایت)۱۴۰۲/۶/۲۳, ۱۳:۵۵

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

armin fatemipoorآموزش خلاصه و کاربردی Node js - Express
۱۴۰۲/۵/۲۳, ۱۴:۰۳

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

سهیل جعفری( مدیر سایت)۱۴۰۲/۵/۲۳, ۱۴:۱۹

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

ddddjavidآموزش ارسال ایمیل انبوه با Node.js
۱۴۰۲/۵/۸, ۱۴:۲۴

با عرض سلام خدمت استاد و سایر هنرجوها, این دوره هم شرکت کردم خیلی عالی و راحت بود و خیلی کاربری بود برای ارسال ایمیل رایگان و زیاد, چون هزینه ایمیل تو سایت ها بالا بود این خیلی کاربردی بود. توصیه میکنم حتما شرکت کنید در این دوره

سهیل جعفری( مدیر سایت)۱۴۰۲/۵/۸, ۱۷:۰۶

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

IsmaeilSaberiآموزش تکست ادیتور( text editor) در Next js
۱۴۰۲/۴/۱۴, ۱۵:۰۱

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

سهیل جعفری( مدیر سایت)۱۴۰۲/۴/۱۵, ۰۶:۳۷

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

IsmaeilSaberiآموزش تکست ادیتور( text editor) در Next js
۱۴۰۲/۴/۱۳, ۱۱:۰۶

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

سهیل جعفری( مدیر سایت)۱۴۰۲/۴/۱۳, ۲۱:۵۱

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

mahdiraashedآموزش خلاصه و کاربردی Node js - Express
۱۴۰۲/۳/۱۰, ۰۹:۴۰

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

سهیل جعفری( مدیر سایت)۱۴۰۲/۳/۱۰, ۱۰:۱۵

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

IsmaeilSaberiآموزش next.js 12 پروژه کدنویسی سایت شخصی و رزومه
۱۴۰۱/۱۲/۲۵, ۲۲:۴۷

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

سهیل جعفری( مدیر سایت)۱۴۰۱/۱۲/۲۶،‏ ۱۱:۵۰

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

benesis Livajiآموزش جستجوی داینامیک( ایجکس) در next.js
۱۴۰۱/۱۲/۱۹, ۰۸:۱۷

سلام ببخشید من یه سوال داشتم من همین پروژه رو خودم نوشتم ولی از فونت فارسی روی لوکال هاست نمیتونم استفاده کنم و بجای فونت فارسی از اشکال دیگه مثل ∅±₱استفاده می‌کنه میشه راهنماییم کنید

سهیل جعفری( مدیر سایت)۱۴۰۱/۱۲/۱۹، ۰۸:۲۷

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

IsmaeilSaberiآموزش next.js 12 پروژه کدنویسی سایت شخصی و رزومه
۱۴۰۱/۱۱/۲۹, ۱۸:۲۶

سلام آقای جعفری خسته نباشید و وقت بخیر ممنون از دوره های خوبتون من در دوره ی ساخت پورتفولیو شرکت کردم و توی جلسه ی 15 دوره که سرور نود جی اس رو راه اندازی می کنیم من دقیقا عین قدم هایی که گفتین رو رفتم فقط موقعی که سرور جی اس پروژه رو ران می کنم توی ترمینالم این پیام می آد و نتونستم حلش کنم چند راه حل هم از استک اور فلو دیدم. ممنون میشم راهنمایی کنید. متن ارور: (( ... ))

سهیل جعفری( مدیر سایت)۱۴۰۱/۱۱/۳۰، ۰۸:۲۴

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

حسین رمضانیآموزش next.js 12 پروژه کدنویسی سایت شخصی و رزومه
۱۴۰۱/۶/۱۹، ۱۱:۰۹

خسته نباشید. یه سوال، یه مشکلی که من دارم، ریسپانسیو کردن منوی موبایل هست. اینم توی این دوره نکست جی اس پوشش میدید؟

سهیل جعفری( مدیر سایت)۱۴۰۱/۶/۱۹، ۱۱:۵۸

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

sara_amirshahiآموزش next.js 12 پروژه کدنویسی سایت شخصی و رزومه
۱۴۰۱/۶/۱۵، ۱۱:۱۸

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

سهیل جعفری( مدیر سایت)۱۴۰۱/۶/۱۵، ۱۲:۰۳

سلام. تشکر. برای احراز هویت از auth0 استفاده نکردیم؛ بلکه کلا سیستم آتنتیکیشن یا همون احراز هویت رو خودمون پیاده کردیم. این سایت اصلا فرم ثبتنام نداره بلکه فقط یه فرم ورود ادمین داره. بر همین مبنا، سایت کلا یه یوزر داره و اونم ادمین سایت هست. سیستم ورود ادمین هم، این هست. 1 - ریکوئست فرستادن به بک اند 2 - اعتبارسنجی اطلاعات در بک اند 3 - تولید توکن در صورت درست بودن اطلاعات 4 - ست کردن توکن به عنوان کوکی . برای محافظت از صفحات مدیریتی سایت هم از اعتبار سنجی همین توکن استفاده میکنیم. در صورت اشتباه بودن توکن یا عدم وجود توکن، کاربر ریدایرکت میشه به صفحه اصلی و توکنش هم حذف میشه.

ahmad-sf8آموزش next.js 12 پروژه کدنویسی سایت شخصی و رزومه
۱۴۰۱/۵/۲۷، ۱۹:۵۰

سلام آقای جعفری. من توی دوره ثبتنام کردم. دوره خوبیه فقط بک اند رو کی شروع میکنید؟

سهیل جعفری( مدیر سایت)۱۴۰۱/۵/۲۷، ۲۰:۴۱

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