Next.js / Vercel Analytics ба мониторинг

Vercel Analytics ба мониторинг

Апп deploy хийсний дараа хэрэглэгч яаж хэрэглэж байгааг мэдэх хэрэгтэй. Хичнээн хүн ирж байна вэ? Аль хуудас удаан ачаалагдаж байна вэ? Ямар алдаа гарч байна вэ? Vercel-н Analytics болон Speed Insights эдгээр асуултыг хариулдаг — хоёулаа үнэгүй tier-тэй. Monitoring тохируулснаар аппын асуудлыг хэрэглэгч мэдэхийн өмнө та олж засах боломжтой болдог.

Vercel Analytics тохируулах

Vercel Analytics нь хуудасны хандалт, хэрэглэгчийн тоог хянадаг — cookie ашиглахгүй тул GDPR-д нийцдэг:

bash

npm install @vercel/analytics

Root layout-д нэмнэ:

tsx

// app/layout.tsx
import { Analytics } from "@vercel/analytics/react";
import { GeistSans } from "next/font/google";

const geistSans = GeistSans({
  subsets: ["latin"],
  variable: "--font-geist-sans",
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="mn" className={geistSans.variable}>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Vercel dashboard → тухайн project → Analytics tab дарахад хандалтын мэдээлэл харагдана:

| Үзүүлэлт | Тайлбар | | --------------- | ------------------------- | | Page Views | Нийт хуудас харсан тоо | | Unique Visitors | Өвөрмөц хэрэглэгчийн тоо | | Top Pages | Хамгийн их хандсан хуудас | | Referrers | Хаанаас ирсэн | | Countries | Ямар улс орноос ирсэн |

Speed Insights тохируулах

Speed Insights нь Core Web Vitals-г бодит хэрэглэгчийн төхөөрөмжөөс хэмждэг — synthetic test биш:

bash

npm install @vercel/speed-insights

tsx

// app/layout.tsx
import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/next";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="mn">
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

Speed Insights dashboard-д хуудас бүрийн LCP, INP, CLS утгуудыг харж болно. Асуудалтай хуудсыг шууд тодорхойлж оновчлох боломжтой.

Custom event бүртгэх

Хэрэглэгч тодорхой үйлдэл хийхэд custom event бүртгэж болно — жишээлбэл хичээл дуусгах, бүртгүүлэх:

tsx

// components/lesson/LessonPanel.tsx
"use client";

import { track } from "@vercel/analytics";

interface CompleteLessonButtonProps {
  courseSlug: string;
  lessonSlug: string;
  onComplete: () => void;
}

export default function CompleteLessonButton({
  courseSlug,
  lessonSlug,
  onComplete,
}: CompleteLessonButtonProps) {
  function handleComplete() {
    // Custom event бүртгэнэ
    track("lesson_completed", {
      courseSlug,
      lessonSlug,
    });

    onComplete();
  }

  return (
    <button
      onClick={handleComplete}
      className="px-6 py-3 bg-[#4ade80] text-[#0b1120] font-semibold rounded-lg"
    >
      Дуусгах
    </button>
  );
}

Custom event-ийг Analytics dashboard → Events tab-д харна. Ямар хичээл хамгийн их дуусгагдаж байгаа, аль курс идэвхтэй байгааг ингэж хянана.

Vercel Log Drain ба Function Log

API route болон Server Action-н log-г Vercel dashboard-д харж болно:

typescript

// app/api/progress/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  const body = await request.json();

  // Log нь Vercel Functions log-д харагдана
  console.log("[progress] Хичээл дуусгалаа:", {
    courseSlug: body.courseSlug,
    lessonSlug: body.lessonSlug,
    timestamp: new Date().toISOString(),
  });

  // алдаа гарвал бүртгэнэ
  try {
    // ... Supabase логик
    return NextResponse.json({ success: true });
  } catch (error) {
    console.error("[progress] Алдаа гарлаа:", error);
    return NextResponse.json({ error: "Серверийн алдаа" }, { status: 500 });
  }
}

Vercel dashboard → Logs tab → Function-уудын console.log, console.error бүгд бодит цагаар харагдана.

Supabase мониторинг

Supabase-н өөрийн dashboard-д database-н мониторинг байдаг:

sql

-- Supabase SQL Editor дотор хэрэглэгчийн идэвхийг харах
select
  date_trunc('day', completed_at) as day,
  count(*) as completions
from lesson_progress
group by day
order by day desc
limit 30;

| Хянах зүйл | Хэрэгсэл | | ------------------ | --------------------- | | Хандалт, хэрэглэгч | Vercel Analytics | | LCP, INP, CLS | Vercel Speed Insights | | API log, алдаа | Vercel Function Logs | | Database query | Supabase Dashboard | | Custom event | track() функц |

Мониторингийг эхнээс нь тохируулбал апп өсөхийн хэрээр юу сайжруулах хэрэгтэйг тоон мэдээлэлд тулгуурлан шийдэх боломжтой болдог. Таамаглалаар биш, бодит өгөгдлөөр шийдвэр гаргах нь мэргэжлийн хөгжүүлэгчийн нэг чухал чадвар юм.

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

Курсын эцсийн төслийг бүтээнэ — Next.js, Supabase, Vercel ашиглан бүрэн fullstack апп хийж, deploy хүртэл хүргэнэ.

← Өмнөх хичээлVercel тохиргоо ба domain Дараах хичээл →Эцсийн төсөл