Бүх сургалт ХУГАЦААГҮЙ буюу НАСАН ТУРШИЙН!

Удаан хүлээгдсэний эцэст УРЬДЧИЛСАН ЗАХИАЛГААР нээгдэж буй NEXT.js сургалтандаа тавтай морилно уу. Урьдчилсан захиалгаар гарч буй сургалт тул хичээлийн агуулга одоохондоо бүрэн биш бөгөөд өдөр тутам хичээл нь нэмэгдэж явах юм. Энэхүү сургалт маань 100+ видео хичээлтэй байх болно.

Орчин үед та статик сайт, headless CMS, JAMStack зэрэг ойлголтууд хүчээ аваад байгааг анзаарсан уу? Үүнийг дагаад CDN, Next.js, Gatsby, Hugo, Netlify, Vercel, Stackbit, Contentful, Sanity, GraphCMS, 11ty шинэ урсгалууд дэлхийг эзэмдэж эхэлж байна. Эдгээр нэрс нь дөнгөж зах зухаас нь дурдсан нэрс юм. Хэрэв та энэхүү орчин үеийн хөгжүүлэлтийн давалгаатай нэгдэе гэвэл энэ сургалт танд Next.js хэмээх гол төлөөлөгчийг нь (SSG) танилцуулах болно.

Танд сонирхуулахад 1234.mn сайт нь Laravel болон бидний өөрсдийн хөгжүүлсэн PHP фрэймворкоор бүтээгдсэн бөгөөд 2021 оноос бид 1234.mn сайтыг Next.js технологи руу хөрвүүлж байгааг дуулгахад таатай байна!

Тэгвэл Next.js гэж юу вэ?
Netflix, TikTok, Hulu, Twitch, Nike гэсэн орчин үеийн аваргууд ашигладаг энэхүү орчин үеийн гал халуун фрэймворк нь React технологи дээр үндэслэгдсэн бөгөөд Frontend Backend хоёр талд хоёуланд нь ажилладаг вэб аппуудыг хийх чадвартайгаараа бусдаасаа давуу юм. Next.js -ийн үндсэн дизайн нь клиент болон сэрвэр талын аль алиных давуу талыг ашиглаж чаддаг, ямар нэг дутагдалгүй вэб сайтыг яаж хамгийн хурдан хялбар бүтээх вэ гэдгийг бодож тусгасан байдаг. Next.js нь сэрвэр талд react компонентуудыг рендерлэн энгийн html, css, json файл болгон хувиргах замаар ажилладаг бөгөөд 2020 оноос сүр дуулиантайгаар хүчээ авсан JAMStack технологи болон статик сайт, автоматаар статик хуудас үүсгэх, CDN deployment, сэрвэргүй функц, тэг тохиргоо, файлын системийн рүүтинг (PHP-ээс санаа авсан), SWR (stale while revalidate), сэрвэр талд рендерлэх зэрэг асар олон орчин үеийн халуухан шинэхэн технологиудыг бүгдийг хийж чаддаг анхны бүрэн вэб фрэймворк гэж хэлж болно. 2021 оны байдлаар Next.js нь github discussion дээр хамгийн их хэлэлцүүлэгтэй технологиор тодроод байгаа нь дэлхий нийт ямар ихээр Next.js -ийг чухалчлан авч үзэж байгааг тод харуулж байна!


Одоо нэг гайхалтай зүйл хэлье. Vercel клауд дээр байрлуулсан Next.js вэб аппын эх кодыг та github дээр байрлуулангуутаа гэрээсээ нэг git push хийж кодоо github руу явуулахад л шууд автоматаар build хийгдээд Vercel дээр тусдаа deploy хийгдэж шууд ажиллуулж болох тусгай домэйн хаягтайгаар гарч ирдэг гэвэл ямар санагдаж байна? Өөрөөр хэлбэл та git push команд өгөх бүртээ вэбийнхээ шинэ хувилбарыг шууд онлайнд гаргаад үйлчлүүлэгч байгууллага руугаа илгээж чадна. Уг хаягийг үйлчлүүлэгчид нээж үзээд уг шинэ өөрчлөлтийн талаар шууд нүдээрээ харж сэтгэгдлээ хэлж чадах юм. Үүнээс илүү хялбар хөгжүүлэлт гэж байх бол уу? Хүмүүст бид хийж буй вэбээ үзүүлэх гэж яаж зовдог билээ?

Next.js дээр хийсэн вэб сайтаас та дараах онцлогуудыг шууд мэдэрнэ:

