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

Орчин үед та статик сайт, 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 давуу талууд болон учирдаг бэрхшээлүүд, Микросэрвис Монолитоос үнэхээр илүү юу?
  33. 37:32
    JAMstack архитектур гэж юу вэ? Үүсэл түүх, давуу тал, ажиллах зарчим, гол төлөөлөгчид
  34. 11:41
    Бидний дараачийн хийх Sanity, Next.js блогийн үйл ажиллагааны диаграм дээр ярилцая
  35. 09:13
    Төслийнхөө эхний хувилбарыг үүсгэж github дээр байрлуулж мөн github аас clone хийж ажиллуулж үзэх нь
  36. 11:03
    Sanity CLI суулгаж sanity studio төслийг үүсгэж ажиллуулж github дээр байрлуулья
  37. 05:00
    react bootstrap library блогтоо холбож туршицгаая!
  38. 07:16
    Анхны хувилбараа мөн л Vercel дээр байрлуулцгаая
  39. 16:07
    Нүүр хуудсыг хийж эхэлцгээе, Navbar компонентийг тусд нь салгаж үүсгэх нь
  40. 12:45
    ListItem, GridItem, Intro компонентуудыг нэмэх, абсолют замаар компонентуудыг импортлох
  41. 11:06
    Sanity studio дотроо блогийн ПОСТ гэсэн документийг тодорхойлж өгөгдөл оруулж үзэцгээе!
  42. 14:48
    Sanity GROQ өгөгдөлтэй ажиллах хэлийг сурцгаая! [1-р хэсэг]
  43. 14:44
    Sanity GROQ өгөгдөлтэй ажиллах хэлийг сурцгаая! [2-р хэсэг]
  44. 09:12
    Next.js орчны хувьсагчдыг хэрхэн тохируулж ажилладаг вэ? .env, .env.local, .env.development, .env.production файлууд
  45. 13:38
    Sanity холбогдох функцийг бичих, бүх постуудыг татаж авчрах getAllPosts функцийг бичих
  46. 05:16
    getAllPosts функцийг ашиглан блогийн постуудыг JSON хэлбэрээр нүүр хуудсанд форматлан гаргаж харцгаая!
  47. 05:32
    Sanity -с ирсэн json постуудыг GridItem компоненттой холбож үзүүлэх
  48. 15:04
    Schema дээр slug, image, date талбарууд нэмээд блогийнхоо GridItem дээр гаргаж ирцгээе!
  49. 11:07
    Publisher буюу блогийн зохиогч гэсэн документ шинээр Sanity-д нэмж блогтоо гаргаж ирцгээе!
  50. 07:33
    Sanity studio форм дээр шалгалт буюу validation хэрхэн хэрэгжүүлэх вэ?
  51. 07:48
    Layout компонентийг үүсгэж, блогийн мэдээллийг үзүүлэх [slug].js хуудсыг хийцгээе!
  52. 13:55
    Post-ийн дэлгэрэнгүйг үзүүлэх хуудсыг getServerSideProps функц ашиглан бүтээх мөн getPostBySlug апиг бичиж ашиглацгаая!
  53. 15:58
    Блог постын хуудсанд getStaticProps, getStaticPaths функцүүдийг нэмж статик болгох нь
  54. 06:22
    Sanity studio дээр блогийн контентийн өгөгдлийн бүтцийг үүсгэж олон зураг бүхий контент оруулцгаая!
  55. 10:06
    Олон зураг бүхий контентийг өөрсдийн блог дээрээ BlockContent компонент хэрэглэн гаргая
  56. 16:43
    Sanity CodeInput plugin ашиглан кодыг өнгө үзэмжтэйгээр хэрхэн форматлаж гаргаж сурцгаая!
  57. 16:29
    Постын зураг болон код блокны доор тайлбар текстийг хэрхэн Sanity дээр хадгалж блог дээрээ гаргах вэ
  58. 03:29
    Постын огноог төрөл бүрээр форматлаж харцгаая!
  59. 17:13
    Блогийн том том хэмжээтэй зургуудыг CDN дээрээс хэрхэн оптимизаци хийж сайтаа өндөр хурдтай болгохыг энд сурцгаая!
  60. 06:45
    Блог нийтлэгчид блогт оруулж буй зургаа crop хийж засварлах боломжийг studio дээр хэрхэн хийх вэ? hotspot-той танилц!
  61. 07:54
    Постын контентийн зургийг зүүн эсвэл баруун талд эсвэл голлуулж байрлуулах боломжтой болгоцгооё!
  62. 05:21
    Studio дээрээс шууд Unsplash зургийг хайж олоод сонгодог болгоцгооё!
  63. 06:59
    PostHeader компонентийг бичих, бусад жижиг засваруудыг хийцгээе!
  64. 15:52
    [useSWR#1] Vercel SWR ашиглан клиент талаас хэрхэн өндөр оптимизацитайгаар өгөгдөлтэй ажилладаг вэ?
  65. 24:13
    [useSWR#2] Vercel SWR ашиглан клиент талаас хэрхэн өндөр оптимизацитайгаар өгөгдөлтэй ажилладаг вэ?
  66. 28:11
    [useSWR#3] Клиент талд кэшийг mutate ашиглан өөрчлөх, токенийг swr дээр ашиглах
  67. 10:05
    [useSWR#4] useSWR ашиглан хуудаслалтыг хэрхэн хийдэг вэ?
  68. 10:34
    [useSWR#5] useSWRInfinite ашиглан хуудаслалтыг хэрхэн хийдэг вэ?
  69. 23:00
    [useSWR#6] Урьдчилсан ачаалах аргууд, swr нь аппыг хэрхэн хурдан болгодог тухай
  70. 03:52
    Блог апп дээрх нэмэлт засвар, api дээрээс хэрэггүй өгөгдлүүдийг хасч засварлах
  71. 20:16
    [useSWR#7] useSWRInfinity hooks хэрэглэн блогийн постуудыг хязгааргүй хуудаслалтыг хэрэгжүүлцгээе!
  72. 13:13
    Fallback горим ашиглан блогийн зарим постуудыг урьдчилсан build хийж заримыг дараа нь SSR хийж дараа build хийх нь
  73. 13:26
    Блогтоо хэрхэн Dark theme оруулах вэ? ThemeContext, ThemeProvider бичиж туршицгаая!
  74. 09:28
    Layout компонентийг засварлах замаар dark theme ээ ажилладаг болгоцгооё
  75. 11:06
    Theme-ийг сольж өгдөг товчийг Navbar дээрээ хийцгээе! Fontawesome icon оруулж ирж ашиглах
  76. 14:18
    Next.js preview горим гэж юу вэ, Sanity studio дээр preview горим тохируулж блогтоо холбож турших
  77. 22:35
    Preview горимыг бүрэн ажилладаг болгох, Sanoity token бүхий шинэ клиент үүсгэх
  78. 07:41
    Prieview горимоос гарах апи бичиж туршицгаая
  79. 06:55
    SWR дээр initialData ашиглан нүүр хуудсыг илүү оптимал болгон сайжруулах нь
  80. 13:53
    revalidate ашиглан тодорхой хугацаанд хуудсыг автоматаар build хийж оптимизаци хийх нь
  81. 09:38
    Real time өөрчлөлтийг sanity studio болон блог хооронд нь listener ашиглан хэрэгжүүлэх нь
  82. 05:20
    Fast refresh хийх үед компонентийн төлөв алдагдлыг болиулах оптимизацыг турших
  83. 03:10
    index.html дээр динамикаар хуудас дуудах үед түр хүлээнэ үү гэсэн оптимизаци нэмэх
  84. 05:07
    Хуудас хооронд шилжихэд шилжиж буй анимацийг прогресс бараар хуудасны дээд хэсэгт анимацитайгаар үзүүлэх
  85. 04:29
    Эцсийн бүрэн болсон блогоо Vercel дээр байрлуулж турших
  86. 11:19
    Төгсгөлийн хичээл: Sanity studio төслөө Vercel дээр байрлуулж production блогтой холбож ажиллуулж үзэх.
  87. 08:22
    Вэб дээрээ нэмэлт дөрвөн засвар оруулж production хувилбараа улам сайжруулах нь
199,000    49,000

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

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

...........
William, 2021-07-26 19:48:43
good
Saruul, 2021-07-26 17:34:20
dajgvi sanagsan
Баярсайхан, 2021-07-26 08:55:57
Маш сайн ойлгомжтой хичээл байлаа
Батзаяа, 2021-07-08 18:10:15
Баярлалаа
Sergelenchimeg, 2021-06-12 22:31:52
Таалагдсан
Мөнхчулуун, 2021-05-18 13:04:40
Ойлгомжтой сайхан тайлбарлах юм.
Puujee, 2021-01-27 15:06:22
Баярлалаа. Маш сайхан сургалтууд хийж байгаад. Яг сурахыг хүсч байсан ч яаж сурах аргаа олохгүй байсан юм аа. Дэлгэрэнгүй сайхан тайлбарлаж байгаад талархаж байна.
Сэрсэндагва, 2021-01-24 11:14:57
Их л хүлээлттай байна. Амжилт хүсье.
zob, 2021-01-23 22:41:51