Next.js Эхлэл гарын авлага: Орчин үеийн Web програмыг бүтээх хамгийн сайн сонголт

Оршил

Өнөө үед хурдтай хөгжиж буй фронтэнд хөгжүүлэлтэд Next.js нь хөгжүүлэгчдэд өндөр гүйцэтгэлтэй, орчин үеийн Web програмыг бүтээх хүчирхэг хэрэгсэл, уян хатан байдлыг санал болгодог. Хэрэв та эхлэгч бол, эсвэл одоогийн төсөлдөө Next.js оруулахыг хүсэж байгаа хөгжүүлэгч бол, энэ нийтлэл нь Next.js-ийн үндсэн ойлголт, ашиглах аргыг ойлгоход тань туслах бүхэлд нь эхлэл гарын авлага болно.

Next.js гэж юу вэ?

Next.js нь React-ийн фреймворк бөгөөд хөгжүүлэгчдэд үйлдвэрлэлийн бэлэн програмуудыг хурдан бүтээхэд туслах зорилготой. Энэ нь олон хүчирхэг функцийг санал болгодог, жишээлбэл:

• Серверийн талд рендеринг (SSR) болон статик үүсгэл (SSG): Сервер дээр хуудсыг урьдчилан рендерлэхийг дэмжиж, ачаалах хурд болон SEO гүйцэтгэлийг сайжруулдаг.
• Маршрутын систем: Дотоод файл системийн маршрутын менежментийг хялбарчилдаг.
• API маршрутууд: Нэг төсөлд API-г хялбархан бүтээх боломжтой, нэмэлт сервер шаардлагагүй.
• Гүйцэтгэлийг сайжруулах: Автомат код хуваалт, эхний ачааллын хугацааг багасгадаг.

Next.js-ийг суулгах

Next.js-ийг суулгах нь маш хялбар, зөвхөн таны хөгжүүлэлтийн орчинд Node.js суулгасан байх ёстой. Дараах командыг ашиглан шинэ төслийг хурдан үүсгэж болно:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

Дээрх командыг ажиллуулсны дараа та http://localhost:3000 дээр шинэ Next.js програмыг эхлүүлсэн харах болно.

Төслийн бүтэц

Next.js програмыг үүсгэсний дараа та стандартын директорыг харах болно:

my-next-app/
├── node_modules/
├── public/
├── src/
│   ├── pages/
│   ├── styles/
│   └── components/
├── package.json
└── next.config.js

• pages/: Хуудаснуудыг хадгалах директори, тус бүрийн .js файл нь автоматаар маршрутад хариулах болно.
• public/: Статик файлуудын директори, энэ директорт байрлуулсан файлуудыг шууд хандаж болно.
• styles/: CSS файлуудыг хадгалах директори, глобал эсвэл тодорхой компонентийн стилийг ашиглахад зориулагдсан.

Хуудас болон маршрутыг үүсгэх

Next.js-ийн хуудсууд файл систем дээр үндэслэн маршрутын менежментийг хийдэг. pages/ директорт about.js гэх мэт файл үүсгэж, агуулгыг дараах байдлаар бичнэ:

export default function About() {
  return 

# Бидний тухай

;
}

Энэ нь автоматаар /about маршрутыг үүсгэнэ.

Статик үүсгэл болон серверийн талд рендеринг

Next.js нь өгөгдөл авах стратегийн дагуу статик үүсгэл (Static Generation) болон серверийн талд рендеринг (Server-side Rendering)-ийг дэмждэг. Яаж хэрэгжүүлэхийг харцгаая:

Статик үүсгэл (Static Generation)

Төслийг бүтээх үед контентыг урьдчилан үүсгэхийг хүсвэл getStaticProps-ийг ашиглаж болно. Жишээ нь:

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();

  return {
    props: {
      data: json,
    },
  };
}

export default function Page({ data }) {
  return {data.title};
}

Серверийн талд рендеринг (Server-side Rendering)

Хэрэв та хүсвэл хүсэлт бүрийн үед өгөгдлийг авахыг хүсвэл getServerSideProps-ийг ашиглаж болно:

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

export default function Page({ data }) {
  return {data.title};
}

CSS болон стиль нэмэх

Next.js нь CSS стилийг нэмэх олон аргыг санал болгодог, хамгийн хялбар арга нь styles/ директорт CSS файл үүсгэж, шаардлагатай хуудсанд оруулах явдал юм:

import styles from './styles/Home.module.css';

export default function Home() {
  return 

# Next.js-д тавтай морил!

;
}

Мөн та CSS-in-JS номын санг ашиглаж болох бөгөөд, жишээлбэл styled-components эсвэл Emotion, стилийг боловсруулахад.

API маршрутууд

Та pages/api/ директорт API маршрутуудыг үүсгэж болно. Жишээ нь, hello.js файл үүсгэж:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello API' });
}

API маршрутууд нь хүсэлт болон хариултыг боловсруулах боломжийг олгодог бөгөөд фронтэнд динамик өгөгдөл боловсруулах чадварыг олгодог.

Next.js програмыг байршуулалт хийх

Хамгийн хялбар байршуулалтын арга нь Vercel-ийг ашиглах бөгөөд энэ нь Next.js-ийн хөгжүүлэлтийн багийн бүтээсэн үнэгүй хостинг платформ юм. Зөвхөн кодыг GitHub руу түлхэж, дараа нь Vercel-ийг GitHub дансанд холбоход автомат бүтээл, байршуулалт хийгдэнэ.

Дүгнэлт

Next.js нь орчин үеийн Web програмыг бүтээхэд тохиромжтой фреймворк бөгөөд түүний хүчирхэг функц, уян хатан байдал нь хөгжүүлэгчдэд програмыг бүтээх, сайжруулахад анхаарах боломжийг олгодог. Энэ нийтлэлийн танилцуулгаар, та Next.js-ийн үндсэн хэрэглээг ойлгосон гэж найдаж байна. Ирээдүйн төслүүддээ Next.js-ийн давуу талыг бүрэн ашиглаж, илүү үр ашигтай Web програмуудыг бүтээхийг хүсч байна.

Хэрэв асуулт байвал эсвэл цаашид суралцах нөөц хэрэгтэй бол, Next.js-ийн албан ёсны баримт бичиг-ийг хэзээ ч шалгаж болно.