Бүх сургалт ХУГАЦААГҮЙ буюу НАСАН ТУРШИЙН!
Орчин үед та статик сайт, 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 талд төвлөрч бичиж ярилцаж явах юм шүү.
За ингээд энэхүү супер технологийг эзэмшихдээ бэлэн үү?
Тэгвэл сургалт дээрээ уулзацгаая! Амжилт!
Хичээлүүд :
-
11:19Мянга ярьснаас нэг харсан нь дээр, Next.js дээр хялбар жишээ хийж юу болохыг нь нүдээрээ харцгаая!
-
17:16React фрэймворкуудын тухай, React вэб аппын ажиллах дизайн, түүний давуу тал болон тулгардаг хүндрэлүүд
-
27:42Next.js вэб апп хөшигний цаана хэрхэн ажилладаг вэ? SSG, ISR, SSR ашигласан вэб сайтын ажиллагааны дүр зураг
-
09:58Windows компьютер дээрх хөгжүүлэлтийн орчинг бэлтгэх нь
-
03:55Mac компьютер дээр хөгжүүлэлтийн орчинг бэлтгэх нь
-
17:20VS Code дээр dark theme тохируулах, зарим хөгжүүлэлтэнд ашиглагдах plugin-уудыг суулгах
-
25:20next.js аппын бүтцийг ойлгоцгооё - css module, global css, апп модул болон dev болон production горимд ажиллуулж турших нь
-
18:05Next.js албан ёсны жишээ аппуудыг хэрхэн суулгаж ажиллуулах вэ? yarn суулгаж өөр өөр портоор ажиллуулах нь
-
08:43Өөрсдийн бичсэн төсөл дээр with-videojs төслийн компонентуудыг оруулж ирж ажиллуулцгаая!
-
08:44Windows болон Mac компьютет дээр git суулгаж github дээр эрх үүсгэцгээе!
-
15:40Өөрсдийн төслийг github дээр байрлуулцгаая! git add, commit, push, remote add зэрэг командуудыг ашиглана.
-
12:01Vercel дээр хийсэн аппаа байрлуулж git push хийж өөр өөр deployment-ийг онлайнд хэрхэн гарч буйг харцгаая!
-
08:25[next-blog#1] Next.js багийн жишээ блог аппыг даган хийцгээе! Блог төслийг үүсгэх
-
18:24[next-blog#2] Хуудас хооронд Link ашиглан шилжих, prefetching буюу урьдчилсан ачаалах гэж юу вэ?
-
22:31[next-blog#3] Статик файл болон CSS Module холбох, хуудасны Layout хийх, CSS код split хийх оптимизаци гэж юу болох
-
20:58[next-blog#4] Глобаль CSS, _app компонент, Layout компонентийг сайжруулцгаая!
-
16:57[next-blog#5] classnames library ямар ач холбогдолтой вэ? postcss болон tailwind, sass зөвлөмж, headless CMS гэж юу вэ?
-
14:30[next-blog#6] Pre-rendering буюу урьдчилан рендер хийх гэж юу вэ? түүний давуу тал build хийгдсэн html файлуудын тухай
-
12:31[next-blog#7] Static generation болон Server side Rendering гэж юу вэ, тэдгээрийн ялгаа, давуу тал хэзээ хэрхэн ашиглах вэ?
-
16:00[next-blog#8] getStaticProps функц ямар үүрэгтэй вэ? Диаграм дээр ажиллагааг нь дэлгэрэнгүй ойлгоцгооё!
-
10:56[next-blog#9] Markdown файл гэж юу вэ, түүний хэрэглээ, зориулалт
-
16:33[next-blog#10] getStaticPaths функцийг бичиж markdown файлуудаас постуудыг уншиж блог дээр гаргая
-
24:07[next-blog#11] SSR хийх буюу getServerSideProps функц, хэзээ клиент талд рендер хийх вэ, SWR ашиглахын давуу тал
-
12:57[next-blog#12] Dynamic routing гэж юу вэ? getStaticPaths функц үүнд ямар үүрэг гүйцэтгэдэг вэ?
-
13:03[next-blog#13] gitStaticProps функцийг ашиглаж [id].js динамик хуудсыг бичицгээе!
-
12:11[next-blog#14] markdown контентийг html рүү хөрвүүлэх, огноог форматлах
-
16:44[next-blog#15] getStaticPaths функцийн fallback горимыг төрөл бүрээр туршицгаая!
-
29:07[next-blog#16] catch all route гэж юу вэ, 404 хуудсыг өөрчлөх, preview горим болон api route талаар
-
12:46[next-blog#17] git ашиглан github руу блогийнхоо кодыг илгээгээд тэндээсээ Vercel рүү deploy хийцгээе!
-
19:18Monolithic архитектур гэж юу вэ? Database clustering, database replication, web proxy, load balancer ойлголтуудын тухай
-
29:47Microservice гэж юу вэ? Түүний архитектурын бүтэц, онцлог, Amazon Netflix Uber микросэрвис хэрэглэсэн туршлага
-
30:51Microservice давуу талууд болон учирдаг бэрхшээлүүд, Микросэрвис Монолитоос үнэхээр илүү юу?
-
37:32JAMstack архитектур гэж юу вэ? Үүсэл түүх, давуу тал, ажиллах зарчим, гол төлөөлөгчид
-
11:41Бидний дараачийн хийх Sanity, Next.js блогийн үйл ажиллагааны диаграм дээр ярилцая
-
09:13Төслийнхөө эхний хувилбарыг үүсгэж github дээр байрлуулж мөн github аас clone хийж ажиллуулж үзэх нь
-
11:03Sanity CLI суулгаж sanity studio төслийг үүсгэж ажиллуулж github дээр байрлуулья
-
05:00react bootstrap library блогтоо холбож туршицгаая!
-
07:16Анхны хувилбараа мөн л Vercel дээр байрлуулцгаая
-
16:07Нүүр хуудсыг хийж эхэлцгээе, Navbar компонентийг тусд нь салгаж үүсгэх нь
-
12:45ListItem, GridItem, Intro компонентуудыг нэмэх, абсолют замаар компонентуудыг импортлох
-
11:06Sanity studio дотроо блогийн ПОСТ гэсэн документийг тодорхойлж өгөгдөл оруулж үзэцгээе!
-
14:48Sanity GROQ өгөгдөлтэй ажиллах хэлийг сурцгаая! [1-р хэсэг]
-
14:44Sanity GROQ өгөгдөлтэй ажиллах хэлийг сурцгаая! [2-р хэсэг]
-
09:12Next.js орчны хувьсагчдыг хэрхэн тохируулж ажилладаг вэ? .env, .env.local, .env.development, .env.production файлууд
-
13:38Sanity холбогдох функцийг бичих, бүх постуудыг татаж авчрах getAllPosts функцийг бичих
-
05:16getAllPosts функцийг ашиглан блогийн постуудыг JSON хэлбэрээр нүүр хуудсанд форматлан гаргаж харцгаая!
-
05:32Sanity -с ирсэн json постуудыг GridItem компоненттой холбож үзүүлэх
-
15:04Schema дээр slug, image, date талбарууд нэмээд блогийнхоо GridItem дээр гаргаж ирцгээе!
-
11:07Publisher буюу блогийн зохиогч гэсэн документ шинээр Sanity-д нэмж блогтоо гаргаж ирцгээе!
-
07:33Sanity studio форм дээр шалгалт буюу validation хэрхэн хэрэгжүүлэх вэ?
-
07:48Layout компонентийг үүсгэж, блогийн мэдээллийг үзүүлэх [slug].js хуудсыг хийцгээе!
-
13:55Post-ийн дэлгэрэнгүйг үзүүлэх хуудсыг getServerSideProps функц ашиглан бүтээх мөн getPostBySlug апиг бичиж ашиглацгаая!
-
15:58Блог постын хуудсанд getStaticProps, getStaticPaths функцүүдийг нэмж статик болгох нь
-
06:22Sanity studio дээр блогийн контентийн өгөгдлийн бүтцийг үүсгэж олон зураг бүхий контент оруулцгаая!
-
10:06Олон зураг бүхий контентийг өөрсдийн блог дээрээ BlockContent компонент хэрэглэн гаргая
-
16:43Sanity CodeInput plugin ашиглан кодыг өнгө үзэмжтэйгээр хэрхэн форматлаж гаргаж сурцгаая!
-
16:29Постын зураг болон код блокны доор тайлбар текстийг хэрхэн Sanity дээр хадгалж блог дээрээ гаргах вэ
-
03:29Постын огноог төрөл бүрээр форматлаж харцгаая!
-
17:13Блогийн том том хэмжээтэй зургуудыг CDN дээрээс хэрхэн оптимизаци хийж сайтаа өндөр хурдтай болгохыг энд сурцгаая!
-
06:45Блог нийтлэгчид блогт оруулж буй зургаа crop хийж засварлах боломжийг studio дээр хэрхэн хийх вэ? hotspot-той танилц!
-
07:54Постын контентийн зургийг зүүн эсвэл баруун талд эсвэл голлуулж байрлуулах боломжтой болгоцгооё!
-
05:21Studio дээрээс шууд Unsplash зургийг хайж олоод сонгодог болгоцгооё!
-
06:59PostHeader компонентийг бичих, бусад жижиг засваруудыг хийцгээе!
-
15:52[useSWR#1] Vercel SWR ашиглан клиент талаас хэрхэн өндөр оптимизацитайгаар өгөгдөлтэй ажилладаг вэ?
-
24:13[useSWR#2] Vercel SWR ашиглан клиент талаас хэрхэн өндөр оптимизацитайгаар өгөгдөлтэй ажилладаг вэ?
-
28:11[useSWR#3] Клиент талд кэшийг mutate ашиглан өөрчлөх, токенийг swr дээр ашиглах
-
10:05[useSWR#4] useSWR ашиглан хуудаслалтыг хэрхэн хийдэг вэ?
-
10:34[useSWR#5] useSWRInfinite ашиглан хуудаслалтыг хэрхэн хийдэг вэ?
-
23:00[useSWR#6] Урьдчилсан ачаалах аргууд, swr нь аппыг хэрхэн хурдан болгодог тухай
-
03:52Блог апп дээрх нэмэлт засвар, api дээрээс хэрэггүй өгөгдлүүдийг хасч засварлах
-
20:16[useSWR#7] useSWRInfinity hooks хэрэглэн блогийн постуудыг хязгааргүй хуудаслалтыг хэрэгжүүлцгээе!
-
13:13Fallback горим ашиглан блогийн зарим постуудыг урьдчилсан build хийж заримыг дараа нь SSR хийж дараа build хийх нь
-
13:26Блогтоо хэрхэн Dark theme оруулах вэ? ThemeContext, ThemeProvider бичиж туршицгаая!
-
09:28Layout компонентийг засварлах замаар dark theme ээ ажилладаг болгоцгооё
-
11:06Theme-ийг сольж өгдөг товчийг Navbar дээрээ хийцгээе! Fontawesome icon оруулж ирж ашиглах
-
14:18Next.js preview горим гэж юу вэ, Sanity studio дээр preview горим тохируулж блогтоо холбож турших
-
22:35Preview горимыг бүрэн ажилладаг болгох, Sanoity token бүхий шинэ клиент үүсгэх
-
07:41Prieview горимоос гарах апи бичиж туршицгаая
-
06:55SWR дээр initialData ашиглан нүүр хуудсыг илүү оптимал болгон сайжруулах нь
-
13:53revalidate ашиглан тодорхой хугацаанд хуудсыг автоматаар build хийж оптимизаци хийх нь
-
09:38Real time өөрчлөлтийг sanity studio болон блог хооронд нь listener ашиглан хэрэгжүүлэх нь
-
05:20Fast refresh хийх үед компонентийн төлөв алдагдлыг болиулах оптимизацыг турших
-
03:10index.html дээр динамикаар хуудас дуудах үед түр хүлээнэ үү гэсэн оптимизаци нэмэх
-
05:07Хуудас хооронд шилжихэд шилжиж буй анимацийг прогресс бараар хуудасны дээд хэсэгт анимацитайгаар үзүүлэх
-
04:29Эцсийн бүрэн болсон блогоо Vercel дээр байрлуулж турших
-
11:19Төгсгөлийн хичээл: Sanity studio төслөө Vercel дээр байрлуулж production блогтой холбож ажиллуулж үзэх.
-
08:22Вэб дээрээ нэмэлт дөрвөн засвар оруулж production хувилбараа улам сайжруулах нь
HTML5, CSS3 эхнээс нь дуустал! (Sass-ын
хамт)
Хугацаа: 29 цаг 40 мин | Сурагчид: 2824 | Үнэ:
29,900₮
|
|
Javascript хэлийг эхнээс нь дуустал!
Хугацаа: 52 цаг 21 мин | Сурагчид: 3094 | Үнэ:
29,900₮
|
|
React эхнээс нь дуустал!
Хугацаа: 42 цаг 2 мин | Сурагчид: 1796 | Үнэ:
29,900₮
|
|
Git, Github эхнээс нь дуустал!
Хугацаа: 16 цаг 25 мин | Сурагчид: 806 | Үнэ:
29,900₮
|
|
== Сурагчдын сэтгэгдлүүд ==