Ганболд Мөнгөнцэцэг, 2021 оны 3 сарын 27 04:15

Nextjs, Sanity ашиглан блог сайт бүтээх

Jamstack технологи

Nextjs сургалт шинээр нээгдлээ!

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

import { useeffect } from "react";
import { Row, Col } from "react-bootstrap";
import Layout from "components/layout";
import { getPostBySlug, getAllPosts } from "lib/api";
import BlockContent from "@sanity/block-content-to-react";

const serializers = {
  types: {
    code: (props) => (
      <pre data-language={props.node.language}>
        <code>{props.node.code}</code>
      </pre>
    ),
  },
};serialiser.js

Jamstack архитектур

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

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 команд өгөх бүртээ вэбийнхээ шинэ хувилбарыг шууд онлайнд гаргаад үйлчлүүлэгч байгууллага руугаа илгээж чадна. Уг хаягийг үйлчлүүлэгчид нээж үзээд уг шинэ өөрчлөлтийн талаар шууд нүдээрээ харж сэтгэгдлээ хэлж чадах юм. Үүнээс илүү хялбар хөгжүүлэлт гэж байх бол уу? Хүмүүст бид хийж буй вэбээ үзүүлэх гэж яаж зовдог билээ?

Орчин үед статик сайт хүчээ авч байна!

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

Энд дарж сургалтыг үзээрэй!