- Вэбийг хамгийн анх ачаалахад агшин зуур гарч ирнэ. Ингэснээр бизнест өндөр ашиг авчирдаг.
- Сайт нь аль ч хэсэгтээ цахилгаан мэт хурдтай (CDN дээрээс html, css, json л илгээдэг)
- SEO буюу хайлтын системийн оновчлол дээд зэрэг тохируулах боломж
- Динамик болон статик эсвэл холимог шинжтэй сайтууд хийнэ
- Өндөр ачаалалтай үйлдлийг сэрвэр талд гүйцэтгэнэ
- Огт сэрвэргүй ажиллах статик болон динамик сайт хийнэ
- Клиент (browser) болон сэрвэр (NodeJS) болон клауд(CDN) талуудад кэшлэгддэг
- Хэзээ ч унах боломжгүй сайтууд (CDN байрласан сайтууд)
- Өндөр нууцлал хамгаалалт (сэрвэргүй, урьдчилсан build хийгдсэн тул sql injection боломжгүй)
- Хөгжүүлэлтийн хурд өндөр (тэг тохиргоо, fast reloading, router тохируулахгүй)
- NodeJS ажиллах бүх газарт сайтаа байрлуулж болно
- Нэг хуудсыг ачаалахад уг хуудаснаас дуудагдах бусад хуудсуудыг далдуур түрүүлэн ачаалах (pre-loading) ингэснээр дараачийн хуудсууд агшин зуур гарч ирнэ
- Автомат оптимизаци хийгдэнэ (та том зураг оруулахад автоматаар чанарыг алдагдуулалгүй хэмжээг нь жижиг болгож оптимал зургаар үйлчилнэ)
- Кодуудыг Google Chrome багийнхны бүтээсэн алгоритмаар автоматаар салгаж тус тусд нь жижиг bundle файл болгож үйлчилнэ.
- SSG (Static site generation), SSR (Server side rendering), ISG (Incremental static generation) ашиглах
- Javasript, React мэддэг бүх хүн шууд Next.js ашиглах боломжтой
- ...
гэх мэтээр гайхамшигт давуу талуудыг дурдаад байвал энэ жагсаалт үргэлжилсээр л байх болно. Сургалтынхаа явцад та дээрхи давуу талуудыг бүрэн ойлгож өөрийн төсөлд хэрэгжүүлж сурах болно.

Бид энэхүү сургалтаар бодит амьдралд шууд ашиглах боломжтой өндөр хурдтай блог вэб сайтыг эхнээс нь дуустал Next.js технологиор хийж суралцах ба дээрх давуу талуудыг сайтдаа хэрхэн нэвтрүүлдгийг үзнэ.


Сургалт маань дараах хэсгүүдэд хуваагдана :
- Next.js гэж юу вэ, онцлог давуу талууд
- Next.js документ сайтыг ашиглаж сурах
- Next.js технологиийг тус тусд нь салган ярилцах
- Next.js албан ёсны блог жишээг хийцгээе!
- Next.js github логинтой статик блог сайтыг хийх
- Өөрийн хувийн сэрвэр болон Vercel дээр вэбээ байрлуулж ажиллуулах


Энэ сургалтыг хэн үзвэл тохиромжтой вэ?
Энэхүү сургалтыг сааталгүй үзэхийн тулд танд React, Javascript, git github ашиглах үндсэн мэдлэгүүд шаардлагатай. 1234.mn сайт дээр эдгээр сургалтууд бүгд байгаа тул хэрэв энэ хичээлд яригдаж буй зарим зүйлсийг ойлгохгүй бол тэдгээр сургалтуудаас дэлгэрэнгүй үзэж ойлгох боломжтой юм. Ялангуяа хичээл дээр хийсэн кодуудыг бид github дээр байрлуулж тэндээс git ашиглан өөрийн пс дээр татаж авч ажиллах тул git-тэй ажиллах мэдлэг танд шаардлагатай болно. Сургалтын эхнээс таныг эдгээр технологийг гадарлана гэж үзээд зөвхөн Next.js талд төвлөрч бичиж ярилцаж явах юм шүү.

