Next.js гэж юу вэ?

Next.js бол React дээр суурилсан fullstack веб фреймворк юм. Vercel компани 2016 онд анх гаргасан бөгөөд өнөөдөр дэлхийн хамгийн түгээмэл React фреймворк болоод байна. Та React курсд component, hooks, state суралцсан. Next.js тэр мэдлэгийг авч, дээр нь routing, server rendering, өгөгдөл татах, deploy хийх зэрэг бүх зүйлийг нэмдэг.

React ба Next.js-н ялгаа

React бол зөвхөн UI library — routing, server rendering, API зэргийг өөрөө тохируулах шаардлагатай. Next.js бол бүх зүйлийг багтаасан фреймворк:

| Зүйл | React (Vite) | Next.js | |---|---|---| | Routing | React Router суулгах | Файлын бүтцээр автоматаар | | Server rendering | Тохируулах шаардлагатай | Анхнаасаа дэмждэг | | API routes | Тусдаа backend шаардлагатай | Нэг проектод багтана | | SEO | Нэмэлт тохиргоо | Анхнаасаа дэмждэг | | Deploy | Өөрөө тохируулах | Vercel дээр нэг товчоор |

File-based routing

Next.js-н хамгийн том онцлог бол файлд суурилсан routing юм. app/ директор дотор файл үүсгэхэд автоматаар хуудас болдог:

app/
├── page.tsx          →  /
├── about/
│   └── page.tsx      →  /about
└── courses/
    ├── page.tsx      →  /courses
    └── [slug]/
        └── page.tsx  →  /courses/anything

Тусдаа router тохируулах шаардлагагүй — зүгээр л файл үүсгэхэд болно.

Server Component гэж юу вэ?

Next.js-н App Router-н хамгийн чухал ойлголт бол Server Component юм. Энэ бол серверт ажилладаг React component:

// app/page.tsx — Server Component (анхны төлөв)
export default async function HomePage() {
  // Сервер дээр өгөгдлийн сангаас шууд уншиж болно
  const courses = await getCourses();

  return (
    <main>
      <h1>Сургалтууд</h1>
      {courses.map(course => (
        <div key={course.slug}>{course.title}</div>
      ))}
    </main>
  );
}

Энэ component-н код хэрэглэгчийн хөтөч рүү очдоггүй — зөвхөн сервер дээр ажилладаг. Үр дүн нь HTML байдлаар хөтөч рүү ирдэг.

Анхны Next.js апп

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

Суулгах явцад хэд хэдэн сонголт асуух бол:

• TypeScript: Yes
• ESLint: Yes
• Tailwind CSS: Yes
• App Router: Yes

Хөтчөөр http://localhost:3000 хаягаар орвол анхны Next.js аппаа харна.

Яагаад Next.js сурах хэрэгтэй вэ?

Fullstack нэг газарт — Frontend болон backend кодыг нэг проектод бичдэг. API route, database connection бүгд нэг репозиторид байна.

Гүйцэтгэл — Server rendering ашиглан хуудас маш хурдан ачаалагддаг. Google-н хайлтанд өндөр байр эзэлдэг.

Vercel — Next.js-г Vercel компани хөгжүүлдэг тул deploy хийх нь хэдхэн минут болдог.

Ажлын байр — Монгол болон дэлхийн зах зээлд Next.js мэдэх хөгжүүлэгчийн эрэлт өндөр байна.

Дараагийн хичээлд:

Next.js проект суулгаж файлын бүтцийг танилцана. app/layout.tsx, app/page.tsx файлуудын үүргийг ойлгоно.