За ингээд энэхүү супер технологийг эзэмшихдээ бэлэн үү?
Тэгвэл сургалт дээрээ уулзацгаая! Амжилт!

   Хичээлүүд :   

  1. 11:19
    Мянга ярьснаас нэг харсан нь дээр, Next.js дээр хялбар жишээ хийж юу болохыг нь нүдээрээ харцгаая!
  2. 17:16
    React фрэймворкуудын тухай, React вэб аппын ажиллах дизайн, түүний давуу тал болон тулгардаг хүндрэлүүд
  3. 27:42
    Next.js вэб апп хөшигний цаана хэрхэн ажилладаг вэ? SSG, ISR, SSR ашигласан вэб сайтын ажиллагааны дүр зураг
  4. 09:58
    Windows компьютер дээрх хөгжүүлэлтийн орчинг бэлтгэх нь
  5. 03:55
    Mac компьютер дээр хөгжүүлэлтийн орчинг бэлтгэх нь
  6. 17:20
    VS Code дээр dark theme тохируулах, зарим хөгжүүлэлтэнд ашиглагдах plugin-уудыг суулгах
  7. 25:20
    next.js аппын бүтцийг ойлгоцгооё - css module, global css, апп модул болон dev болон production горимд ажиллуулж турших нь
  8. 18:05
    Next.js албан ёсны жишээ аппуудыг хэрхэн суулгаж ажиллуулах вэ? yarn суулгаж өөр өөр портоор ажиллуулах нь
  9. 08:43
    Өөрсдийн бичсэн төсөл дээр with-videojs төслийн компонентуудыг оруулж ирж ажиллуулцгаая!
  10. 08:44
    Windows болон Mac компьютет дээр git суулгаж github дээр эрх үүсгэцгээе!
  11. 15:40
    Өөрсдийн төслийг github дээр байрлуулцгаая! git add, commit, push, remote add зэрэг командуудыг ашиглана.
  12. 12:01
    Vercel дээр хийсэн аппаа байрлуулж git push хийж өөр өөр deployment-ийг онлайнд хэрхэн гарч буйг харцгаая!
  13. 08:25
    [next-blog#1] Next.js багийн жишээ блог аппыг даган хийцгээе! Блог төслийг үүсгэх
  14. 18:24
    [next-blog#2] Хуудас хооронд Link ашиглан шилжих, prefetching буюу урьдчилсан ачаалах гэж юу вэ?
  15. 22:31
    [next-blog#3] Статик файл болон CSS Module холбох, хуудасны Layout хийх, CSS код split хийх оптимизаци гэж юу болох
  16. 20:58
    [next-blog#4] Глобаль CSS, _app компонент, Layout компонентийг сайжруулцгаая!
  17. 16:57
    [next-blog#5] classnames library ямар ач холбогдолтой вэ? postcss болон tailwind, sass зөвлөмж, headless CMS гэж юу вэ?
  18. 14:30
    [next-blog#6] Pre-rendering буюу урьдчилан рендер хийх гэж юу вэ? түүний давуу тал build хийгдсэн html файлуудын тухай
  19. 12:31
    [next-blog#7] Static generation болон Server side Rendering гэж юу вэ, тэдгээрийн ялгаа, давуу тал хэзээ хэрхэн ашиглах вэ?
  20. 16:00
    [next-blog#8] getStaticProps функц ямар үүрэгтэй вэ? Диаграм дээр ажиллагааг нь дэлгэрэнгүй ойлгоцгооё!
  21. 10:56
    [next-blog#9] Markdown файл гэж юу вэ, түүний хэрэглээ, зориулалт
  22. 16:33
    [next-blog#10] getStaticPaths функцийг бичиж markdown файлуудаас постуудыг уншиж блог дээр гаргая
  23. 24:07
    [next-blog#11] SSR хийх буюу getServerSideProps функц, хэзээ клиент талд рендер хийх вэ, SWR ашиглахын давуу тал
  24. 12:57
    [next-blog#12] Dynamic routing гэж юу вэ? getStaticPaths функц үүнд ямар үүрэг гүйцэтгэдэг вэ?
  25. 13:03
    [next-blog#13] gitStaticProps функцийг ашиглаж [id].js динамик хуудсыг бичицгээе!
  26. 12:11
    [next-blog#14] markdown контентийг html рүү хөрвүүлэх, огноог форматлах
  27. 16:44
    [next-blog#15] getStaticPaths функцийн fallback горимыг төрөл бүрээр туршицгаая!
  28. 29:07
    [next-blog#16] catch all route гэж юу вэ, 404 хуудсыг өөрчлөх, preview горим болон api route талаар
  29. 12:46
    [next-blog#17] git ашиглан github руу блогийнхоо кодыг илгээгээд тэндээсээ Vercel рүү deploy хийцгээе!
  30. 19:18
    Monolithic архитектур гэж юу вэ? Database clustering, database replication, web proxy, load balancer ойлголтуудын тухай
  31. 29:47
    Microservice гэж юу вэ? Түүний архитектурын бүтэц, онцлог, Amazon Netflix Uber микросэрвис хэрэглэсэн туршлага
  32. 30:51
    Microservice давуу талууд болон учирдаг бэрхшээлүүд, Микросэрвис Монолитоос үнэхээр илүү юу?
199,000    29,900

Худалдаж авах

== Сурагчдын сэтгэгдлүүд ==

Жаахан хурдан явмаар байна аа. Сайхан сургалт ярих юмгүй
Аятхан, 2021-02-18 20:46:23
Ойлгомжтой сайхан тайлбарлах юм.
Puujee, 2021-01-27 15:06:22
Баярлалаа. Маш сайхан сургалтууд хийж байгаад. Яг сурахыг хүсч байсан ч яаж сурах аргаа олохгүй байсан юм аа. Дэлгэрэнгүй сайхан тайлбарлаж байгаад талархаж байна.
Сэрсэндагва, 2021-01-24 11:14:57
Их л хүлээлттай байна. Амжилт хүсье.
zob, 2021-01-23 22:41:51